Juan Villela

Juan Villela

(he/him)

Senior Front-End Developer Washington, DC

About Me

I like websites. Most of my time is spent making them. I’ve been doing it professionally for a little over 5 years now. I started off building statically generated sites with tools like Hugo and Jekyll. Now, I mostly work with Angular and React. But my focus remains the same; I strive to build accessible and performant websites that create an enjoyable experience for anyone. And more recently, I’ve begun to build robust back-end systems with Node.

Work Experience

  1. Senior Front-End Developer

    Present

    Big Pixel Remote

    Taking on a senior role gave me the privilege of serving as a resource for many of my peers. During this time, I’ve focused on ensuring we have solid documentation both in our code and throughout the various channels of communication we utilize.

    Since most of our clientele are corporations in need of internal apps, my job shifted towards web apps, as opposed to web site. But my goals remained the same; reliability and accessibility.

    Here are some of our recent projects:

    Toggle Books

    • React
    • Gatsby
    • Redux
    • Tailwind
    • TypeScript

    Ah, Qwerky. That’s the name of the little robot you interact with on this book builder site. This was one of the most challenging projects I’ve ever worked on. Audio playback, dynamic word bubble captions, character transitions, and loads of selection-based combinations. But we managed to ship an incredible product.

    The entirety of the site is statically built, all assets are lazy-loaded, and the app works completely offline. Everything runs off of 3 JSON data files that easily allow for new books to be added. It’s a complex dance coordinated by the audio playback. Start and stop determine what and when something transitions on the app.

    Oransi

    • Angular (SSR)
    • Nest
    • Apollo
    • Graphql
    • TypeScript

    This was my first foray into back-end development. NestJS is used as the API, with a GraphQL layer for I/O. This connects to various data sources, as well as a Postgres database for account management. Which is authenticated via JWTs. All of those are new technologies I’ve learned how to work with within the last few months. And it’s been an incredible learning experience.

    But hasn’t been without its problems. We are currently fighting a memory leak on the front-end, which has been an amazing educational journey on its own, but quite the challenge nonetheless.

  2. Junior Front-End Developer

    Freelancer Remote

    My time working independently was a pivotal moment for my career. I primarily worked with statically generate sites built using Hugo and Gatsby. My focus centered around small build sizes and accessible design. This was accomplished by often opting for a custom JavaScript solution, rather than picking a library off the shelf. And techniques such as inlining critical CSS, subsetting fonts, and lazy loading assets did wonders for fast load times and a nice experience on slower connections.

    These are some of the sites I helped build:

    Decision Point Healthcare

    • React
    • Gatsby
    • CSS Modules
    • Contentful

    DPH was looking to bring their Figma designs to life with the help of Gatsby. The idea was to make it easier for management and marketing to spin up new pages, write posts, and capture leads. And although Gatsby might seem a bit much for a marketing site, we managed to significantly reduce the bundle but swapping React with Preact.

    That, along with small and portable components, and robust integration with Contentful has allowed the team to quickly publish content for their visitors.

    YouArePreApproved

    • React
    • Gatsby
    • Redux

    YAPA had a site built over a decade ago that was in dire need of a revamp. But they wanted something that was not just a landing page for potential buyers. We started with Hugo for its speed. But that eventually change into Gatsby. A similar strategy like that of DPH was adopted here, but for a slightly different reason.

    Although most of the page was statically generated, the “offers” page required dynamically created tables that were updated every 10 minutes.

    The beautiful design you see there was made but a wonderful design firm based in Poland. This was a fantastic collaborative opportunity that exposed me to a new culture and true async communications.

Skills

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • React
  • Angular
  • Node
  • Express
  • NestJS
  • GraphQL
  • Git
  • Jest
  • Cypress
  • axe
  • Docker

Languages

  • English (native)
  • Spanish (fluent)

Interests

Like everyone, this varies. But most recently (last year or so) I’ve been stuck on cataloging as much of the stuff I find interesting online as possible. This started with a bookmarking app, then a Google Sheets doc, and now it’s all on Airtable.

This has become such a fun project that I’ve built various mobile scripts with a combination of iOS Shortcuts and Scriptable scripts for saving items. And to further archive and backup data, I’ve made various scripts that run regularly via GitHub Actions.

Relevant links:

Other hobbies include:

  • Cooking
  • Screaming at Mario Kart with my wife
  • Hoarding Magic The Gathering cards