Lead
Building websites used to take weeks. With the right AI tools and approach, I rebuilt this entire portfolio site in just 2 days. Here's exactly how I did it, what worked, what didn't, and the practical lessons you can apply to your own projects.
Problem
Traditional web development is slow. Even with experience, setting up a modern Next.js site with TypeScript, Tailwind, component libraries, and content management takes significant time. The repetitive nature of:
- Setting up build tooling
- Creating component architectures
- Writing boilerplate code
- Styling responsive layouts
- Content structure planning
...means weeks of development before you have anything meaningful to show.
Approach
Instead of building everything from scratch, I leveraged AI tools strategically for the repetitive, well-defined tasks while focusing my human effort on:
- Architecture decisions - AI can't make strategic choices about your tech stack
- Design direction - AI needs clear creative guidance
- Content strategy - AI can help with structure, but your voice and expertise matter
- Custom functionality - Complex business logic still needs human oversight
The key was breaking the project into AI-friendly chunks.
Steps
1. Project Setup & Architecture (30 minutes)
npx create-next-app@latest pragmatic-web --typescript --tailwind --eslint --app
cd pragmatic-web
npm install @radix-ui/react-* lucide-react class-variance-authority
I used ChatGPT to generate the initial component architecture and folder structure. The prompt was specific:
Effective AI Prompt: "Create a Next.js 14 App Router project structure for a developer portfolio with blog, tools showcase, and experiments section. Use TypeScript, Tailwind CSS, and Radix UI. Include component organization and routing structure."
2. Component Generation (4 hours)
Rather than writing each component manually, I generated them in batches:
- UI Components: Used v0.dev to create the base design system
- Layout Components: AI-generated with specific design requirements
- Content Components: Custom components for blog cards, tool showcases
// Generated with v0.dev, then customized
// components/ui/button.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-[#008683] text-white hover:bg-[#006663]",
// ... more variants
}
}
}
)
Takeaways
What Worked:
- Component generation: AI excels at creating consistent UI components
- Boilerplate reduction: TypeScript interfaces, utility functions, config files
- Design system creation: Systematic approach to colors, spacing, typography
- Content templates: Structured formats for blog posts and documentation
What Didn't:
- Complex state management: AI struggled with intricate React patterns
- Performance optimization: Required human expertise for bundle analysis
- Accessibility details: AI missed nuanced ARIA patterns
- Brand voice: Content needed significant human refinement
Key Lessons:
- Be specific with prompts - Vague requests get vague results
- Generate in small chunks - Large codebases confuse AI context
- Always review and test - AI code needs human validation
- Focus AI on repetitive tasks - Save creative decisions for yourself
Time Breakdown:
- Setup & Architecture: 30 minutes
- Component Generation: 4 hours
- Content & Structure: 2 hours
- Styling & Design: 3 hours
- Integration & Testing: 6 hours
- Total: ~16 hours across 2 days
Pro Tip: The secret isn't replacing human judgment with AI—it's using AI to eliminate the tedious work so you can focus on the decisions that matter.
Subscribe to Pragmatic Web for more practical insights on building with AI, modern web development, and tools that actually make you more productive.