Colophon
Tech Stack
Built with Astro for static-first delivery with vanilla TypeScript islands for interactive components. The hero runs on Three.js. Animations powered by GSAP (ScrollTrigger, SplitText). Smooth scrolling via Lenis. Deployed on Cloudflare Workers.
Typography
Perfectly Nineties handles display and headline type, paired with DM Sans for body text, titles, labels, and UI elements. The serif carries the editorial voice; the sans keeps long text readable. The 5×3 typescale grid (display, headline, title, body, label × lg/md/sm) follows M3 conventions.
Design Language
Every dot in the hero is drawn three times, in red, green and blue, each a beat behind the last, so each one reads as a pixel's three subpixels. The same three colors run through the scroll reveals, hover effects and carousel shadows. My first sketch was cyan, magenta and yellow ink. It ended up as light, which suits a site that opens with "Every pixel, on purpose."
Credits
The devices on the work cards are 3D models from Sketchfab. The screens playing on them come from the project work in each case study, which notes where a screen is an exploration or a later iteration.
iPhone 17 Pro by Ranguel, licensed under CC BY 4.0.
MacBook Air M2 by rtql8d, licensed under CC BY 4.0.
Apple Macbook Air 15 (Space Gray) 2023 by akshatmittal, licensed under CC BY 4.0.
iPad Mini 6 2021 by DatSketch, licensed under CC BY 4.0.
Samsung Galaxy S22 Ultra and Galaxy Tab S8 Ultra by DatSketch, licensed under CC BY-NC 4.0.
SAMSUNG Galaxy Z Fold8 by zhe_kan, licensed under CC BY-NC-SA 4.0. The adapted model this site serves is shared under the same license.
Changes: each model is compressed, the MacBook Air M2 gets a screen-sized display set into its glass, and the iPad and Fold are repainted in neutral gray. The phones and the Galaxy tablet are repainted in finishes they were sold in, with satin surfaces in place of the files’ textured ones. The Fold file keeps only the unfolded phone, and the Galaxy phone and tablet leave out the S Pens modeled beside them.
The iPhone home screens on the Whataburger card come from the iOS 27 kit in Apple Design Resources, with the Whataburger icon in place of a sample app.
The iBook, Rio and Dreamcast controller around the photo on the About page are modeled in code with three.js. Where WebGL isn't available, flat icons from Fluent Emoji by Microsoft (MIT License) stand in.
Accessibility
With prefers-reduced-motion set, animations stop or reduce to a static state. The MyFrontier motion examples also have a play/pause control.
The mobile menu works from the keyboard, holds focus while open and closes with Escape. Content images carry alt text.
These are behaviors I build and check for; the site hasn't had a formal accessibility audit.