A record of the tools, inputs, and process behind this site — and a place to give credit where it's due.
Portfolios usually try to look effortless. This one was made deliberately — with a set of tools I want to be open about, and a process I think is worth describing. Every prototype on this site was rebuilt from scratch rather than exported from Figma, which meant the tools I reached for had to understand intent, not just instruction.
The design decisions — layout, type, colour — are mine. But the implementation moved much faster because I had Claude Code alongside me in the terminal. I'd give it context from project notes, feedback I'd collected, visual references, and my own thinking. It would handle the HTML and CSS; I would direct, refine, and push back on anything that drifted from the vision.
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.
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.
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.
Why rebuild every prototype when Figma exports exist? Because working code answers questions that static screens can't. Here's how the loop worked.
Project notes, client feedback, visual references from Osmo and elsewhere. No spec doc — just the actual material that shaped the design decisions.
Uploaded the relevant notes and intent to a shared Claude project so the knowledge was persistent — accessible across sessions without re-explaining.
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.
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.