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

#ai #webdev #productivity #nextjs

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

I have been a software engineer for over years. I’ve architected high-performance systems for enterprise clients and led teams of engineers.

Yet, for the last decade, I didn't have a portfolio website.

Every time I started, I got stuck in the weeds. I would over-engineer the stack, get bored with the CSS, or run out of "bandwidth" after a long week of coding for work. I fell into the classic trap of perfectionism.

Today, I finally broke the cycle. I decided to treat Claude (AI) not as a code generator, but as my Junior Developer.

I focused purely on Prompt Engineering and Architecture. The result? I went from a blank screen to a deployed, interactive "Dual-World" portfolio in about 2 hours.

Here is exactly how I did it, so you can finally ship yours too.

The Result: A "Dual-World" Interface

Before we get into the prompts, here is what we built.

I didn't want a generic template. I wanted to highlight my specific skill set: bridging the gap between Web and Mobile.

Live Demo: sakshya.dev

The Shift: From Coder to Architect

The biggest mistake developers make with AI is asking for code snippets ("Write a React component for a navbar").

To build a full product, you need to act like a Senior DEV. You need to define the Systems, not the syntax.

Here are the exact prompts I used to build the site, step-by-step.

Prompt 1: The Stack & Foundation

I wanted modern, performance-first tools. No legacy bloat.

Prompt:
"Role: Senior Frontend Architect.
Task: Initialize a new portfolio project.
Stack Constraints:

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: The "Dual-World" Concept (The Most Important One)

This is where most people fail. They describe features ("add a div"). I described the **User Experience.

Prompt:
"I am a React Native Tech Lead. My work bridges web and mobile development. I want the design to reflect this.
Design Concept: 'The Dual-World Interface'

Layout: Split screen desktop view.

Left Side: Clean, minimalist typography. A timeline of my experience and projects.

Right Side: A 'Sticky Phone Simulator' (3D Device Frame).

The Interaction (Crucial):
As the user scrolls the content on the Left, the screen inside the Phone on the Right must transition to match the context.

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: The Mobile Reality Check

A common AI pitfall is forgetting responsiveness. I handled this explicitly.

Prompt:
"Make it mobile responsive:

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: The Content Architecture

As a Senior Engineer, I know hardcoded text is technical debt. I forced the AI to separate concerns so I could update the site later without touching React components.

Prompt:
"Refactor all hardcoded text. Create a single configuration file at src/config/content.ts.
Structure it so I can easily update:

Profile Bio & Titles

Social Links (GitHub, LinkedIn, StackOverflow)

Experience Timeline Data

Projects Data (including links to GitHub/Live Demos)

SEO Metadata"

Prompt 5: The Polish

The difference between a "prototype" and a "product" is the details.

Prompt:
"Add the final polish:

Theme: Add a light/dark mode toggle (floating action button).

Smooth Scroll: Ensure clicking nav links scrolls smoothly to the section.

Active State: The nav links should highlight as I scroll past their sections.

Animations: Use Framer Motion to stagger the entry of the list items."

The Outcome

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 the animation timings and the copy, rather than debugging z-index issues or fighting with CSS Grid alignment.

Final Thoughts: Don't Let Code Stop You

If you are reading this and thinking, "I'll build my portfolio when I have time to learn the perfect animation library," stop.

As developers, we often wear our ability to code from scratch as a badge of honor. But sometimes, that pride is just a barrier to shipping. Your career story is worth telling, and it doesn't matter if the <div> was written by you or an LLM.

Your work deserves to be seen. Don't wait another decade to tell your story.