About this site
How this site is made.
Portfolio No. 6 · Hand-built
Why it exists
This is my sixth portfolio and the first one I own end to end. The previous five were rented from site builders, and each hit the same ceiling: the moment I wanted the experience to do something its maker didn’t anticipate. The full argument is an essay, I stopped renting my portfolio. This page is the factual companion: what the site is made of and how it gets made.
The stack
Next.js and React, styled with Tailwind CSS, animated with GSAP. Every page is generated ahead of time as plain files (no servers, no database, no CMS) and served from Vercel’s edge network, which is most of why it feels fast. The typeface is Figtree, one family carrying the whole site, self-hosted so no third party sits between you and the text.
The design system
One warm paper ground, ink in four strengths, teal as the working accent, and coral reserved for expressive moments: pen strokes, pull-quotes, the underline in the hero. Every color, radius, and type size lives as a named token, so the whole site can shift together. The diagrams and emblems are hand-drawn SVG: single-weight ink lines on paper, drawn coordinate by coordinate. The real client work is confidential, and abstract drawings of the thinking say more than screenshots anyway.
Motion
Animation here is choreography on top of a finished page, never a requirement for one. Every page ships complete; the motion layer reads it and adds the reveals, pen strokes, and parallax after the fact. If you browse with reduced motion enabled, or with JavaScript off, you get the same site, standing still.
How it gets made
Designed, written, and directed by me, built in close collaboration with AI tools, often from my phone. “By hand” means nothing ships by default. Every change is reviewed, then has to pass the same gate: code checks, a full build of every page, and pixel-by-pixel screenshot comparisons of the whole site against versions I’ve approved. The tools change every year; the taste, and the responsibility for it, don’t transfer.
Ownership
The code, the essays, the case studies, and every drawing live as plain text in a Git repository. No platform, no lease, no export problem. When I want the site to do something new, the idea costs a commit. And if something here sparks a question, I’m at hello@ryankm.com.