Projects

Google Ads

There are many sites within Google that share brand identity, and for this they have a rather excellent internal JavaScript framework and static site builder that does the majority of the heavy lifting. However, issues arose when a design required changes to the provided components as there was no way to share these easily.

My team was tasked with creating a UI Library that could be easily shared around, but without the use ofanyexternal frameworks.

I took some inspiration from Lit.js and created a framework, installed via NPM, that sat on top of the internal tools. When provided with a JSON file of a set structure, it would output pages sections from statically rendered Web Components either as individual entities, or fully compiled pages. I also setup a Storybook.js so designers could preview the page sections for use in other sites.

During the site build I helped the Tech Lead oversee the project, assisting the globally located team with framework bug fixes as they arose, code reviews, and general mentoring, as well as building out a few of the page components (main navigation, homepage hero, carousels, etc).

Kilpatrick Law

As part of Kilpatrick Townsend’s global rebrand, I was tasked with updating existing the pages to align with the new brand stratergy, as well as creating a new Home and About Us pages that would integrate with their existing tech stack.

The site was originally built a long time ago by an external development team using SiteCore, and had in excess of 6000 pages and a lot of code to handle them. I felt it was important that my additions to the codebase be as light as possible while not increasing complexity.

For the new pages I devised a method utilizing Web Components to handle all the page interactivity. This meant I was able to keep the code compartmentalized where necessary and avoided bloating the global JS. It also enabled me to hand over small components to the internal dev team to implement on their production server with nothing more than a copy and paste. I posted a brief introduction to statically rendered web components on medium based on this work.You can read the article here.

For the refresh of the existing pages, while working alongside Kilpatrick’s internal developers, it was a case of digging through a monolithic CSS file and updating various base styles to bring them up to date with the new branding, tweaking existing jQuery code to iron out a few longstanding bugs, all while removing as much dead code as possible.

Overall the project went much smoother than we anticipated and was completed ahead of schedule.

SmashCreate

Built with Next.JS on Vercel and Tailwind.css, this was a solo endevour helping out a startup to convert a Figma design to a fully fleshed out website as fast as possible. For the sake of time, we began without a CMS, and instead just created a single JSON file that contained the content. Then, with a quick introduction to Git, I was able to set the founder up so they can can make continual copy edits while I focused on the site build. Where possible animations are handled in CSS for GPU accelleration, Cal.com was integrated for creating direct meetings with the company, and Embla utilized for the 2 main carousels.

In all, from conception to production, the site took around 30-40 hours.

SiaXperience

The corporate site for the creative arm of the consulting firmSia Partners. The brief was to take the website of the recently aquired, and well established, ad agencyAddisonand use it to showcase the additional input from SiaX.

Addison’s site is a standard WordPress site, and we wanted to keep all the good things about WordPress as a CMS but modernize it. Therefore, using Faust.js, I was able seperate the front end and build the site in Next.JS using GraphQL to query WordPress as a headless CMS. This helps us to improve security by hiding most references to WordPress, and also increase page speed by utilizing Next/Vercel’s ISR functionality.

Google for Small Business

The original version of this site has long since passed, but a gif of the site flow still exists in the blog post linked above.

We were tasked with creating a site that would launch on International Small Business Day. It would contain an app-like experience where, during a series of questions, users could add details about their business and be provided a series of product recommendations that could help them grow.

The main obstacle was that every question and recommendation needed to be statically rendered ahead of time, which amounted to ~40 individual product recommendations. To prevent bloating the DOM, I devised a way to compile all questions and outcomes as an AngularJS template file which was then only requested if a user decided to take that route, which was loaded into the Angular’s template cache.

The site was initially launched in the US and Brazil, with other locales added over time. It was featured in several online publications, such asAdWeek,TechCrunch, andsmallbiztrends.comand was generally well received.

Elevance Health

The brief was straightforward, however the timeline was tight and I was the only dev on the project. It was also important to bring the existing code up to date, remove some out of date dependencies, and make it more responsive overall.

Leveraging Nuxt.js, I was able to rebuild the whole site from scratch in just two weeks. This included a Report Builder which allows a user to select individual report sections and download them as a single PDF. The previous version required jQuery and would send a query to a backend php script to pull and compile the PDF on a separate server. I revamped this to build the PDF’s in the front end, allowing the individual PDF sections to be housed in the main codebase to improve maintainability as well as remove the jQuery dependency. It also compiled to less code in the front end and surprisingly low latency.