Case study
This Portfolio.
The very site you're reading — designed, written, and vibe-coded end-to-end. Every detail is open to inspect.
- Year
- 2026
- Type
- Website
- Role
- Solo, end-to-end
- Timeline
- Started 2026, still iterating
- Tools
- Next.js · Tailwind · Framer Motion · Figma · Cursor + Claude Code
The problem
Designer portfolios usually compromise on design or build quality. I wanted both.
The outcome
Live and self-iterating — the case study and the artefact are the same thing.
Highlights
This Portfolio · 01
Home — selected work and personality at a glance
This Portfolio · 02
About — the longer-form context
This Portfolio · 03
Work index — all case studies, filterable
This Portfolio · 04
AI assistant — context-aware project chat
The problem.
Designer portfolios sit on a tradeoff: tool-perfect mockups that feel sterile, or developer-built sites that compromise on craft. I wanted to test if a vibe-coding workflow could collapse the gap — designing and building at the same speed.
The approach.
Step 01
Identity first.
Build the system before any page existed.
Display font, accent color, blob shapes, dot motif — locked in before a single component shipped.
Step 02
Vibe-coded pipeline.
Designed in Figma, built in Cursor with Claude Code as the pair.
Next.js + Tailwind + Framer Motion. The same idea moved from sketch to live in minutes, not days.
Step 03
Real-time feedback.
No more handoff gap.
Changes happened during design itself. The loop ran tight enough to test five variations of the same component without losing a day.
“Design and build collapsed into one motion.”
The solution.
This Portfolio · 01
This Portfolio · 02
This Portfolio · 03
This Portfolio · 04
The outcome.
8
Case studies in scope
The site you're standing on. Built from scratch with a mid-design feedback loop I'd never had before. The biggest result: the gap between idea and working prototype is essentially gone.
Live
Current state
What I’d do differently
I'd love to A/B test individual choices — dot motif, blob shapes, typography — against more conventional alternatives, to see which decisions actually carry weight.
Next case study