Juan Martín García, Developer in Ingeniero Maschwitz, Buenos Aires Province, Argentina
Juan is currently unavailable

Juan Martín García

UI/UX Designer and Front-end Developer

Ingeniero Maschwitz, Buenos Aires Province, Argentina

Toptal member since April 29, 2019

Bio

Juan is a UI/UX designer and front-end developer with excellent communication skills and more than a decade of experience. He's worked as a contractor for teams of various sizes and for notable companies and institutions such as Microsoft, Viacom, Fox, Nickelodeon, University of North Carolina, Faena Hotels, Renault, and Banco Santander Río, among others.

Portfolio

Freelance
Semantic HTML, CSS, Node.js, JavaScript, CSS3, HTML5...
Thinkful & Bloc
CSS, Balsamiq, Adobe Experience Design (XD), Adobe, InVision Studio, InVision...
Cacao Büro
Semantic HTML, CSS, Adobe InDesign, Illustration, Adobe Photoshop...

Experience

  • CSS - 10 years
  • HTML - 10 years
  • JavaScript - 8 years
  • Accessibility - 5 years
  • Figma - 5 years
  • React - 3 years
  • Tailwind CSS - 3 years
  • Next.js - 3 years

Preferred Environment

Zsh, Git, Visual Studio Code (VS Code), Linux, MacOS

The most amazing...

...thing I've coded was a back end and mobile app for a construction company to handle internal communication among their 500 employees and staff members.

Work Experience

UI/UX Designer and Front-end Developer

2008 - PRESENT
Freelance
  • Designed and developed the UI/UX for an iPad app designed for the management of clinical records in the United States; also created the entire design system.
  • Built and designed the front end of the site for a drone retail company in Argentina.
  • Designed the UI/UX for a digital newspaper's proof of concept along with several customization features and personalization options for the user.
  • Designed and developed the front end and back end of a health website that would provide general information for the users about otorhinolaryngology.
  • Analyzed data from usability tests and enhanced the UX and UI to streamline the checkout experience for an airline in Argentina.
Technologies: Semantic HTML, CSS, Node.js, JavaScript, CSS3, HTML5, Visual Studio Code (VS Code), Adobe Illustrator, Adobe Photoshop, Balsamiq Mockups, Adobe Experience Design (XD), InVision Studio, InVision, Zeplin, Sketch, Figma

Product Design Mentor and Technical Expert

2018 - 2020
Thinkful & Bloc
  • Mentored students who were taking various product design courses.
  • Worked as a technical expert, helping students debug issues with their front-end code.
  • Reviewed and graded students' submissions and exercises.
  • Reviewed portfolios and provided advice to students building their design and development portfolios.
Technologies: CSS, Balsamiq, Adobe Experience Design (XD), Adobe, InVision Studio, InVision, Sketch, Figma

Partner

2014 - 2019
Cacao Büro
  • Designed and developed the front end for a platform for HR at a construction company, including the native Android app and web application.
  • Built and created the design of several websites for various companies, mainly related to the oil and construction industries.
  • Managed a UI/UX team for several products related to healthcare.
  • Designed the UI for an online tool related to education for the University of North Carolina.
  • Oversaw the UI/UX design of both a native iOS mobile app and a desktop web app for a company related to appraisals.
Technologies: Semantic HTML, CSS, Adobe InDesign, Illustration, Adobe Photoshop, Adobe Experience Design (XD), Visual Studio Code (VS Code), InVision Studio, InVision, Balsamiq Mockups, Sketch, Figma

Graphic and Editorial Designer

2012 - 2014
Catrasca Editions
  • Created the cover designs for several book collections from the publishing house.
  • Designed the internal layout for an illustrated book and newspaper supplements.
  • Built, designed, and maintained the company websites.
Technologies: Semantic HTML, JavaScript, CSS3, HTML5, Sublime Text, Adobe Illustrator, Adobe Photoshop, Adobe InDesign

Experience

Ser’Enzo | Website Development

https://serenzo.it
Ser’Enzo is the official responsive website for a boutique winery and agritourism experience in Lucignano d’Asso, Tuscany, showcasing vineyards, organic wine production, hospitality offerings, and terroir-driven storytelling.

Built with React and Next.js, the project delivers fast, modern navigation and SEO-friendly routing. I implemented the front-end using Tailwind CSS for utility-first styling and GSAP for smooth, engaging animations that enhance the visual narrative of the brand. The site features dynamic pages for the vineyard, wine varieties, hospitality experiences, and contact interfaces, all optimized for performance and accessibility across devices.

This project highlights my ability to translate a client’s identity into an immersive digital experience using cutting-edge web technologies and animation techniques.

Estomba | Website Design and Development

https://estomba.com.ar
Estomba is the official website for a construction project in Argentina, focused on residential apartments with a strong emphasis on materiality, spatial clarity, and functional design. The site presents information about the location, building, available units, and contact through a clean, image-driven experience.

I was responsible for the end-to-end product, including UI/UX design and front-end development. The website was built using React, Next.js, and Tailwind CSS, ensuring a fast, scalable, and fully responsive experience. Subtle interactions and transitions were implemented with GSAP to add rhythm and polish without distracting from the architectural content.
To enable easy content management, I integrated Decap CMS, allowing the studio to update projects, images, and text without developer intervention.

This project highlights my ability to combine visual design, modern front-end architecture, and CMS integration into a cohesive, maintainable product tailored to the creative industry.

Delta Bridge Partners | Website Design and Development

https://www.deltabridgepartners.com
Delta Bridge Partners is a corporate website for an international consulting and advisory firm, focused on strategy, transformation, and executive decision-making. The site is designed to convey clarity, credibility, and trust, presenting the firm’s services, approach, and positioning through a clean and structured digital presence aimed at senior-level audiences.

I led the project end-to-end, covering product design (UI/UX) and front-end development. The website was built with React and Next.js for performance, scalability, and SEO-friendly routing, with Tailwind CSS used to implement a precise, consistent design system. GSAP animations were applied selectively to add subtle motion and hierarchy, reinforcing the brand’s professionalism without overwhelming the content.

This project demonstrates my ability to design and build polished, high-impact websites for the professional services industry, balancing visual restraint, usability, and modern front-end engineering.

SSV | Website Design and Development

https://www.sharpstudiovisuals.com
The website for SSV, built with Next.js and Tailwind and powered by Decap CMS, aims to be a dynamic representation of the studio's work and vision.

It's not just a website; it's a digital platform that allows the client to showcase their stunning rendering and digital artwork, attract new clients, and share their design philosophy with a global audience. It was designed and developed from the ground up and represents a harmonious fusion of aesthetics and functionality, combining cutting-edge design and interactions with seamless user experience, all powered by Next.js and Tailwind for the front-end, Decap CMS for content management, and Netlify as the hosting platform.

The website is not just a static collection of images and information; it's an immersive digital experience crafted to engage and captivate visitors.

Through carefully designed interactions and animations, we've transformed the navigation of the site into an innovative and intriguing journey. Seamless transitions and dynamic loading enhance the fluidity of the user experience. Scrolling unveils hidden details, and subtle animations breathe life into our architectural creations, allowing you to truly immerse yourself in our world of design.

BAS | Website Design and Development

https://www.ba-studio.com.ar
This is a project for an architecture studio that I had the privilege to design and develop from the ground up. A fusion of aesthetics and functionality, the project combines a minimalistic design with a seamless user experience, all powered by Next.js and Tailwind for the front-end, Decap CMS for content management on the back-end, and hosted on Netlify.

The goal was to allow the architecture studio to showcase its architectural work, attract new clients, and share its design philosophy with a global audience. It can be hard to make a website stand out using so few design elements, but overall, I believe the final result pleased both the client and myself.

Cinedora | Website Development

https://www.cinedora.com
A website I developed for an Italian post-production studio. The client provided the designs, and I was in charge of coding them. The website is HTML, CSS, and JavaScript-based. It does not use any framework and features several CSS animations and transitions.

BEING | Website Development

https://www.being.cinedora.com/main.php?referral=jmg
BEING is a psychological suspense sci-fi drama from the independent director Leonardo Guerra Seragnoli from Cinedora. As a hobbyist musician, I was immediately drawn to this artistic project, which allowed me to blend my technical skills with my creative instincts to create an immersive online experience for fans of the genre.

Scrolling animations and transitions, interactive elements such as an audio and video player, and futuristic design elements, such as sleek UI components, vibrant colors, and dynamic typography, helped me capture the essence of the sci-fi movie.

Working on this project has been a thrilling experience, allowing me to combine my technical expertise with my passion for music and artistic expression. The result is a visually stunning, interactive, and immersive online platform that captures the essence of the sci-fi genre and provides fans with a memorable journey into the movie's universe.

León XIII Institute | Website and Design System

https://www.institutoleonxiii.edu.ar
I designed and developed the website and back end for a Catholic college in Buenos Aires, Argentina. The website would serve as a knowledge base for the many extra-curricular activities the college offers and their initial, primary, and secondary educational offerings. They needed a back-end interface that was intuitive so they could update the content by themselves and add new pages to the site.

The back end was built using Craft CMS and MySQL for the database. The front end was created using Twig as the templating engine, Sass as the preprocessor for CSS, and only using vanilla JavaScript, without any framework. The layout was achieved using modern layout techniques such as CSS Grid and Flexbox.

Goytía PKG | Website

https://goytiapkg.com
I developed the website for one of Latin America’s most experienced companies in the IP sector. The company had an outdated website, so they hired a company to provide the design, and I had to translate it into a working website.

Since the website was mostly static, I decided to code the front end without any framework and used plain HTML, Stylus as a preprocessor for CSS, and Vanilla JavaScript. The website has an infographic map created by another developer in D3.js, which I had to integrate on the front end.

Faena Catering | Website

https://faenacatering.com
I developed the website for the catering service of the Faena Hotel Argentina. The company needed a website, so I provided the design and had to translate it into pixel-perfect code.

Since the website mainly consisted of static content, I decided to code the front end without any framework. I used plain HTML, Stylus as a preprocessor for CSS, and vanilla JavaScript with no external dependencies.

Education

2010 - 2015

Bachelor's Degree in Graphic Design

University of Buenos Aires, Faculty of Architecture, Design, and Urbanism - Buenos Aires, Argentina

Skills

Libraries/APIs

Flexbox, Node.js, React, Passport.js, Google Maps API, jQuery, D3.js, Web Audio, GSAP

Tools

Stylus, JSX, Sketch, Figma, Zsh, Oh My Zsh, Zeplin, Adobe Photoshop, Adobe Illustrator, Create React App, MAMP, Git, Apache, InVision, Adobe, Balsamiq, Balsamiq Mockups, Adobe InDesign, Sublime Text, Webpack, Sequel Pro, Adobe Experience Design (XD)

Languages

HTML5, CSS3, HTML, CSS, JavaScript, Pug, Sass, ECMAScript (ES6), Markdown, Semantic HTML, PHP

Frameworks

Next.js, Vanilla JS, Tailwind CSS, Express.js, Twig, Redux, Laravel

Paradigms

Agile, Functional Programming

Platforms

Craft CMS, Firebase, Netlify, DigitalOcean, iOS, Webflow, Heroku, MacOS, Linux, Visual Studio Code (VS Code), Azure

Storage

MongoDB, MySQL

Other

CSS Grid, Accessibility, Web Accessibility, A11Y, Gatsby, Styled-components, Eleventy, Fish, InVision Studio, Illustration, Decap CMS, UI Animation, Landing Pages

Collaboration That Works

How to Work with Toptal

Toptal matches you directly with global industry experts from our network in hours—not weeks or months.

1

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3

Start your risk-free talent trial

Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.

Top talent is in high demand.

Start hiring