DEV Community

Cover image for Claude Code Built My Portfolio in 5 Minutes — Next.js + Tailwind CSS from One Prompt
Ayyaz Zafar
Ayyaz Zafar

Posted on Originally published at ayyaztech.com

Claude Code Built My Portfolio in 5 Minutes — Next.js + Tailwind CSS from One Prompt

What if you could build an entire developer portfolio — Next.js, Tailwind CSS, fully responsive, dark mode, animations — from a single prompt? In under 5 minutes?

I started with an empty folder. No boilerplate, no templates. Just Claude Code and one detailed prompt.

What Claude Code Built

One prompt created:

  • Navbar — responsive with animated mobile menu
  • Hero — clean, bold landing section
  • About — hover effects, professional styling
  • Projects — card layout with hover animations
  • Skills — each skill changes color with animation
  • Contact — form with clean layout, fully responsive

All with TypeScript, Tailwind CSS, and the Next.js App Router.

The Real Power: Iterating

Building it is impressive. But changing it is where AI shines.

I asked: "Add a floating navigation bar that changes background on scroll. Also add a dark/light mode toggle button."

One sentence. Claude Code reviewed existing files, edited components, and delivered:

  • Floating navbar — semi-transparent, changes color on scroll
  • Dark/light mode toggle — all colors update properly in both modes

The Numbers

  • Manual development: 2-4 hours
  • Claude Code: Under 5 minutes

No templates. No boilerplate. Just one prompt and iterative refinement.

The key is prompt quality — a detailed prompt describing sections, features, and design expectations gives Claude Code enough context to make good architectural decisions.


Originally published at ayyaztech.com

Top comments (2)

Collapse
 
vibestackdev profile image
Lavie •

Claude Code is impressive for speed, but I have found that with larger Next.js 15 projects, the one prompt approach sometimes misses the subtle breaking changes in async APIs. I have been using custom configuration rules to keep the agent aligned with the latest docs for things like params and searchParams. It is amazing how much a few well-placed constraints can improve the output quality beyond just the initial scaffolding.

Collapse
 
ayyazzafar profile image
Ayyaz Zafar •

Great point! You're absolutely right, for larger projects with Next.js 15's async API changes, the one-prompt approach is just the starting point. That's where CLAUDE.md comes in, you can define project rules, framework versions, and constraints that Claude Code reads on every prompt. I actually covered this in my beginner tutorial as one of the top 3 tips. For production projects, I always pair the initial scaffold with follow-up prompts to refine and align with the latest docs. The combination of a strong initial prompt + CLAUDE.md rules + iterative refinement is where the real power is. Thanks for sharing your approach!