Why I Built This
After years of using SquareSpace, Wix, and other template-based platforms, I'd outgrown the constraints of drag-and-drop builders. I wanted a portfolio that actually reflected my technical capabilities—not just my design work, but how I build. This site is an evolution: moving beyond off-the-shelf solutions to something custom, performant, and built through human-AI collaboration. It's both a showcase and an experiment in process transparency.
Who We Designed For
Hiring managers and technical recruiters evaluating product design talent
Technical Leads
Engineering managers assessing cross-functional collaboration skills and technical fluency
UX Leadership
Design directors looking for systems thinking and end-to-end product ownership
Recruiters
Talent acquisition screening for role fit and communication clarity
Tech Stack
Process
Started with a clear vision: a portfolio that showcases work while demonstrating modern development practices. Chose Next.js 15 with App Router for its performance benefits and developer experience. Established the type system and data structures early to ensure consistency.
Key Insights
Built the foundational components: Header with responsive navigation, ProjectCard with hover effects, and the content section system. Each component was developed iteratively with AI assistance, focusing on reusability and accessibility.
Key Insights
Created the flexible content section system supporting multiple layouts: default, highlight, process, and split-image. Added metrics animation, image carousels, and testimonial components. The system needed to handle diverse project types gracefully.
Key Insights
Implemented the chat widget with Claude API integration, user journey tracking for context-aware conversations, and the theme system with system preference detection. Added the reading progress bar and mobile-optimized navigation.
Key Insights
Refined animations, optimized images, and ensured smooth performance. Added scroll-triggered reveals, adjusted timing curves, and fine-tuned the overall feel. This phase relied heavily on human judgment for the experiential quality.
Key Insights
AI Collaboration
Tools
Approach
Used Claude Code as a pair programming partner throughout development. Rather than asking for complete solutions, I described intentions and iterated collaboratively. The AI excelled at implementation details while I focused on design decisions and user experience. For the chat feature, Claude 3.5 Sonnet powers real-time conversations with visitors.
Example Prompts
Create a ProjectCard component with Framer Motion hover effects that scales and lifts on hover
Help me design a type-safe data structure for portfolio projects that supports multiple content section types
Implement a reading progress bar that tracks scroll position with smooth spring animation
Add user journey tracking that captures page visits and scroll depth for chat context
Key Learnings
AI excels at implementation details but humans must drive creative and UX decisions
Iterative prompting produces better results than one-shot requests
Code review by AI catches edge cases and accessibility issues quickly
The best results come from treating AI as a collaborator, not a replacement
Context management is crucial—the more context AI has, the better the output
Sometimes the AI's first suggestion isn't right, and that's okay—iteration is key
Features
Cool idea? Let's collaborate.
Have a passion project or experimental concept? I love exploring new ideas and building things that push creative boundaries.
Start a Conversation