Publication
Flexbox and Sass Grid Tutorial: How to Streamline Responsive Design
https://www.toptal.com/developers/sass/css3-flexbox-sass-grid-tutorial
Juan is currently unavailable
Juan Varela
Verified Expert in Engineering
Software Developer
Graz, Austria
Toptal member since April 19, 2017
Bio
Juan is a very passionate front-end and back-end web developer whose specialty is making beautiful and responsive UX focusing on usability and design. He has over a decade of experience working independently, at startups, and big companies/teams. He's worked on critical applications under immense time pressure. He is an amicable and communicative person who takes a lot of pride in his work.
Portfolio
Highlight
OpenCV, FFmpeg, React, Node.js, Email Templates, Newsletter Templates
OB1 (Via Toptal)
CSS, Travis CI, SCSS, GitHub Pages, WordPress, Jekyll, HTML
French Startup (via Toptal)
Rollup, Webpack, HTML5, Bootstrap 3, jQuery, JavaScript, Vue
Experience
- HTML - 20 years
- JavaScript - 10 years
- CSS - 10 years
- Git - 6 years
- Node.js - 4 years
- Bootstrap 3 - 3 years
- Vue - 3 years
- React - 3 years
Preferred Environment
CSS, Git, WebStorm, MacOS, Windows, Linux
The most amazing...
...team I've worked with was able to have a working product for a huge airline with the highest quality standards under loads of pressure in a couple of months.
Work Experience
CTO and Founder
2016 - 2019
Highlight
- Launched the development of a state-of-the-art automated image recognition software that integrates with the flow of live sports broadcasting.
- Handled and converted complex video codecs and encoding.
- Developed a product from scratch, taking it all the way to TV broadcasters.
Technologies: OpenCV, FFmpeg, React, Node.js, Email Templates, Newsletter Templates
Jekyll Site Developer
2018 - 2018
OB1 (Via Toptal)
- Migrated the current WordPress design to a Jekyll generated site/blog focusing on clean code and performance, which were big issues with the previous site.
- Created custom migration scripts for the existing images, downloading them into the new file-structure corresponding markup.
- Deployed the site with a continuous integration build with Travis CI and published on GitHub pages.
Technologies: CSS, Travis CI, SCSS, GitHub Pages, WordPress, Jekyll, HTML
Front-end Developer
2017 - 2017
French Startup (via Toptal)
- Helped the client develop prototypes for their education testing system, rapidly developing standalone web apps. The client uses a wide range of tools and technologies and has some very particular project constraints which make the problem very interesting.
- Customized some jQuery plugins like Stapel and Sortable.
- Developed Vue.js components from scratch integrating with components like Vue.Draggable.
- Built custom modifications of the H5P framework.
- Experimented with module bundlers including Webpack and Rollup.
- Integrated Bootstrap 3 themes, specifically the Angulr theme.
Technologies: Rollup, Webpack, HTML5, Bootstrap 3, jQuery, JavaScript, Vue
Senior Web Developer
2015 - 2016
LATAM
- Made two highly critical applications from scratch to production with an Agile team: The main application is called Ticket Change, and its sister application, Same Day Flight Change.
- Encountered high-traffic sites where performance is critical (biggest airline of Latin America).
- Developed patterns and libraries that integrate seamlessly between dozens of teams using various technologies.
- Integrated with various payment methods—notably, the collaboration creating the new in-house payment platform for the airline.
- Developed with continuous integration using Jenkins. It allowed us to safely deploy as often as necessary and have automated tests.
- Adhered to TDD, unit testing, and BDD best practices.
- Interacted extensively with lots of teams working on different applications that need the same look and feel.
- Helped develop an in-house DDD-based JavaScript framework using Backbone.js.
Technologies: Yadda, Chai, Jenkins, Mocha, Git, Domain-driven Design (DDD), Backbone.js, Node.js, Bootstrap, CSS3, HTML5, JavaScript
Web Developer
2013 - 2015
Bike City Guide
- Developed native smartphone bicycle routing apps.
- Spearheaded many things, being one of the first employees of the company.
- Attended conferences, presented the product, and gave pitches.
- Developed an online bicycle route planner from scratch based on Leaflet.js library, which uses OpenStreetMaps data.
- Created landing pages for the products and institutional sites using Bootstrap, jQuery, and other standard web technologies.
- Integrated with payment systems like PayPal, acquiring an in-depth knowledge of the API, the developer tools, and sandboxes.
- Developed the initial stage of the main products' shop in Shopify.
Technologies: OpenStreetMap API, Model View Controller (MVC), Symfony, PHP, Leaflet, Bootstrap, jQuery, Angular, JavaScript
Campaign Administrator/Various
2010 - 2011
PIMOD
- Ran a great number of Google AdWords/AdSense campaigns for PIMOD's clients. This included very competitive markets where extreme optimization and intimate knowledge of the tools was required. All of the results were tracked to the maximum extent.
- Provided SEO, becoming very familiar with using the many tools available for optimization, creating quality incoming links, and positioning the site to its full potential.
- Managed the community and communications for many of the companies that hired us for this service. This included communication with their clients and writing content for blogs and social entries.
- Created online plans and strategies and advised what their online presence should look like. This involved a good understanding of the need of the clients and what are the best forms and mediums for them online including advertisement and social profiles.
- Helped companies set up automated platforms for customer relationship management.
Technologies: Google Webmaster Tools, Google Ads, X (formerly Twitter), Facebook
Experience
Ticket Change Application - LATAM
LATAM is the biggest airline in Latin America. It is currently going through an Agile transformation and rewriting its legacy code into a modern stack.
Programming the Ticket Change application was no small challenge, taking the joint effort of two interdisciplinary Scrum teams a year and a half to build. I am very proud to have been part of the process. There was a high focus on adding value to the product every iteration. Thanks to the creativity of the team, we were able to have a useful product after only one month. The airline business is a complex one. The Ticket Change application, due to its huge scope, is particularly difficult. It is also a highly critical product for the airline.
Testing was at the very core of the application. Test-driven development and behavior-driven development were mandatory to ensure a high-quality product, ease of modification and feature addition. Continuous integration helped to test our ideas and features right away. This was all done under high pressure for the product to succeed and low tolerance to failure on critical issues such as payment and ticket consistency.
To this day, Ticket Change is regarded as a great success story for the company.
Programming the Ticket Change application was no small challenge, taking the joint effort of two interdisciplinary Scrum teams a year and a half to build. I am very proud to have been part of the process. There was a high focus on adding value to the product every iteration. Thanks to the creativity of the team, we were able to have a useful product after only one month. The airline business is a complex one. The Ticket Change application, due to its huge scope, is particularly difficult. It is also a highly critical product for the airline.
Testing was at the very core of the application. Test-driven development and behavior-driven development were mandatory to ensure a high-quality product, ease of modification and feature addition. Continuous integration helped to test our ideas and features right away. This was all done under high pressure for the product to succeed and low tolerance to failure on critical issues such as payment and ticket consistency.
To this day, Ticket Change is regarded as a great success story for the company.
Custom Shopify eCommerce Sites for Artisan Clay Crock Products and Paintings
A couple that sold their artwork mainly through their homes needed an online presence and a way to sell directly online.
Two separate sites were made for the different products and put into production with online payment for the products.
Two separate sites were made for the different products and put into production with online payment for the products.
Brandible - Accessibility Ramp Up
Make Brandible generated sites compliant with accessibility according to WCAG guides.
Same Day Ticket Change - LATAM
LATAM is the biggest airline in Latin America. It is currently going through an Agile transformation, rewritten from legacy code into a modern stack.
After the success of the Ticket Change application achieved by my team, the team was tasked with making a sister application called Same Day Flight Change. Though the application was smaller in scope to the previous one, it had never been done before by the company, hence the challenges were new to all team members. It was remarkable to make a 55,000 employee company define their business domain and efficiently build the site from scratch to production.
The team was already very mature and knowledgeable about the domain, so the product delivery timeline was done with high precision and the delivery was right on time. It is shown as an example of how Scrum teams can evolve to be very mature and have very high and consistent output throughout. Testing was at the core of the application. Test-driven development and behavior-driven development ensured a high-quality product since failure on the same day of the flight cannot be tolerated.
A useful learning experience with a mature and skilled team.
After the success of the Ticket Change application achieved by my team, the team was tasked with making a sister application called Same Day Flight Change. Though the application was smaller in scope to the previous one, it had never been done before by the company, hence the challenges were new to all team members. It was remarkable to make a 55,000 employee company define their business domain and efficiently build the site from scratch to production.
The team was already very mature and knowledgeable about the domain, so the product delivery timeline was done with high precision and the delivery was right on time. It is shown as an example of how Scrum teams can evolve to be very mature and have very high and consistent output throughout. Testing was at the core of the application. Test-driven development and behavior-driven development ensured a high-quality product since failure on the same day of the flight cannot be tolerated.
A useful learning experience with a mature and skilled team.
BikeCitizens Startup
A pivotal stage of growth and learning in my career as a web developer and entrepreneur was in Graz, Austria. I had the opportunity to be one of the first employees of the award-winning BikeCitizens startup.
When I joined the company it was still in its early stages. As the in-house web developer, I was in charge of building and maintaining the institutional sites, the landing pages for the products, an online JS-based route planner, and the eCommerce shop for the physical products. Further responsibilities included going to conferences, pitching, designing, and promoting online presence.
This was a very productive time for the startup, which went through exponential growth. I am extremely proud to have been a part of this process.
When I joined the company it was still in its early stages. As the in-house web developer, I was in charge of building and maintaining the institutional sites, the landing pages for the products, an online JS-based route planner, and the eCommerce shop for the physical products. Further responsibilities included going to conferences, pitching, designing, and promoting online presence.
This was a very productive time for the startup, which went through exponential growth. I am extremely proud to have been a part of this process.
GetFinn.com - Finn Bicycle Mount Landing Page
http://getfinn.com/This is the landing page for the award winning Finn bicycle mount that I developed while working at BikeCitizens. The site, though simple, had a great CTR and did great with the selling of the star product of the company. Lots of experimentation was done to come up with this site, the result was a highly effective site which is concise but helpful and focused.
Finnder.org - An Online Route Planner for Bicycles.
During my time at the startup BikeCitizens, I was tasked with making an online route planner for bicycles using the API developed for native smartphone apps. The site was built from scratch using leaflet.js, an open source map library.
This application, in spite of its simple interface, is very powerful and a great way to promote and showcase the routing capabilities of our algorithms.
This application, in spite of its simple interface, is very powerful and a great way to promote and showcase the routing capabilities of our algorithms.
BikeNatureGuide.org - BikeNatureGuide's Landing Page
A simple yet beautiful landing page for the the sister product of BikeCitizens, an award winning smartphone app. This was done during the time I was the web developer for BikeCitizens.
OpenBazaar Jekyll site
https://github.com/OpenBazaar/official_siteWorked on the re-launch of the OpenBazaar.org site. Focusing on clean code and performance with modern technologies.
Skills
Libraries/APIs
Vue, Node.js, jQuery, React, Backbone.js, PhantomJS, Yadda, Chai, REST APIs, Marionette.js, OpenCV, Leaflet, OpenStreetMap API, Vuex, Liquid, FFmpeg
Tools
Git, WebStorm, Jekyll, Subversion (SVN), Karma, Mocha, Prisma, Google Webmaster Tools, Webpack, Rollup, GitHub Pages, Travis CI, Figma, Jenkins
Languages
CSS3, HTML5, CSS, JavaScript, HTML, Python, TypeScript, PHP, SCSS, Elm, Haml, Liquid Template, PHP 5
Frameworks
Bootstrap 3, Bootstrap 2, Bootstrap, Angular, Symfony, Symfony 2, Redux, Selenium
Paradigms
BEM, Unit Testing, Asynchronous Programming, Agile Software Development, Test-driven Development (TDD), Model View Controller (MVC)
Platforms
Linux, Windows, MacOS, X (formerly Twitter), Google Ads, WordPress, Shopify
Storage
MongoDB, MySQL
Other
Front-end, Domain-driven Design (DDD), SSH, Email Templates, Newsletter Templates, Facebook, FTP
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