How I Built This
This site is also a working example of how I use AI with structure and judgment.
I didn't want a portfolio that just described how I think. I wanted one that demonstrated it — by being itself a product artifact: scoped, planned, designed, and shipped in a disciplined way.
The build process, step by step
Define the product brief
Before writing a line of HTML, I wrote a full PRD — a 14-section product requirements document with user personas, feature requirements, MoSCoW priorities, open questions, and a dependency map. The AI helped structure it; I made every call about scope and priorities.
Build a design system first
I built a design system before any page code — tokens for colour, type, spacing, and shadow; component rules for cards, buttons, and navigation; page-level standards for the hero, section heading, and content grid. This made every subsequent decision faster and consistent.
Set up the workflow and safety rails
I use a two-repo model (private source + public deploy) with git branch protection, a pre-commit hook that blocks direct edits to main, and a supply-chain audit on every commit. The site runs as a static HTML/CSS/JS stack — no framework, no build step, no runtime dependencies.
Ship the foundation, then layer content
Version 1 focused on structure and accessibility: correct heading hierarchy, semantic HTML, keyboard navigation, skip links, WCAG-compliant colour contrast, and a mobile-first responsive layout. Content came in version 2 — real case studies, real writing, real copy.
Use AI to accelerate, not to replace judgment
AI drafted the initial copy, generated CSS pattern variations, and flagged gaps in my spec. Every decision about brand, priorities, tradeoffs, and what to cut was mine. The AI made me faster; it didn't make the choices.
What I wanted to demonstrate
- Product thinking applied to a personal project, not just at work
- Ability to use AI as leverage without losing structure or judgment
- Good decisions around cost, privacy, accessibility, and maintainability
- A phased, version-first approach to shipping
Principles I followed
- No framework — easy to understand, cheap to host, durable over time
- WCAG 2.1 AA contrast and semantic HTML from the start
- Design tokens and a design system before any page code
- Document decisions so the project survives team changes (even when the team is just me)
- Separation of private source and public deploy — never mix concerns
The stack
Deliberately minimal. Everything here is a considered choice, not a default.