Colophon
How this site is built
A portfolio is a small product. This is what it runs on and how it is put together — partly because I would want to know, and partly because it is a case study too.
Stack
Framer is the host: pages, CMS, and hosting. Everything that needed real logic is a code component or override written in TypeScript — the stack filter on the home page, the live GitHub card, the ⌘K command palette, and the sidebar behaviour that keeps the active project in view.
Content model
Two CMS collections. Projects holds each case study with its cover, showcases, gallery, Problem & Solution sections, an architecture diagram, a decision log, and a link to a write-up. Writing holds the posts with covers, tags, reading time, and a related project. Pages bind to those fields, so adding a project or post is a CMS entry, not a layout change.
Diagrams and figures
The architecture diagrams on project pages and the figures inside posts are generated, not drawn by hand: a Node script describes each diagram as lanes, nodes, and edges, emits SVG in the site’s type and colour tokens, and renders it to PNG with a headless browser. Changing a diagram is a data edit and a re-run.
Design system
One typeface, Cabinet Grotesk. A small set of colour tokens for surfaces, borders, and four text levels. Three breakpoints — desktop, tablet, phone — with per-breakpoint overrides only where layout genuinely changes.
Details
Per-page metadata and share images, a custom 404, a favicon, and a project cover as each case study’s social image. Interactive parts degrade honestly: the GitHub card shows last-known numbers if the API is unavailable, and the stack filter is plain content until scripts load.
How it was built
The site was built and iterated with Claude Code driving the Framer API — page structure, CMS content, code components, and diagrams — with every text and decision reviewed by me. It is, in a small way, the same workflow I use on client platforms: automate the mechanical work, keep judgement human.