Building this portfolio with Next.js, Storybook & Claude
The experiment
What happens when you combine a design system mindset with AI-powered development? This portfolio is the answer. I built it using Next.js, Storybook, and Claude Code — a workflow that let me move from concept to production faster than ever before.
The goal wasn't just to build a portfolio. It was to test whether AI could genuinely accelerate the design-to-code process while maintaining quality and consistency.
The stack
- Next.js 15 — React framework with App Router, server components, and optimized image handling
- Storybook — Component development environment for building and testing UI in isolation
- Claude Code — AI assistant that helped write, refactor, and debug code in real-time
- TypeScript — Type safety across the entire codebase
- MDX — Markdown with JSX for flexible content authoring
How Claude Code changed the workflow
Instead of switching between documentation, Stack Overflow, and my editor, I could describe what I wanted and iterate directly. The AI understood context — it knew about my design tokens, component patterns, and file structure.
What worked well
- Component scaffolding — Describing a component's behavior and getting a working implementation instantly
- CSS debugging — Explaining layout issues and getting targeted fixes
- Refactoring — Asking to extract patterns or improve code structure
- Documentation — Generating Storybook stories and JSDoc comments
The learning curve
AI isn't magic. It requires clear communication. I learned to:
- Be specific about design tokens and existing patterns
- Review generated code carefully — it's fast but not always perfect
- Use it as a pair programmer, not a replacement for understanding
Storybook as the source of truth
Every component in this portfolio lives in Storybook first. This approach has multiple benefits:
- Visual regression testing — I can see exactly how components look across states
- Documentation — Each component is self-documenting with controls and examples
- Isolation — Build and test without worrying about page context
- Collaboration — Easy to share component specs with stakeholders
The combination of Storybook and Claude Code created a tight feedback loop: design in Storybook, describe changes to Claude, see results immediately.
Key features built with this workflow
Showcase cards with iPhone mockups
The case study cards feature dynamic iPhone mockups with CSS container queries for responsive scaling. Claude helped implement the complex transform calculations and hover animations.
GIF-on-hover interactions
For the Doorstead case study, the card shows a static poster image and plays the GIF only on hover — reducing initial page load and creating a delightful interaction.
Design token system
A complete design system with CSS custom properties for colors, spacing, typography, and shadows. Consistent across light mode (dark mode ready when needed).
MDX content system
Blog posts and case studies are authored in MDX with custom components like <List>, <VideoPlayer>, and syntax-highlighted code blocks.
The outcome
This portfolio was built in a fraction of the time it would have taken with traditional methods. But speed wasn't the only benefit:
- Consistency — Design tokens enforced across every component
- Maintainability — Clean, well-documented code that's easy to extend
- Learning — Working with AI taught me new patterns and approaches
- Fun — The creative process felt more like designing than coding
What's next
This workflow isn't just for portfolios. I'm excited to apply it to larger projects where the combination of component-driven development and AI assistance could dramatically accelerate delivery without sacrificing quality.
The tools are only getting better. The question isn't whether AI will change how we build products — it's how fast we can adapt our workflows to take advantage of it.