Tony Batts

Hello, I'm Tony Batts.

I'm a web developer


Always Improving

When I'm not working I spend my days studying and building. This website is constantly evolving, comeback in a few days and you might notice a few changes (or a few bugs). Most nights I can be found at my desk staying up far too late to solve that "last" problem.

Fueled By Coffee

Coffee is my one and true vice. I would never get anything done without my fix. I may or may not have more coffee gear than my local coffee shop. My go to drink is a classic macchiato espresso. Keep an eye out for a little coffee easter egg hidden around here somewhere.

A Little Awkward

Always a bit uncomfortable but always going out of my comfort zone. "Enjoy your meal" "you too..." is pretty common in my day to day. I like to call it charm. I thrive on the "uncomfortable" feeling, it means that you are growing. Comfort zones are for the complacent.

A Little Obsessive

Once I get into something, I REALLY get into it. If you're looking at this site at 2 am don't be surprised if you see a change mid scroll. I probably just had an "Ah ha!" moment and hopped out of bed to make a quick adjustment. Often times I dream about fixing bugs, still not sure if this is a good or bad thing.















The List

  • Coffee Jitters
  • Buy Me A Coffee
  • The Run
  • Gotta Catch 'Em All
  • Shiny!
  • Word Guess
  • It's In The Code
  • Konami Code
  • Akatsuki

Hidden Gems

While I was building this portfolio I occasionally started to add easter eggs, little hidden gems that I thought would make people happy if they were to stumble across. At first just one, then one turned into two, and now there are currently ten easter eggs waiting to be found. I will likely end up adding more if a new idea pops up, I've had a lot of fun creating them. If you end up looking for all ten and need a hint feel free to ask me, or crack open the dev tools and poke around!


StoryMaps is a unique new way to tell your story. Joining Esri's powerful mapping software, with an intuitive interface, StoryMaps makes everyone a storyteller. I'm part of the passionate and talented team of Engineers building an exciting new storytelling platform. Using modern techniques and best practices, utilizing extensive testing with Jest, and type safety with Typescript. StoryMaps is a young product with new features being released every sprint.

Image Optimization Build System

At Esri I was asked to automate our image optimization/image use processes. This system runs at build time optimizing all subscribed packages images and creates various sizes and file types. This saves our team countless Product Engineer, Designer, and Software Engineer hours. Designers no longer need to create multiple sizes of images, Product Engineers no longer need to version those when updated, and Software Engineers no longer need to worry about 2x/src sets/placeholders etc.

K&N Engineering

As Senior Front End Developer at K&N Engineering, I took mockups from designers and coded them into functional web pages, and ensured visual consistency of websites via use of style guides and enforcement of established standards. I managed,,, both US and international sites. Worked closely with internal and external teams to launch products, promote sales, and kept the various websites under the K&N umbrella updated with fresh content. is a portfolio I built using Gatsby.js for an Art Director friend of mine. She was looking to migrate her website from Squarespace, and I took it as an opportunity to learn Gatsby.js. I built it from the ground up as a 1 for 1 to match her Squarespace website, animations included. I broke up the site into reusable React components, which will allow me to easily add more projects in the future. Thanks to Gatsby's optimizations and code splitting the site is lightning fast.


When starting a new project one of my pain points is choosing a theme. I found myself looking to other sites for inspiration, and opening dev tools to copy color codes. Over time this became tedious so I built a tool to make that process easier. Themify creates a list of easily copyable colors of the current website. The list can be configured to output hex, rgb, or hex without the "#" for easier photoshop pasting. The eyedropper makes it easy to grab colors from images and videos.

Gif Finder

Gif Finder is a straight to the point, easy to use tool for quickly finding that perfect gif to post in chat. After joining a new team I quickly found that gifs were the preferred language of communication, and I often wouldn't be able to find the perfect gif in a reasonable time. I built this extension to allow me to see a message from a coworker and reply back with an on point gif in seconds. Each gif can be quickly copied via the copy icon, or simply dragged to your desktop for easy use.

Quick Audit

Quick Audit is a Chrome Extension that runs a GTmetrix audit on the current tab with one click without having to navigate away from the page you are currently testing. I commonly have the need to run GTmetrix reports throughout my day while optimizing websites, I built this extension to help make that process more streamlined. Clicking the extension icon opens a window with no address bar/tool bar and automatically runs your current url through GTmetrix.

Winter Advertising Agency

This is the first website I have made professionally. As an intern my first project was to take an existing website and recreate it on another platform. I started with a blank canvas and built it from the ground up, once I was finished it looked exactly like the original. Completing this project proved that I would be a valuable team member, I was hired on shortly after. If I had the knowledge I have now when I was first tasked with making the site, I would have done a few things differently.

Stand Up Reminder

During my work day I often "get in the zone" and before I know it hours have passed and I haven't budged from my office chair. In order to keep healthy I decided to build a Chrome Extension that solves this problem for me. Based on the Apple Watch Stand reminder, my Stand Up Reminder triggers a popup on whatever page you are on once every hour. The popup has a 60 second countdown timer that gently nudges me to get up and stretch my legs.

Todo Web App

One challenging aspect of web development is keeping a handle on all of the various tasks that are needed throughout the workday. I found myself constantly scrawling down reminders on paper, this led to me building a Todo web application using HTML, CSS, and vanilla JavaScript. I utilized webpack and Babel to develop using ES6+ and still be supported by all browsers. I organized my code in JS modules to keep the code clean and readable.

Nieves Landscape

Nieves Landscape is a multi-million dollar landscaping firm based in Orange County. They hired me to get rid of their old broken site and build them a new fresh mobile first website. I tried to show the personality of the business in the design. I optimized it to load quickly, and I did some SEO to make sure they ranked high on google searches. This website/design won two awards from Hermes Creative Awards, as well as gets a lot of traffic month after month.

Tony Batts Golden Gate Bridge Tony Batts Seattle Starbucks Reserve Tony Batts walking in Mexico City Tony Batts Mexico City street view Tony Batts Carpenter Brut
Tony Batts Seattle Washington street view Tony Batts Mexico rooftop view Tony Batts New York Tony Batts New York Time Square Tony Batts Anthony Green concert Tony Batts Circa Survive concert


Enough about me, tell me about yourself

Don't be shy! What's your name?
Please leave a valid email
Leave me a message Form submission failed, try again later Thank you for reaching out!
A new version of this app is available. Click here to update.