Design Process
This site is built using a design-first workflow with AI assistance. Explore the phases, mood boards, and the recursive journey of building a website about someone who builds websites.
A Meta-Project
This website is inherently recursive: it's a personal site for a web developer, built to showcase the very skills it represents. Rather than just presenting a finished product, I'm documenting the entire design and development process—making the work itself part of the portfolio.
Transparency is a core value here. Every design decision, iteration, and pivot is preserved in the mood boards below. This approach transforms a standard portfolio into a living demonstration of design-first thinking, AI-assisted development, and iterative refinement.
By building in public and treating the process as content, this project becomes more than a website—it's proof of concept for modern web development practices, showing how thoughtful design and AI collaboration can work together to create something meaningful.
The Design-First Workflow
Brand Foundation
Define mission, persona, voice & tone, and core values. Establish the identity before any visual work begins.
Visual System
Create color palettes, typography scales, spacing systems, and component patterns. Build the design language.
Interactive Mood Boards
Deploy working previews to Vercel for real-world testing. See designs in context, not just in Figma.
Review & Refine
Gather feedback, test on devices, refine the approach. Repeat until the design feels right.
Build & Deploy
Implement the approved design with production-quality code. The design system guides every component.
Why Design-First?
Starting with design prevents scope creep, ensures visual consistency, and creates a clear roadmap for implementation. By validating design decisions early through mood boards, we avoid costly refactors and maintain quality throughout the development process.
Explore the Design Evolution
Check out the interactive mood boards that showcase different phases of the design process. Each represents real explorations and iterations.
Mobile Hero Component
Preview the homepage hero component designed for mobile screens. Three variants following brand voice guidelines: direct, problem-solver, and understated expert.
Built with AI Collaboration
This entire project is built using Claude Code, demonstrating how AI can assist in the full development lifecycle—from design exploration to production deployment. The AI helps maintain consistency, suggests improvements, and accelerates implementation while I guide the creative direction and make final decisions.
The workflow balances AI assistance with human creativity: Claude handles repetitive tasks, enforces code quality, and explores design variations, while I focus on strategy, user experience, and the narrative. This collaboration model represents a practical approach to modern web development, where AI augments rather than replaces human expertise.
This project is open source. Check out the full codebase on GitHub to see the implementation details, commit history, and AI-assisted development workflow in action.
Built With
This project uses modern web technologies and tools to deliver a fast, scalable, and maintainable personal site.
Next.js 15
Modern React framework with App Router and Server Components
Turborepo
High-performance build system for monorepos
shadcn/ui Ready
Configured for beautiful UI components