COLOPHON
Designed, built, and shipped end-to-end — no developer, AI as my drafting table.
This site is itself a small case study. I designed it, turned it into a real website, and put it online — directing an AI through every step. Here's the honest record of how it was made.
I started with a metaphor: a designer mapping unfamiliar territory — new domains, new tools — and the portfolio is the map she drew plus the notes she took. Cartography became the chrome — coordinates, contours, plotted project points, a compass. Three typefaces, each with a job: Geist Mono as the instrument, Playfair Display for place, Inter as the field hand.
Every screen was designed frame-by-frame in Pencil, an AI-augmented design tool. I built the nav and footer once as reusable components, documented the whole system in a Legend Sheet, and wrote the motion spec in a separate notes frame — before a single line of code.
Then I turned the design into a working website: Astro for speed, plain CSS for the brand tokens, the nav and footer reused across every page. I don't come from a coding background. I directed Claude to write the code, made the calls, and checked the result at every step.
The movement isn't decoration — it's wayfinding. A route-line plots your scroll down the margin; the map's points pulse like radar; the contour lines breathe. All of it calm, fast, and it falls back to perfectly still for anyone who prefers reduced motion.
Where a static image would undersell it, I embedded live simulators instead — the Lilist onboarding and receipt-scan flows run right inside the case study, as self-contained prototypes you can actually play with.
Finally I put it online: deployed on Vercel (it now re-deploys automatically on every change) and pointed to my own domain. From the first sketch to a live URL — by me.
ON HONESTYI'm a product designer, not a developer. The code here is AI-written; the judgment, taste, and direction are mine. Knowing what to build — and when to stop — is the work.
The map is never finished — but it's drawn well enough to share.