Problem
I needed a portfolio that demonstrates AI collaboration rather than just describing it. Static mockups don't show the messy reality of working with AI, so the site itself had to be the artifact.
What I did
Built a multi-page case study site through conversation with Claude Code: Next.js App Router, custom 3D scenes, CSS animations, and sticky scroll sections. Every design decision was mine, and every line of code was collaborative.
How AI was used
Claude Code handled the implementation (components, CSS, scroll logic, page routing) while I directed the architecture, layout, and visual decisions. When Claude broke something, I diagnosed the root cause and told it how to fix it. AI never self-corrected; every recovery was something I initiated.
Where human judgment mattered
Every bug required my diagnosis. Claude couldn't see the broken scroll, but I could. It didn't know the 3D canvas was eating wheel events until I tested and found it. I also reviewed every CSS change for unintended side effects across pages. The fix was always my idea; the implementation was Claude's.
Relevant detail
Three compounding bugs broke scrolling entirely. Tailwind's body overflow created a separate scroll container, ReactLenis conflicted with scroll position reads, and the 3D canvas intercepted wheel events via JS listeners. Each one required a different insight to diagnose, and the critical distinction turned out to be CSS overflow-x: clip vs hidden.
How the collaboration worked
Who did what
Next.js App Router, 3D scene integration, globals.css with custom properties. Claude wrote the boilerplate; I chose the stack.
Sticky scroll architecture with parallax. Three compounding scroll bugs discovered and fixed. Each required human diagnosis.
Four case study detail pages with shared animation system, metrics, charts, and timelines. Content rewritten to strip proprietary details.
Meta case study about the build itself. The portfolio documents the practice. This page proves it.
Get in touch