How I Vibe-Coded This Site
No backend. No hosting fees. Just code, AI, and a domain.
I built this site through what I call "vibe coding"—using AI as a creative partner, not a replacement.
Here's what that actually means: Claude handled strategy and problem-solving. Windsurf handled code generation. I handled everything else—the vision, the iteration, the debugging, the infrastructure, and every decision about what worked and what didn't.
This isn't about AI replacing developers. It's about amplifying what's possible when you combine human creativity with AI capabilities.
The Workflow
The Tool: Windsurf
Windsurf is an AI code editor. I describe what I want in plain language, and it writes the code. Need changes? Just tell it. It's like having a developer on call 24/7.
Windsurf generating React components from natural language prompts
The AI Team: Claude + Windsurf
Vibe coding isn't one AI doing everything. I used two different tools:
Claude
Strategy & Planning
- Layout concepts
- Content strategy
- UX decisions
- Problem-solving
Windsurf
Code Implementation
- React components
- Styling & animations
- Code generation
- File structure
Claude AI
Windsurf
This Site
The Stack
Windsurf
AI code editor that writes code from natural language prompts
GitHub
Version control and hosting for the code repository
Netlify
Automatic deployment and hosting (completely free for static sites)
Namecheap
Domain registration (~$12/year)
Version Control: GitHub
Every change Windsurf makes gets committed to GitHub. This means I have full version history, can roll back changes, and everything is backed up automatically.
The site's file structure on GitHub
Deployment: Netlify
Connected to GitHub, Netlify automatically deploys every change. Push code → site updates in minutes. No servers to manage, no hosting bills.
Automatic deployments from GitHub
The Configuration Work Nobody Talks About
AI wrote the code, but I still had to configure the infrastructure. This isn't magic—there are technical steps involved:
Namecheap DNS Setup
- Point domain nameservers to Netlify's servers
- Configure SSL certificate for HTTPS
- Set up domain forwarding (www vs non-www)
Netlify Build Configuration
- Connect GitHub repository
- Configure build command and publish directory
- Set up continuous deployment triggers
- Configure environment variables
GitHub Setup
- Initialize repository and push initial code
- Set up proper .gitignore for Next.js
- Configure deployment keys for Netlify access
Netlify build settings and DNS configuration
The Workflow
- Describe what I want to Windsurf
- Review and refine the generated code
- Push changes to GitHub
- Netlify automatically deploys
- Site is live in ~2 minutes
Challenges & Reality Check
It wasn't smooth sailing. Here's what actually took time:
Responsive Layouts
Perfect on desktop, broken on mobile. Manual iteration across breakpoints.
Time: ~4 hours
Video Autoplay
Browser policies blocked videos. Debugging across Chrome, Safari, mobile.
Time: ~3 hours
Animation Performance
Janky scrolling. Optimized GSAP settings and added CSS hints.
Time: ~5 hours
Background Shader
WebGL covered clickable elements. Z-index nightmares.
Time: ~2 hours
Route Navigation
Back button broke modal videos. Manual transition handling.
Time: ~3 hours
DNS & Deployment
Configuring nameservers, SSL, build settings. Not automated.
Time: ~3 hours
By The Numbers
Under the Hood: Code Structure
The site is built with Next.js 14, React, and modern web technologies. Here's a glimpse at the actual code structure:
Tech Stack Details
- Next.js 14: React framework with App Router
- TypeScript: Type-safe component development
- GSAP: Professional-grade scroll animations
- WebGL Shaders: Custom fluid background effects
- Vimeo API: High-quality video embedding
- Tailwind CSS: Utility-first styling
Why This Approach?
Speed: Built the entire site in days, not weeks.
Cost: $12/year for the domain. Everything else is free.
Control: I still make all creative decisions. AI just handles the implementation.
Flexibility: Want to change something? Just tell Windsurf. No digging through documentation.
The Bottom Line on Cost:
This site: $12/year for the domain. That's it. Everything else—GitHub hosting, Netlify deployment, custom SSL, unlimited bandwidth—is completely free.
Wix: $192-$588/year ($16-$49/month)
Squarespace: $192-$864/year ($16-$72/month)
Netflix: $155/year ($12.99/month)
You're looking at a production-quality portfolio that costs 92% less than the cheapest website builder—and less than one month of Netflix.
Would I do this again? Absolutely. But anyone telling you AI "builds websites for you" is lying. AI accelerates—it doesn't replace. You still need to know what you want, how to ask for it, and how to fix it when it breaks.
Want to talk about how you could build something like this?
LET'S CHAT