How I Vibe-Coded GrowthWithVove in 2 Hours
How I Vibe-Coded GrowthWithVove in 2 Hours
This website you're reading? I built it in about 2 hours using AI-assisted development. Here's the story of how, what worked, and what I learned.
The Context
I needed a personal website to share my growth engineering work. Requirements:
- Modern, professional design
- Blog for articles
- Fast and SEO-optimized
- Easy to maintain
I could have spent days designing and coding. Instead, I used AI to accelerate everything.
The Tools
- Claude — conversational AI for planning and coding
- Cursor — AI-powered code editor
- Next.js — React framework
- Tailwind CSS — utility-first styling
- Vercel — deployment
The Process
Phase 1: Planning (15 minutes)
I described what I wanted to Claude: "I need a personal website for a growth engineering consultant. It should have a hero section, services overview, about section, blog, and contact. Modern, dark theme with green accents. Next.js with TypeScript."
Claude helped me:
- Define the page structure
- Plan the component hierarchy
- Choose color palette
- Outline content sections
Phase 2: Foundation (30 minutes)
With Cursor, I generated:
- Project setup with Next.js
- Tailwind configuration
- Basic component structure
- Layout and navigation
The AI handled boilerplate. I focused on decisions.
Phase 3: Building (60 minutes)
Section by section:
- Hero — generated, then refined copy
- Services — created grid, added icons
- About — wrote content, generated layout
- Blog — built card components, list pages
- Footer — standard layout with links
For each section, my workflow was:
- Describe what I want
- Generate initial code
- Review and adjust
- Refine prompts
- Polish details
Phase 4: Finishing (15 minutes)
- Added metadata for SEO
- Optimized images
- Tested responsive design
- Deployed to Vercel
What Worked Well
Speed
2 hours from zero to deployed site. Traditional approach would take 2+ days.
Iteration
Easy to say "make this darker" or "add more spacing" and see immediate results.
Boilerplate
All the tedious setup and standard patterns handled automatically.
Learning
Saw patterns and approaches I wouldn't have thought of.
What Required Human Input
Design Decisions
Color choices, spacing feel, visual hierarchy — AI suggested, I decided.
Content
The actual words needed my voice and expertise.
Quality Control
AI made errors. Human review caught them.
Strategy
What to build, for whom, why — that's all human.
Lessons Learned
Be Specific
"Make it look better" gets generic results. "Increase padding to 24px and use a softer shadow" gets what you want.
Iterate Fast
Generate, review, adjust, regenerate. Don't try to get it perfect first time.
Know When to Code
Sometimes typing the code yourself is faster than explaining it.
Trust but Verify
AI output is usually good. Occasionally it's wrong. Always check.
The Result
A professional website that:
- Looks custom-designed
- Performs well
- Is easy to maintain
- Took fraction of traditional time
What This Means
Vibe coding isn't about replacing developers. It's about changing what's possible in limited time. I built something that would have taken days in just hours.
This shifts the constraint from "how long will it take to build" to "what should we build and why."
Try It Yourself
If you haven't tried AI-assisted development:
- Get Cursor or use Claude
- Start with a simple project
- Describe what you want
- Iterate rapidly
- Ship something
You'll be surprised how quickly you can build real things.
