Diego Díaz, Developer in Montevideo, Montevideo Department, Uruguay
Diego is available for hire
Hire Diego

Diego Díaz

Verified Expert  in Engineering

Responsive UI Developer

Location
Montevideo, Montevideo Department, Uruguay
Toptal Member Since
January 27, 2017

Diego's experience in advertisement, communication, and design drives him to develop web apps focused on UI and UX. He is able to create fluid layouts that fit any screen and work on progressive enhancement or graceful degradation for variable display resolutions, from the smallest portable devices to 5K resolutions. Diego believes a strong foundation and content-oriented architecture allow users to feel the app.

Portfolio

Freedom Robotics
React, Redux, TypeScript, Next.js, Framer, Formik, Yup, SDKs, APIs, Day.js...
Humanity Forward, a 501c(4) non-profit
JavaScript, HTML, CSS, GitHub, Netlify, React, Gatsby, GraphQL, Front-end...
LiquefEye – OatPearl (via Toptal)
Responsive Design, Bootstrap, Python, jQuery, JavaScript, Sass, CSS3, HTML5...

Experience

Availability

Part-time

Preferred Environment

Slack, Git, MacOS, JetBrains, Google Meet

The most amazing...

...thing I've done was to remake an app by creating new features, reducing transactions, and creating a new UX and internal architecture, increasing engagement.

Work Experience

React Front-end Developer | Lead

2020 - 2023
Freedom Robotics
  • Built a 0-1 application prioritizing effective communication for an intuitive user journey and scalability, achieving optimal performance and meeting growing user demands.
  • Built a customer-facing SDK for API-first customers from scratch. Reduced API QPS load by 90% and reduced user-perceived delays by 75%. This exports the codebase in ESM and CommonJS with typings.
  • Redesigned application API usage, reducing QPS by 90% without UX degradation.
  • Implemented a vetted UIKit, enhancing the user's engagement and a better development experience.
  • Ensured fluent intra-team communication to jump into action when required quickly.
Technologies: React, Redux, TypeScript, Next.js, Framer, Formik, Yup, SDKs, APIs, Day.js, Recharts, Mapbox GL, Front-end, Figma, CSS, HTML, Animation, Responsiveness, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, Vercel, UIKit, Front-end Development

JavaScript Developer

2021 - 2021
Humanity Forward, a 501c(4) non-profit
  • Created an alternative (foundation) theme and integrated it with Storyblok to be managed by non-technical teams.
  • Simplified existing features by polishing the codebase and making them handier for non-technical teams through a Storyblok set up.
  • Improved mobile UX, making sure elements gracefully converge into smaller screens.
  • Generated a maps web app proof of concept that consumes Airtable service to connect people across the US and provide income support.
Technologies: JavaScript, HTML, CSS, GitHub, Netlify, React, Gatsby, GraphQL, Front-end, Tailwind CSS, Responsiveness, Web UX, User Interface (UI), User Experience (UX), Web Development, Front-end Development

Senior UI/UX Developer

2020 - 2020
LiquefEye – OatPearl (via Toptal)
  • Integrated and refactored Bootstrap Sass to provide a scalable code.
  • Recreated components to be mobile-friendly.
  • Provided a complete re-branding.
  • Fixed broken existing elements.
  • Communicated extensively with the client to optimize priorities and resources.
Technologies: Responsive Design, Bootstrap, Python, jQuery, JavaScript, Sass, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Development, UIKit, SCSS, Front-end Development

Senior UI/UX Developer

2018 - 2020
The Catch Company (via Toptal)
  • Helped generate a brand new project focusing into a clean/maintainable code.
  • Provided support to the team in terms of UI and UX best practices.
  • Optimized project resources.
  • Reinforced the added value of fluent communication, making sure we are on the same page when resolved.
  • Generated reusable controls with clean, maintainable ES7 and wide cross-browsing/platform support.
  • Supported the back-end team, updating apps at different levels.
  • Generated new apps to feed the main one with SPA libraries such as React.
Technologies: Selenium, C#, PHP, Git, Angular, React, jQuery, Webpack, TypeScript, JavaScript, Sass, Bootstrap, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, Iframes, UIKit, SCSS, Front-end Development

Front-end Consultant

2018 - 2019
Seabury Solutions
  • Developed and extended an internal development framework.
  • Provided support to the team.
  • Worked closely with the managers.
  • Advised on front-end best practices.
  • Enhanced the current development process.
  • Gave support to other teams that consume the framework we provide.
Technologies: Git, DevExtreme, jQuery, AngularJS, Grunt, JavaScript, Bootstrap 3, Sass, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, UIKit, SCSS, Front-end Development

Senior UI/UX Developer

2017 - 2018
Sepia River (via Toptal)
  • Generated a framework to run up the front-end application from a simple Gulp tasks command line interface.
  • Set up Sass architecture with Bootstrap 4 so the client can handle low-level settings before exporting the look and feel.
  • Provided a wide range of fluid layouts.
  • Developed multiple, reusable components.
  • Supported the client with new approaches to take over the project.
Technologies: Git, jQuery, Node.js, JavaScript, Sass, Bootstrap, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Development, UIKit, SCSS, Front-end Development

Software Developer

2017 - 2017
Inpoint (via Toptal)
  • Refactored a specific section of an app with Backbone, generating mocked data according to view structures and sharing it with the back-end development team for API implementation.
  • Implemented a completely new system for user-oriented queries to enhance the experience.
  • Provided new features to extend the new use of Sass.
  • Introduced the concept of namespaces in CSS syntax.
  • Polished existing code while I worked with the app oriented to general good practices.
Technologies: Underscore.js, Backbone.js, Gulp, jQuery, Node.js, JavaScript, Docker, Git, Sass, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Web UX, User Interface (UI), User Experience (UX), Web Development, SCSS, Front-end Development

Senior UI/UX Developer

2017 - 2017
MIT Media Lab (via Toptal)
  • Designed a new look and feel for their app.
  • Coded a robust UI that adapts and flows with viewport size, providing a content-oriented structure according to different devices.
  • Refactored the app's logic with AngularJS.
  • Implemented new features.
  • Assisted the client, providing new alternatives and solutions.
Technologies: Gulp, D3.js, Lodash, jQuery, AngularJS, Node.js, JavaScript, Git, Sass, Bootstrap, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Web UX, User Interface (UI), User Experience (UX), Web Development, SCSS, Front-end Development

Director of Technology

2015 - 2017
Rainfactory, Inc.
  • Coordinated with the development team to achieve the desired results internally and with the client expectations.
  • Incorporated the company's internal processes, development stand-ups, and weekly dev and PM team meetings.
  • Created fast solutions for clients to ramp up super fast and raise funding, enhancing communication with strong visual and code development.
  • Developed child themes for WordPress-based products.
  • Generated custom plugins for crowdfunding campaigns to display and manage product perks from the back end for non-developer teams. Integrated with Indiegogo's API service.
  • Developed cross-browser compatibility without old browser detection and with specific resources for each one.
Technologies: Git, WordPress, MySQL, PHP, jQuery, Node.js, AngularJS, JavaScript, CSS3, HTML5, Responsive Web Design (RWD), Front-end, CSS, HTML, Animation, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, Iframes, UIKit, SCSS, Front-end Development

Senior Software Engineer

2014 - 2015
Monsoon Company/Kunai Consulting
  • Developed most of the UI and UX in projects where I was involved.
  • Helped the team to implement components to match the UI.
  • Generated Angular components for a plug-n-play UI.
  • Provided alternatives to clients in order to preserve a logic UI but with robust experience for users.
  • Gave an in-company tech talk "CSS Components" featuring Sass helpers and good practices.
  • Developed cross-browser compatibility without old browser detection and with specific resources for each one.
Technologies: CircleCI, Git, Node.js, JavaScript, CSS3, HTML5, Front-end, CSS, HTML, Animation, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, Iframes, UIKit, SCSS, Front-end Development

Co-founder and Chief Experience Officer

2013 - 2015
WARRG
  • Coordinated the front-end team with special focus on user experience enhancement and interfaces compatible with any viewport (including those out of standard).
  • Directly communicated with clients, providing development feedback and fast solutions to their needs.
  • Incorporated CSS3 mandatory/nice-to-have documentation after analyzing pros and cons.
  • Gave in-company tech talks "HTML5 New Features," "HTML5 for SEO," and "CSS Box Model, When to Use What... and Why!"
  • Led the company culture towards fluid communication, partnership, and good-will principles.
Technologies: PHP, JavaScript, CSS3, HTML5, Front-end, CSS, HTML, Animation, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, Iframes, UIKit, SCSS, Front-end Development

Web UI/UX Developer

2011 - 2015
Rockstar Coders
  • Assisted the company in migrating from fixed websites to responsive/fluid layouts.
  • Introduced AngularJS for the first time in a project.
  • Handled UI/UX-oriented projects that needed robust and detailed execution.
  • Collaborated on back-end stuff, helping with front-end design concepts introduced in clean HTML and CSS.
  • Coordinated and ran internal projects with the principal members of the company.
  • Developed cross-browser compatibility without old browser detection and with specific resources for each one.
Technologies: Drupal, WordPress, PHP, JavaScript, CSS3, HTML5, Front-end, CSS, HTML, Animation, Responsiveness, Mobile First, Web UX, User Interface (UI), User Experience (UX), Web Dashboards, Web Development, Iframes, UIKit, SCSS, Front-end Development

Web UI Developer

2011 - 2011
Intacto
  • Produced solid HTML interfaces.
  • Developed cross-browser compatibility without old browser detection and with specific resources for each one.
  • Standardized the front-end development process.
  • Created "good practices" documentation for the development area.
  • Aided the design team in creating specific components including a big set of customizable vector avatars for a marketing campaign app.
Technologies: PHP, JavaScript, CSS3, HTML5, Front-end, CSS, HTML, Responsiveness, Web UX, User Interface (UI), User Experience (UX), Web Development, Iframes, UIKit, Front-end Development

Web Developer

2010 - 2011
Microsoft (via E-volution)
  • Developed communication elements for marketing campaigns.
  • Designed marketing elements for marketing campaigns.
  • Helped integrate CSS in projects (before, they didn't work with it due compatibility issues with their platforms).
  • Developed cross-browser compatibility without old browser detection and with specific resources for each one.
Technologies: JavaScript, CSS, HTML, Front-end, User Interface (UI), Web Development, Front-end Development

Graphic Designer

2009 - 2010
Diseño y Comunicación Editorial
  • Designed yearly agendas for clients with advertising from their providers and suppliers.
  • Produced videos to communicate with suppliers and offer advertising spaces.
  • Built microsites in Flash for clients with sales information and a contact channel.
  • Compiled and sent books to print.
  • Designed company branding.
Technologies: Vegas Pro, Adobe Premiere Pro, Flash, Adobe InDesign, Adobe Illustrator, Adobe Photoshop, Design

React + Tauri (Rust) TODO app

https://github.com/DD-UX/tauri-react
A cross-platform React/Tauri exercise app. Using an AWESOME-APP seed, I replaced native web components with Next.js/React and created a TODO app. I connected and extended the back end in Rust in order to enhance project/task relationships before data reached the front end. The app's UX makes sure the user is always in the loop (no dead ends).

Angular Spotify

https://github.com/DD-UX/angular-spotify
Angular 5 exercise with Spotify API to bind and unbind playlists to a user.

React App with Redux-Observable

https://github.com/DD-UX/create-react-app-sass-bootstrap4
React/Redux-Observable exercise.

Gulp MEAN

https://github.com/DD-UX/gulp-mean/
Boilerplate for MEAN stack with Gulp tasks to compile files from source into development and production environment.

- Super fast, combining Sass and CSS from Node modules and JavaScript into a single file.
- Compresses every image (requires TinyPNG API key) and SVG.
- Angular templateCache system.
- Bootstrap 4 alpha (6) with new and improved Flex grid.
- Gulp runs the Express app with LiveReload (only for development).
- Form sent to the API with server-side validation and nodemailer integrated.
- Build process gets the development environment and compresses it for easy uploading.
- CSS minified and JS uglified.
- Different from MBAS, this one is not server-side rendered before Angular rewrites the DOM.

MBAS - Middleman + Bootstrap 4 Alpha, Angular, and Sass Project Starter

https://github.com/DD-UX/MBAS/
This project was intended to create a front-end boilerplate taking advantage of Middleman rapid prototyping schema and its core language (Ruby), enhancing it with Angular and Sass. It was closed when Bootstrap 4 was super alpha and their flexbox implementation was poor. MBAS is still super useful for SEO due to elements written from the compiled version, and Angular only rewrites the DOM afterwards for any missing content.

Color Helpers

This code serves the purpose of efficiently handling the color specifications outlined in the brand books of important clients. Each color is assigned specific values for properties like background color, color (text), border (solid 1px), and border color. To streamline development and maintain flexibility, this code generates classes for each color, allowing for easy assembly and customization. Furthermore, the code incorporates support for various element statuses and pseudo-classes, including :hover, :focus, :checked, :active, :first-child, and :last-child. By leveraging this approach, the goal is to expedite development processes while accommodating dynamic adjustments based on the brand book's color variables. Additionally, a color map function could be implemented to provide alternative ways of accessing and utilizing the color mappings.
2006 - 2008

Advanced Technician's Degree in Advertising

Universidad Abierta Interamericana - Buenos Aires, Argentina

2005 - 2006

Advanced Technician's Degree in Advertising and Creative Communication

Escuela Superior de Creativos Publicitarios - Buenos Aires, Argentina

1999 - 2004

Technical Degree in Advertising Promotion, Communication, and Design

Technical high school, Fernando Fader - Buenos Aires, Argentina

Libraries/APIs

Flexbox, jQuery, DevExtreme, React, Backbone.js, Formik, Yup, Recharts, Lodash, Underscore.js, D3.js, Node.js, Mapbox GL

Tools

GitHub, Adobe Photoshop, Adobe Illustrator, Git, Google Analytics, Subversion (SVN), Visual Studio 2015, Webpack, JetBrains Rider, JetBrains, Figma, IntelliJ IDEA, Visual Studio, Slack, CircleCI, Adobe InDesign, Flash, Adobe Premiere Pro, Vegas Pro, Gulp, Grunt

Frameworks

AngularJS, UI-Router, Bootstrap, UIKit, Angular, Next.js, Tailwind CSS, Selenium, Bootstrap 3, Redux, Tauri

Languages

TypeScript, HTML5, Sass, JavaScript, CSS3, ECMAScript (ES6), HTML, CSS, SCSS, PHP, Less, ES7, C#, Python 3, Python, Ruby, GraphQL, Rust

Paradigms

Responsive, Responsive Coding, Agile, Progressive Enhancement, Agile Software Development, BEM, Responsive Web Design (RWD), MEAN Stack, Continuous Integration (CI)

Platforms

Internet Explorer, Windows, MacOS, WordPress, Drupal, Docker, Visual Studio Code (VS Code), Netlify, Vercel

Storage

Media Queries, MongoDB, MySQL

Other

Web UI, Cross-browser Compatibility, User Interface (UI), User Experience (UX), Angular Bootstrap, Responsive UI, Web UX, BEMIT, Front-end, Responsiveness, Web Dashboards, Web Development, Front-end Development, Cross-browser Testing, Styled-components, Design, Namespaces, CSS Grid, Framer, SDKs, Day.js, Mobile First, Iframes, Responsive Design, Rideshare Services, Google Meet, Gatsby, APIs, Animation, Development

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