Your portfolio website in one prompt (and why "make me a portfolio" gives you a template)

• An AI only knows what you tell it. Five words leave it to fill everything else with defaults: a purple gradient, "Hi, I'm John", a skill bar that says 90% and three demo projects.
• The prompt below hands it a blueprint instead: your real data (from your résumé), a stack, a design system, the pages, the details that make a site feel finished, and SEO.
• It asks Claude to show a plan first and wait for your "go", so you fix the direction before any code is written.
• You get a React + Vite + Tailwind site whose content lives in data files, which you run locally and put live on Vercel's free Hobby plan.

1

prompt, copy and paste

6

parts: data, stack, design, pages, details, SEO

₹0

to host on Vercel's Hobby plan

A short prompt isn't wrong, it's empty. The model has no idea who you are, what you've built or what you want the site to feel like, so it reaches for the most common answer it has seen. That is why so many AI-made portfolios look alike:

Copy it, fill in the parts in angle brackets (your name, role, links, and an accent colour if you have one in mind), and attach your résumé as a PDF.

You are a senior frontend engineer and product designer. Build my personal portfolio website.

MY CONTENT
- My résumé is attached. Use ONLY facts from it: no invented projects, numbers, companies or testimonials.
  Where something is missing, leave a clearly marked TODO instead of making it up.
- My name: <NAME> · role: <ROLE> · location: <CITY> · email: <EMAIL>
- Links: GitHub <URL> · LinkedIn <URL> · (optional) LeetCode / blog / X

STACK
- React + Vite + Tailwind CSS. All content in data files (src/data/profile.js, experience.js, projects.js,
  skills.js…) so I can update the site without touching components.
- Deployable on Vercel or Netlify as-is. Give me the full file tree, then every file, then the exact commands
  to run it locally and deploy it.

DESIGN (it must not look like a template)
- Refined minimal: warm neutral background, ONE accent colour (<COLOUR or "pick one that suits a developer">),
  generous whitespace, oversized display headings.
- Two fonts: a characterful display font for headings + Inter for body. Define colours, spacing and type as
  CSS variables (design tokens) and use only those.
- No purple gradients, no glassmorphism everywhere, no stock "Hi, I'm John 👋" hero, no fake progress bars
  for skills, no lorem ipsum.
- Full light / dark / system theme with no flash on load.
- Mobile-first: perfect at 375 px, scales to 1440 px+.

PAGES
- Home: hero (one sharp headline about what I build, not "passionate developer"), about, experience timeline,
  featured projects, skills grouped by area, contact.
- /projects and /projects/:slug: every project gets its own case-study page: problem, what I built, stack,
  my decisions and trade-offs, result (only numbers from my résumé), links to code and demo.
- /blog ready for posts later, a contact page with a working mailto form, and a friendly 404.

DETAILS THAT MAKE IT FEEL EXPENSIVE
- One motion system: a single ease-out curve, subtle scroll reveals, respects prefers-reduced-motion.
- ⌘K / Ctrl+K command palette to jump to any section or project, plus open résumé.
- Résumé preview modal + download button.
- Accessible: semantic HTML, visible focus rings, alt text, AA contrast.

SEO
- Every route has its own title, meta description, Open Graph / social card and JSON-LD (Person schema).
- sitemap.xml, robots.txt, canonical URLs, fast Lighthouse scores (lazy images, no layout shift).

Before writing code, show me: the sections you'll build from my résumé, the colour + font choice, and anything
missing from my résumé that I should fill in. Wait for my "go", then build it.

Keep the "Before writing code…" line at the end. It turns one long guess into a short conversation.

1. 1

   Open Claude

   On claude.ai start a new chat, or run Claude Code in an empty folder if you want the files written straight to disk.

2. 2

   Attach your résumé

   Add your résumé PDF, then paste the prompt with your details filled in.

3. 3

   Review the plan

   Claude lists the sections, the colour and fonts, and anything missing from your résumé. Correct it and fill the gaps.

4. 4

   Say "go"

   It writes the file tree, every file, and the commands to run it. Ask for changes in plain words ("make the hero shorter").

# inside the project folder
npm install
npm run dev

Open the local address it prints (usually http://localhost:5173) and check it at phone width too.

1. Push the project to a new GitHub repository.
2. Sign in to Vercel with GitHub and import the repository. It detects Vite on its own; the defaults build it.
3. You get a your-project.vercel.app address on the free Hobby plan. Add your own domain later from the project's Domains settings if you buy one.
4. Every push to the main branch redeploys the site.

npm i -g vercel
vercel          # first time: a few questions, then a preview URL
vercel --prod   # puts it on your production URL

• Pick the accent yourself. One colour you like beats a palette you don't.
• Write the hero line yourself. One sentence about what you build, not "passionate developer".
• Fill one case study properly before adding more: the problem, what you built, one decision you'd defend, the result.
• Add a real photo and your résumé PDF to the public folder.
• Start the blog with one post about something you built. It shows how you think.

• No TODOs left on the page, and every fact matches your résumé.
• It reads well at 375 px wide (most people will open it on a phone).
• Light and dark both look right; nothing flashes on load.
• Every project link and demo works.
• The link preview shows your title, description and card (paste the URL into a chat to check).
• The URL is on your résumé, LinkedIn and GitHub profile.

Do I need to know React?

No. Claude writes it. Running two commands and editing a data file is enough; you'll pick up the rest as you change things.

Does it work in ChatGPT or other tools?

The prompt is plain text, so you can paste it anywhere. It was written with Claude in mind.

What if my résumé is thin?

That's what the TODOs are for. Claude marks the gaps instead of inventing filler; one real project with a good case study beats three fake ones.

Will this put me first on Google?

No one can promise a ranking. The SEO part gives every page a proper title, description and social card, so search engines and link previews show your site correctly when someone searches for you.

Is hosting really free?

Vercel's Hobby plan is free for personal projects. A custom domain is the only thing you'd pay for, and it's optional.

1. Vercel pricing: the free Hobby plan.
2. Canva, New Year, New Job report 2025 (survey by Sago, 4,200 hiring managers and 6,000 job seekers in 10 countries).
3. Claude Help Center: publish and share artifacts.
4. This site, prasoonsoni.in, is where the prompt's blueprint comes from (React, Vite, Tailwind CSS, Framer Motion).