Overview
This portfolio is more than a showcase — it's a case study in itself. Every interaction, animation, and component was designed and built through conversation with Claude Code, demonstrating how AI collaboration can produce crafted, production-quality web experiences.
The Concept
The portfolio needed to serve a dual purpose: presenting design work beautifully while simultaneously demonstrating technical capability. The site itself becomes evidence of what's possible when design thinking meets AI-assisted development.
A typewriter hero creates immediate personality. Clean project cards let the work breathe. Full-narrative case studies give each project the depth it deserves.
Design Decisions
Dark Theme
A cinematic dark palette creates focus on the work while establishing a distinct aesthetic identity. The theme uses carefully calibrated grays with strategic accent colors for hierarchy — ensuring readability without sacrificing atmosphere.
Typography System
Three typefaces serve distinct roles: Instrument Serif for editorial warmth in headings, Inter for clean body text, and JetBrains Mono for metadata and the typing effect. The combination feels both polished and technical.
Motion Philosophy
Framer Motion provides scroll-triggered reveals and page transitions. The approach is "motion with purpose" — animations draw attention to content hierarchy rather than calling attention to themselves.
Technical Highlights
- Typewriter state machine with cycling phrases, blinking cursor, and reduced-motion fallback
- Framer Motion page transitions with AnimatePresence and scroll-driven reveals
- MDX content pipeline with custom React components for flexible case study layouts
- View Transitions API for smooth page navigation
- Responsive design with proper touch device handling and accessibility throughout
Outcome
A portfolio that practices what it preaches — clean design meets solid engineering, built entirely through human-AI collaboration. The project demonstrates that AI-assisted development doesn't mean compromising on craft.