This Portfolio
A portfolio you explore like a device. It opens on an About note, every app has a real link you can share, and Spotlight (⌘K) finds anything.
- Kind
- Interactive portfolio
- Role
- Solo project, pair-programmed with Claude Code
- Status
- In progress
- Built with
One set of apps, three devices
A small script picks the iPhone, iPad or Mac layout before the first paint, from screen width and pointer type, so the server-rendered page never guesses wrong. Each app is built once and adapts to its window with container queries: shrink the Notes window on a Mac and it becomes the iPhone layout.
Under the hood
Windows live in a small Zustand store that handles focus order, minimising, zooming, dragging and resizing. The address bar follows the window in front, so back and forward work. Live London weather comes from Open-Meteo, falls back to MET Norway when it's unavailable, and is cached on the server. On iPhone, a Dynamic Island keeps music and the assistant's voice going while you explore other apps.
Details worth finding
Minimise a window and it pours into the dock like the Mac's genie effect, with the funnel worked out from where the window and its icon are. In Chrome, the dock and widgets bend what's behind them like real Liquid Glass. The London Sky wallpaper calculates where the sun is over London right now and lights up the skyline after dark. Music opens into a full-screen player that takes its colours from the album art, a glow runs around the screen while the assistant thinks, and a Mac left alone writes hello in liquid glass.
More to play with
Windows tile to halves and quarters like macOS Sequoia, and hot corners open Mission Control. When it rains in London, drops run down the screen. A lab critter lives on the dock, an iPhone turned sideways becomes StandBy, and visionOS mode floats every window in 3D. Hold Option for a glass magnifier, speak commands to the OS, collect achievements for exploring, browse the projects as an App Store, or AirDrop the CV as a PDF that the site writes itself.
Tested on every push
GitHub Actions type-checks and builds the site, runs unit tests on the routing, rate limits, chat API and data parsers, then drives real browsers through it as a Mac (Chrome), an iPhone (Safari's WebKit engine) and an Android phone. Accessibility checks run on every app in light and dark mode, and a privacy test makes sure no email address or phone number appears in the site's content.
Built with Claude
I pair-programmed this site with Claude Code. I made the product and design decisions, from the Mac reference screenshots to which apps to build, and reviewed each step, while Claude wrote much of the implementation. Every change was checked with automated browser screenshots at iPhone, iPad and Mac sizes.