Juan Martín García, Developer in Buenos Aires, Argentina
Juan is available for hire
Hire Juan

Juan Martín García

Verified Expert  in Engineering

UI/UX Designer and Front-end Developer

Buenos Aires, Argentina

Toptal member since October 23, 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

Availability

Part-time

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

SSV | Website Design and Development

http://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

http://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

http://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.

MMU | Website Design and Development

http://www.maitemu.com.ar
This is a project I designed and developed for a wellness coach. This minimalistic website serves as a comprehensive wellness hub, offering individuals the guidance, motivation, and resources needed to embark on and maintain their personal wellness journeys.

The project has a minimal design, allowing the user to focus on the content and deliver a user-centric, accessible, and empowering experience. It exemplifies the fusion of technology and expertise in crafting a tool that empowers positive change in the well-being of individuals on their wellness journeys.

León XIII Institute | Website and Design System

http://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

http://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

http://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 a 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 JS with any external dependencies.
2010 - 2015

Bachelor's Degree in Graphic Design

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

Libraries/APIs

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

Tools

Stylus Development, 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 Development, 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