Colophon

How this website was made.

A record of the tools, inputs, and process behind this site — and a place to give credit where it's due.

This portfolio was made deliberately — every prototype rebuilt from scratch, not exported from Figma. The tools had to understand intent, not just follow instruction.

The design decisions are mine. But implementation moved faster with Claude Code in the terminal — I gave it context, it handled HTML and CSS. I directed, refined, and pushed back on anything that drifted.

Tools & resources

The AI pair for all implementation. I ran it in the terminal throughout, giving it context from my notes, feedback, and prototypes — then reviewing and directing everything it produced. It handled the HTML and CSS; I handled the decisions.

Visual inspiration throughout. I used the vault to find references — interfaces, layouts, type treatments — that set the tone for what I was aiming at before writing a single line of CSS.

Claude Projects

I kept a shared project in Claude with design context, client notes, and accumulated feedback — so every conversation started from the same informed baseline rather than building from scratch each time.

Feedback & project notes

Each prototype was rebuilt from scratch using real feedback — from client conversations, design reviews, and my own written notes — as the primary input. Not templates, not reused components: intent from the ground up.

Prototyping from scratch.

Why rebuild every prototype when Figma exports exist? Because working code answers questions that static screens can't. Here's how the loop worked.

01
Gather real inputs

Project notes, client feedback, visual references from Osmo and elsewhere. No spec doc — just the actual material that shaped the design decisions.

02
Set context in Claude Projects

Uploaded the relevant notes and intent to a shared Claude project so the knowledge was persistent — accessible across sessions without re-explaining.

03
Direct Claude Code in the terminal

Described the interface, reviewed what came back, refined until it matched the vision. The loop is fast — much faster than hand-coding — but direction still comes from me.

04
Refine against visual inspirations

Compared each prototype against reference material. Adjusted spacing, type, interaction details until the thing felt considered rather than generated.

Typeset in BDO Grotesk, by BDO Design. Built with plain HTML and CSS — no framework, no build step.