Douglas Hayes — Josh Pindjak

The project thumbnails accommodate various amounts of detail images, and animates based on the Y position of the user's mouse.

Douglas Hayes website homepage.

YJ Dual contains some fun stylistic alternates, like the :) turning into a happy face.

The Weight Tester section for YJ Dual. This section shows off the weight set of YJ Dual through three different lockups.

Building for flexibility and scale

We initially built the site in Webflow, but quickly ran into limitations with the interactive features we wanted. I migrated everything to Astro, which gave us the control we needed for custom logic and interactions. The final site uses about 30 Astro components, with custom styling and a handful of easter eggs throughout.

I created a centralized font configuration system to ensure typographic consistency across Doug’s website, defining scale, weights, and stylistic alternates in a single source of truth. These tokens were passed into a reusable Type Tester component, allowing typography to stay consistent, flexible, and easy to maintain across all current typefaces, and easily add new ones in the future.

We’ve also future-proofed quite a bit, so Doug can easily add new typefaces and project pages in the future, all by simply writing a few more markdown files.

For analytics, we integrated Umami to track user interactions while keeping things privacy-focused. Next up, we’ll be adding Fontdue to enable Doug to sell his typefaces directly from the site.

Project details page: Project details page templates contain reusable components, like the project description, various image displays and carousels, to be used as a modular system for displaying current and future projects.

The Type Tester component showing YJ Dual in action. Each type tester can accept a various number of properties based on the typeface, like weights, stylistic alternates, language translations, and custom color palette.

Under construction page: this was a fun little easter egg that we added to the site.

And of course, we needed an old school Under Construction page while we work on expanding the site.

Miscellanea Studio — Fractional Design Director for a design agency. Projects include seasonal longform content and website implementation

Tabba — Designed and built an extension that turns your new tab into a mini productivity tool

More work