I procrastinated on My Portfolio for years. AI Built It in 2 Hours.

Source: Dev.to

Overview

The Shoemaker’s Paradox: the shoemaker makes the best shoes for the village, but his own children go barefoot.

I’ve been a software engineer for over a decade, architecting high‑performance systems for enterprise clients and leading engineering teams. Yet, for ten years I didn’t have a portfolio website. Every time I started, I got stuck in the weeds—over‑engineering the stack, getting bored with CSS, or running out of “bandwidth” after a long work week. I fell into the classic trap of perfectionism.

Today I finally broke the cycle. I treated Claude (AI) not as a code generator but as my junior developer, focusing purely on prompt engineering and architecture. The result? From a blank screen to a deployed, interactive “Dual‑World” portfolio in about 2 hours.

The Biggest Mistake Developers Make with AI

The common pitfall is asking for code snippets (e.g., “Write a React component for a navbar”). To build a full product you need to think like a senior engineer: define the systems, not the syntax.

Prompt 1 – Project Setup & Architecture

Goal: Modern, performance‑first tools with no legacy bloat.

Next.js 16+ (App Router)
TypeScript (Strict Mode)
Tailwind CSS v4
Framer Motion (for complex animations)
Biome (for linting)

Action: Create a clean, modular folder structure for a single‑page portfolio application. Ensure the architecture supports a “feature‑sliced” design pattern.

Prompt 2 – Design Concept: “The Dual‑World Interface”

Design Concept: 'The Dual-World Interface'
Layout: Split‑screen desktop view.
- Left Side: Clean, minimalist typography. Timeline of experience and projects.
- Right Side: A 'Sticky Phone Simulator' (3D device frame).

Interaction (Crucial):
- Hero Section → Phone shows my App splash screen.
- Projects Section → Phone simulates an interactive app demo of that project.
- Contact Section → Phone shows a 'Messages' UI.

Vibe: Dark mode, cyan accents, glassmorphism. Make it look premium.

Prompt 3 – Mobile Responsiveness

On mobile devices (phones/tablets), hide the 3D phone simulator entirely (it takes too much space).
Collapse the layout to a clean, single‑column vertical scroll.
Add a hamburger menu with a smooth slide‑out drawer for navigation.

Prompt 4 – Separate Content from Code

src/config/content.ts
- Profile Bio & Titles
- Social Links (GitHub, LinkedIn, StackOverflow)
- Experience Timeline Data
- Projects Data (including links to GitHub/Live Demos)
- SEO Metadata

Hard‑coded text becomes technical debt; separating concerns lets me update the site later without touching React components.

Prompt 5 – Theme, Navigation, & Animations

Theme: Add a light/dark mode toggle (floating action button).
Smooth Scroll: Ensure clicking nav links scrolls smoothly to the section.
Active State: Nav links should highlight as I scroll past their sections.
Animations: Use Framer Motion to stagger the entry of list items.

Results

• Total time: ~2 hours
• Lines of UI code written manually: 0
• Lines of config edited: ~50 (just pasting my resume)
• Cost: $0 (deployed on Vercel)

I spent my time tweaking animation timings and copy, rather than debugging z‑index issues or fighting CSS Grid alignment.

If you’re thinking, “I’ll build my portfolio when I have time to learn the perfect animation library,” stop. Pride in writing every “ can become a barrier to shipping. Your career story is worth telling, regardless of whether the code was written by you or an LLM.

Resources

• Live Demo:
• GitHub Repo: (feel free to fork)
• LinkedIn:

Built entirely with AI assistance using Claude.