Building with AI: This Portfolio Site
Overview
Role: Designer & Builder
Timeline: January 2025
Tools: Cursor (with Claude), ChatGPT, Nuxt 3, Tailwind CSS, Netlify
Live Site: You're looking at it right now
This case study covers how I designed and built the site you're currently viewing. I created this portfolio from the ground up using AI-assisted development tools, despite not being a professional engineer. It’s a practical example of how designers can now bring their ideas to life using modern AI tools.
The Challenge
The Problem
I needed a portfolio that reflected my approach to product design: clear, intentional, and focused on solving real problems. My old Framer site worked, but it had limitations.
Pain Points:
- Limited control over structure and interaction patterns
- Hard to showcase long-form case studies
- Difficult to maintain and update content
- Didn’t reflect my growing interest in how things are built
- I wanted something I built myself, not just configured
The Opportunity
I decided to build a custom portfolio that:
- Reflects my design aesthetic and values
- Gives me full control over content and presentation
- Serves as a learning project for front-end development
- Demonstrates what’s possible with AI-assisted tools
- Can evolve as my work evolves
My Approach
Exploring AI-Assisted Development
I’ve been learning front-end development with tools like Cursor, and Netlify. I’m not a developer yet, but I understand design systems, component architecture, and user experience. AI tools bridge the gap between design intent and working code.
The Mindset:
Instead of thinking “I can’t code this,” I approached each challenge as “I know what I want, so how can I describe it clearly enough to get it built?”
The Process
1. Define the Design System First
Before writing any code, I created a detailed style guide:
- Color palette (white base with purple and teal accents)
- Typography (Poppins for headings, Inter for body)
- Components (glass-style cards, consistent spacing, shadows)
- Visual inspiration (Apple, Linear, Superlist)
Having that foundation made everything else easier to explain and build.
2. Choose the Right Stack
- Nuxt 3 – Modern Vue framework with file-based routing
- Tailwind CSS – Utility-first styling for clarity and speed
- @nuxt/content – Markdown content management for case studies
- Netlify – Simple deployment and fast global hosting
I wanted tools that supported scalability, maintainability, and a great developer experience, even for someone without a deep engineering background.
3. Build Iteratively with AI
Using Cursor with Claude Sonnet, I followed a conversational build process:
- Describe what I wanted in design terms
- Reference the style guide for consistency
- Review and test the generated code
- Adjust and refine until it matched my vision
Example Prompt:
Create a hero section with large typography, centered text, and two CTA buttons. One should be primary (teal background), and one should use a glass effect. Match the spacing and font sizes from the style guide.
4. Learn Through Building
I didn’t just copy code. I learned through iteration:
- Asking why certain patterns worked
- Understanding Vue components and reactivity
- Debugging layouts and refining logic
- Translating design language into Tailwind utilities
Every iteration helped me build confidence and technical intuition.
Key Features Built
1. Component-Based Architecture
I treated every reusable element as a component:
- NavBar – Sticky navigation with glass effect
- Card – Reusable container with hover interaction
- Tile – Interactive puzzle element for the contact page
- ColorPicker – Custom UI for selecting tile colors
2. Markdown Content System
Used @nuxt/content to manage all case studies:
- Write in Markdown for simplicity
- Auto-generated routes and rich formatting
- Easy to update without touching the codebase
3. Interactive Contact Game
Instead of a traditional contact form, I built a small color-tile puzzle that reveals my email when solved. It’s playful, memorable, and shows how interaction can make a small moment more interesting.
Technical highlights:
- Flood-fill algorithm for tile matching
- Reactive game state
- LocalStorage to track best scores
- Guaranteed solvable configurations
4. Responsive Design System
Everything scales smoothly across devices:
- Mobile-first layouts
- Fluid typography
- Touch-friendly controls
- Optimized grid for desktop and mobile
What I Learned
AI Tools Don’t Replace Thinking
The most important lesson: you still need to know what you want.
AI tools are powerful, but they rely on:
- Clear direction and context
- Strong design judgment
- Understanding of the underlying problem
- The ability to evaluate and refine results
Design Skills Translate to Code
My background in design gave me a head start:
- Visual hierarchy became Tailwind class logic
- Component thinking translated into Vue patterns
- User flows became routing structures
- Accessibility thinking improved interface decisions
The Gap Is Closing
The line between designer and builder is getting thinner. You don’t have to be a senior engineer to build real, production-ready products anymore. What you do need is:
- Solid design fundamentals
- Clear communication
- Curiosity and patience
- A willingness to learn by doing
Version Control Changed How I Work
Using Git helped me:
- Experiment safely with branches
- Roll back when things broke
- Keep a clean record of progress
- Work like a proper development team
Technical Choices
Why Nuxt Over Static HTML
Pros:
- Reusable components
- File-based routing
- Built-in optimizations
- Easier content management
Cons:
- Slight learning curve
- Requires a build step
Verdict: Worth it for scalability and maintainability.
Why Cursor
Benefits:
- AI-native coding environment
- Natural language interactions
- Context-aware suggestions
- Fast iteration cycles
Perfect for learning through doing.
Why Netlify
Reasons:
- Connect Git repo and deploy instantly
- Auto-builds on each push
- Branch previews for testing
- Built-in CDN and strong performance
- Free tier covers most needs
Results & Reflection
What This Project Shows
For Employers:
- I can take an idea from concept to production
- I understand both design and technical execution
- I learn fast and work independently
- I care about usability, clarity, and real results
For Myself:
- I proved I can build with AI tools
- I learned to think in components and systems
- I understand enough front-end to be self-sufficient
- I found a new way to merge design and development
Metrics That Matter
- Built entirely from scratch in about two weeks of part-time work
- Zero production errors
- Sub-one-second load times
- Fully responsive and accessible
- Clean codebase I can maintain myself
Key Takeaways
For Designers
✅ You can build real, working products with AI tools
✅ Start from your strengths in design thinking
✅ Learn by building things you actually need
✅ Don’t hesitate to ask questions: AI is a patient teacher
What Surprised Me
Good:
- How fast I could iterate
- How similar design systems and code structures are
- How rewarding the process feels
Challenges:
- Debugging takes patience
- Not every AI suggestion is correct
- You still need judgment and clarity
Future Plans
Now that the base is built, I want to:
- Add dark mode and theme switching
- Implement lightweight analytics
- Create more interactive case studies
- Add subtle motion and transitions
- Experiment with small micro-tools and utilities
The best part is that I can evolve it myself as I learn.
The Bigger Picture
This portfolio is both a finished product and a case study in learning. It reflects:
- Product thinking
- UX design clarity
- Technical execution
- A genuine curiosity to keep learning
Building with AI isn’t about replacing developers. It’s about expanding what’s possible for designers who understand systems, patterns, and users. I can now prototype in real, production code, not just static mockups.
That’s the future of product design: being hands-on, curious, and building with the best tools available.
If you’re interested in how I built this site or want to talk about AI-assisted design and development, reach out.
