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

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:

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


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


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


4. 
   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.

Resources

• 
  Live Site: sakshya.dev
  


• 
  GitHub Repo: github.com/sakshya73/sakshya.dev (Feel free to fork it!)


• 
  Connect: LinkedIn
  

Built entirely with AI assistance using Claude.