The old portfolio was a screenshot gallery. This one had to show the way I work, so I built it the way I work: design on the canvas, let an agent translate, review everything, ship.
The loop was short. I laid out the page in Paper. Claude Code read the frames through the Paper MCP and scaffolded the React components with the real spacing and copy. Vite+ formatted, linted and type-checked every change before it could be committed. Then back to the canvas for the next section.
What surprised me was where the time went. Building was fast. Deciding was slow: how much of the grid to show, whether the illustrations should be screenshots or drawings, which lines to take out. The agent made it cheap to try three versions of something, which meant I spent my time choosing instead of typing.
Two things I'd keep for next time. Start with real copy, never placeholder text, because the layout changes the moment real words go in. And read every diff, even the boring ones, because the boring ones are where an agent quietly invents a new shade of grey.
Here's how the work split:
ai in the loop
- Paper
- Paper MCP
- Claude Code
- Vite+
| step | the agent | me |
|---|---|---|
| layout | rebuilt the canvas frames as React components through the Paper MCP | set the grid, the type scale and what each cell is for |
| illustrations | drew each isometric figure from a brief, as code | wrote the briefs from the real projects, and judged every figure at card size |
| texture | wired up the paper shader and split it into its own chunk | turned the folds off, because they added lines the grid didn't need |
| transitions | built the router on the Navigation API and React's ViewTransition | chose what travels between pages, and how fast |
| checks | ran format, lint, types and tests through Vite+ on every commit | read every diff before it shipped |