June 25, 2026

I rebuilt this site as a tiny operating system. The home screen is a desktop: a menu bar across the top, a draggable window floating over a synthwave horizon, and shortcut icons you can click into. It is a bit of theater — but the theater is the point. A portfolio should show craft, not just claim it.

Why a desktop metaphor

The old site was a stack of agency case studies from a different decade. Rather than refresh the copy, I wanted the format itself to say something: that I still build, and that I sweat the details. A 90s Mac desktop is dense with small decisions — bevels, pinstripes, a blinking clock — and getting them to feel right is the whole exercise.

The stack

Astro does the heavy lifting. Almost everything ships as static HTML with zero client JavaScript; the one interactive island is the window manager, a small Preact component backed by a nanostores atom for drag, focus, and z-index. Styling is Tailwind v4 tokens plus scoped component styles, and the whole thing deploys to Cloudflare Pages.

• Astro
• Preact
• nanostores
• Tailwind
• Cloudflare Pages

Accessibility was the constraint, not the afterthought

A retro skin is a great way to accidentally fail contrast checks. So every page runs through axe in CI, in both the day palette and the Night-Shift dark theme, and the muted-neon colors were tuned hex by hex until they passed AA. Motion respects prefers-reduced-motion, and on small screens the desktop collapses into a plain stacked document — the metaphor never gets in the way of reading.

What I’d do differently

I’d reach for the window-manager island sooner. I spent too long faking window behavior with CSS before admitting that drag, focus, and stacking are genuinely stateful and wanted a real store. Once that existed, the rest of the chrome fell into place.