How this site was built
This portfolio is its own case study. All but two of its commits are co-authored with Claude Code, which makes it the most direct evidence I have of the work I want to do: deciding what to build, checking what comes back, and knowing when the agent is wrong.
- Year
- 2026
- Status
- Live
- Stack
Claude
Next.js
React
Vercel
GitHub- What I built
- I decide what gets built and what gets thrown away, test on real devices, and refuse anything that cannot be verified. Claude Code writes the code and does the investigating. All but two commits are co-authored.
The home page, as it shipped.
Background
The problem
A portfolio for someone who builds with AI has a credibility problem. Any product on it could have been prompted into existence in an afternoon, and a reader cannot tell directing an agent well from accepting whatever it produces.
The idea
Show the work behind the work. The site is built the same way as the products on it, so its own history is the evidence: what was asked for, what came back wrong, how that was noticed, and what changed.
How it works
- 01
Nothing ships on the agent's word. A change counts as done when it has been measured in a browser: element widths, contrast ratios, request counts, the status code of every image.
- 02
I test on real devices and the agent tests in headless ones. The bugs that mattered were found by the first and explained by the second.
- 03
Findings from one agent go to a second whose only job is to refute them. Only what survives is acted on.
- 04
Copy must trace to something observable. When agents compared this site with the live products they found 67 contradictions, and when a second pass audited the agents' own rewrites it found between 7 and 16 unsupported claims in each. The rewrites were thrown away and only the verifiable corrections were kept.
- 05
Experiments are reversible by default. A visual change goes on a branch with its own preview deploy, and a removed project is hidden rather than deleted.
- 06
Commit messages record the diagnosis and not just the change, so the history reads as a log of what went wrong and why.
- Decision 1
Measure in the browser, not in the diff. Code that read correctly still hid a whole section on phones.
- Decision 2
Throw away AI-written copy that cannot be backed, even when it reads better than what it replaces.
- Decision 3
Remove rather than repair when a feature restates the problem, as the eleven entry table of contents did.
How I built it
- 01
Projects never appeared on my phone. The scroll reveal needed 12 percent of an element in view, and on a phone the project grid is one column 6,848px tall, so at most 11.9 percent could ever be visible. It worked on every desktop. The threshold is now zero.
- 02
A check before sending the link out found six of thirteen projects named something their live product does not call itself, and renders captioned as photographs. All were corrected against the products.
- 03
Every project image vanished from the live site at once. The image optimiser had run out of quota and answered 402 while the files themselves served fine. Optimisation was turned off and the sources resized so they no longer need it.
- 04
The contact form could lose a message. It hands off to the visitor's mail app, and where none is set up the only recovery copied my address and stranded what they had typed. It now copies the whole draft.
- 05
The table of contents on case studies had never once stuck. A parent with overflow hidden had silently disabled sticky positioning, measured at minus 1,320px from the top of the view. It was removed rather than repaired, along with seven of the eleven sections it listed.
- 06
The site listed itself as its eighth shipped product. I asked whether that was not a bit strange, three independent reviewers agreed it read as padding, and it left the product grid for the method section, where it backs a claim instead of inflating a count. I caught that one, not the agent.
- 07
The agent was wrong too. It sent me to the wrong DNS provider, trusted its own stale cache over the authoritative servers, and briefed a redesign on a page height it had mismeasured by a factor of three. Each was caught by checking against a second source.
What came of it
What I learned
- An agent's confidence tells you nothing. Its wrong diagnoses read exactly like its right ones, so the check has to come from outside it.
- The cheapest verification is a second source: another device, the authoritative server, the live product.
- What I reject shapes the result more than what I ask for.
Next steps
- Real photographs of the printed Yrkesproffset in place of renders.
- Short screen recordings instead of still images for the 3D products.
Business potential
The site has one job: to get me hired to do this kind of work, building real products by directing agents and knowing when they are wrong.
Happy to walk through the thinking, the trade-offs and where it's headed next.
Get in touch