It's still hard to believe I worked full-time at [ProSource](https://www.getprosource.com/) for over 7 years. It's virtually impossible to distill everything I did there into a single post, but I've done my best to tailor the more recent roles and projects to web design, development, and front-end tooling.

### Web & graphic design

In October of 2020, my role was changed to **Creative Developer**. This more closely aligned with the type of work I was doing at the time. In 2021, I spent the majority of my time on the company rebrand and redesigning our main marketing website.

The rebrand effort had so many tentacles into other areas, including but not limited to:

* Brand and brand guidelines

* Collateral, including business cards

* Branding of tools and platforms

* Email templates

Beginning in mid-2022, I initiated the company's design system, affectionately referred to as **Mettle**. This helped me maintain visual consistency across platforms and provide me with structured — but not rigid — guidelines to dream up new designs.

### Front-end development

I managed all of the company's web properties and email templates. Currently, there are 5 websites deployed, which include a handful of landing pages and main marketing website.

Before I had taken over development, ProSource used a boilerplate WordPress template for the site. It was clunky and bland and changes took too long to implement.

### Tech stack

When I took over front-end development, I moved the sites over to a framework called [Astro](https://astro.build/). Astro is a JAMstack framework that prioritizes developer experience and performance. I started using this tool early in its beta days and have enjoyed watching it blossom into what it is today.

For styling, I used [Tailwind CSS](https://tailwindcss.com/) because it allowed me to iterate designs extremely fast. I used the same Tailwind config file from the design system and kept it in sync across all the web projects.

All of the ProSource sites are deployed on [Netlify](https://netlify.app/). I've used Netlify's branch feature to A/B test and preview changes before pushing to production. More recently, [Cloudflare Images](https://www.cloudflare.com/products/cloudflare-images/) was added to the tech stack. It's an extremely affordable image CDN that keeps the ProSource GitHub repositories free of heavy image files. It's not quite as feature-rich as Cloudinary, but it's been well worth its monthly price.

### Update: June 2023

Beginning in April, I began migrating all ProSource content collections to a headless CMS called [Strapi](https://strapi.io/). This allows contributors to add new blogs, guides, videos, webinars, and more to our website without having me push code to GitHub.

I also migrated the entire front-end of the main marketing website to Next.js using the new app router.

### Email template design & development

All email templates were created in [Maizzle](https://maizzle.com/). Before this, I had given MJML a shot but quickly migrated to Maizzle once I discovered it.

Maizzle uses Tailwind CSS under the hood — allowing me to draw upon the same Tailwind config file for web projects. Secondly, I found in my testing that MJML didn't spit out HTML that rendered properly in Outlook on Windows. The Windows Outlook client is [notorious for being the worst](https://www.caniemail.com/scoreboard/) when it comes to supported HTML/CSS features. In my experience, I found that Maizzle's output was much better.

### Brand & visual design

In 2021, ProSource underwent the largest rebrand since its founding in 2006. This rebrand signified an important milestone for the company. 2021 was the year we celebrated the company's 15 year anniversary and it also visually represented a refocusing of efforts to a narrower audience and portfolio of services.

I helped shape our new brand. I worked with an [independent designer](https://dribbble.com/vask) on the logo, going back and forth on ideas and sketches until we landed on a final design. I chose our company's color palette, typeface, and created brand and content guidelines.

Today, these brand assets are maintained and documented in the design system, Mettle. I also created an Adobe Creative Cloud library published with the colors and brand/logomarks. This allows others on our team to access the color palette and visuals when making assets in Adobe Express; and, it helped me stay in sync when I'm working in other Adobe tools like Photoshop, Premiere, and InDesign.

I also designed the majority of our company's collateral, including sales and marketing materials, customer guides, and our company business cards. Whenever possible, I brand our customer-facing tools to maintain visual consistency and familiarity for our customers.

### Website marketing

I was immensely involved in monitoring our analytics and website traffic. I often tinkered with the marketing copy, position of elements on web pages, and technical search engine optimization (SEO) to increase conversions.

Much of the copy on our landing pages was written by me, so I was surprised to learn that these pages averaged a **near 10% conversion rate** in 2022. For comparison, the [industry average is anywhere from 2–6%](https://unbounce.com/average-conversion-rates-landing-pages/). That percentage is probably even lower for the tech industry. Typically, the sales cycles are long and drawn out in tech, with many touches required to close deals.

### Endorsements from colleagues

> I had the pleasure of working alongside and then as John's manager while he was at ProSource. His meticulous and measured approach to all he does produces exceptional outcomes in the all the roles he served. For the last 4 years I have had John as a direct report and he contributed to every department within ProSource. He is easy to work with, communicates well and has great people skills. He is truly a unique talent and I wholeheartedly recommend John to any endeavor he chooses.
>
> **— [Matthew Mulcahy](https://www.linkedin.com/in/matthew-mulcahy-a0128355/), Director of Business Development at ProSource**

> John is your go to for anything, literally anything. This guy is a huge team player. I have met very few people with his level of attention to detail and ability to get it done without supervision or previous training. You know a person is great when their worst attribute is trying to fix everything that could be improved. This is John. He is self-motivated, resourceful, a coffee enthusiast, deeply strategic, a good friend, and a great addition to any culture. It would be a mistake to pass up the opportunity to work with a gentleman of his talent, creativity, and drive.
>
> **— [Chad Holstein](https://www.linkedin.com/in/chad-holstein-62482191/), Director of Security & Compliance at ProSource**

> John is exceptionally skilled in his craft, and has an unparalleled eye for detail. He is forward-looking, always looking for improvements and innovations. I was always thoroughly impressed with the work John has done. John is a great teammate to have, and I hope to work with him again some day.
>
> **— [David Crane](https://www.linkedin.com/in/david-crane-b45066198/), former colleague at ProSource**

My 7 years at ProSource

Software Engineer

Remove runts from your Astro Markdown files with ~15 lines of code

Runts are a small but annoying typographic pet peeve of mine — luckily, we can fix them.

Suggest better line breaks in your Astro Markdown files

Automagically insert soft hyphens into your Markdown content using Frank Liang's algorithm that's baked into TeX.

Use GitHub Packages to store font files as a private NPM package

GitHub Packages allow you to store up to 500 MB of NPM packages privately, for free.

Reduce font-related CLS in your Astro projects with Fontaine

A Vite plugin that makes `font-display: swap` actually viable.

Technical Communication Track · 3.9/4.0 Major GPA

Refreshed the ProSource website with an updated aesthetic and new tech stack. Migrated content collections to Strapi, a headless content management system, and migrated the front-end to Next.js 13 with the new app router implementation.

Next.js, Tailwind CSS, Radix UI, React, Strapi, Cloudflare Images, Netlify

Website Refresh

A website to promote Tacoma's first Porchfest — a free, walkable music festival where front porches become musical stages for one magical afternoon.

Web Design/Development

Performed numerous roles spanning purchasing/receiving, quoting, technical writing, service design, inventory management, and project management.

IT Coordinator

React, Material UI, Express, Node.js, and SQL Server

Full Stack Developer

Responsible for web design and development at one of Orlando's fastest growing Managed Services Providers.

Astro, Next.js, Tailwind CSS, Strapi, React, and TypeScript

John Eatmon

2023