Juan Varela - Freelance HTML Developer for Hire

CTO - Founder

Grex

2016 - PRESENT

Launched development of a state of the art automated image recognition software that integrates to the flow of live sport broadcasting.
Handled and converted complex video codecs and encoding.
Developed a product from scratch, taking it all the way to TV broadcasters.

Technologies: Node.js, React, FFmpeg, OpenCV

Front-end Developer

French Startup (via Toptal)

2017 - 2017

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 (github.com/codrops/Stapel) and Sortable (github.com/RubaXa/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 (themeforest.net/item/angulr-bootstrap-admin-web-app-with-angularjs/8437259).

Technologies: Vue.js, JavaScript, jQuery, Bootstrap 3, H5P, Webpack, Rollup

Senior Web Developer

LATAM

2015 - 2016

Made two highly critical applications from scratch to production with an Agile team: the main application 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: JavaScript, HTML5, CSS3, Bootstrap, Node.js, Backbone.js, DDD, Git, Jenkins. Mocha.js, Chai.js. Yadda.js

Web Developer

Bike City Guide

2013 - 2015

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 from scratch an online bicycle route planner based on the Leaflet.js library that 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.

Technologies: JavaScript, Angular, jQuery, Bootstrap, Leaflet.js, OpenStreeMaps, PHP, Symfony, MVC

Campaign Administrator/Various

PIMOD

2010 - 2011

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 AdWords/AdSense, Google WebMasters Tools. Management of social platforms. Facebook, Twitter

Ticket Change Application - LATAM (Development)

https://www.latam.com/en_au/apps/personas/reissue#booking-search

LATAM is the biggest airline in Latin America. It is currently going through an Agile transformation and re-writing 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. TDD (Test-driven Development) and BDD (Behavior-driven development) were mandatory to ensure a high quality product, ease of modification and feature addition. CI (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.

Same Day Ticket Change - LATAM (Development)

https://www.latam.com/en_au/apps/personas/samedayflightchange

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. TDD (Test-driven Development) and BDD (Behavior-driven development) ensured a high quality product, since failure on the same day of the flight can not be tolerated.

A useful learning experience with a mature and skilled team.

BikeCitizens Startup (Other amazing things)

http://www.bikecitizens.net/

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 of have been a part of this process.

getFinn.com - Finn Bicycle Mount Landing Page (Development)

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. (Development)

http://finnder.org

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.

bikeNatureGuide.org - BikeNatureGuide's Landing Page (Development)

http://www.bikenatureguide.org/

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.

Flexbox and Sass Grid Tutorial: How to Streamline Responsive Design (Publication)

https://www.toptal.com/sass/css3-flexbox-sass-grid-tutorial

Recently, I was challenged to create my own grid system and, since re-inventing the wheel is always useful as a learning experience, I went for it. I knew it would be an interesting challenge, but I was surprised by how easy it turned out to be!

Languages

HTML, CSS3, JavaScript, CSS, HTML5, Haml, PHP 5, Liquid Template

Frameworks

Bootstrap 3, Mocha.js, Bootstrap 2, Redux, Symfony 2, Selenium

Libraries/APIs

jQuery, Node.js, Chai, Vue.js, Backbone.js, PhantomJS, Yadda, REST API, Marionette.js, FFmpeg, Liquid, React.js

Tools

WebStorm, Git, Subversion (SVN), Karma, Jekyll, Jenkins

Paradigms

Unit Testing, Agile Software Development, BEM, Asynchronous Programming, Domain-driven Design, Test-driven Development (TDD)

Platforms

Linux, Shopify

Storage

MySQL, MongoDB