Build your portfolio with AI

Ten minutes.

Open your folder.

Your folder from the pre-work, opened in Claude, with a live preview running.

Open your folder in Claude

In the Claude desktop app, open the Code tab and choose the portfolio-starter folder you unzipped. Claude can now read and edit the files in it.

Start your preview

Paste this, then open the address Claude gives you in your browser. Keep that tab open: it updates every time Claude changes a file.

Run npm install and then npm run dev in this folder. Leave it running and tell me the address to open in my browser.

Context first.

Check your folder.

A good AI session starts before you type a prompt. This folder is the AI's memory: anything written here, you never have to explain again.

File	What it does
`AGENTS.md`	Standing instructions: what the project is, where things are, the rules. Read it now; you can change any rule.
`context/about-me.md`	Facts about you. The AI is told to use only these, so it can't make things up.
`context/style.md`	How the site should look and sound.
`projects/`	One file per project, all the same shape. Claude makes new ones from `_template.md`.
`images/`	Your photos and charts, named for what they show.

Check your folder (5 minutes)

a. Open context/about-me.md and read what you and Claude wrote in the pre-work. Fix anything that's wrong.

b. Open context/style.md and change anything you don't like.

c. Make sure projects/ has at least one project file and images/ has your headshot.

Skipped the pre-work? In the Code tab, paste Read SETUP.md and walk me through it, one question at a time. and Claude will fill your folder with you.

Borrow ideas, not code.

Find a site you like.

Before the AI builds anything, decide what you want it to look like. Looking at real portfolios is the fastest way to find out.

Browse real portfolios (5 minutes)

Open the list below and click through a few. Pick one or two whose layout, colors, or feel you like.

github.com/emmabostian/developer-portfolios: hundreds of real developer portfolios, A to Z.

ashleyscruse.com/portfolio: mine, built from the same kind of folder you have open.

Write down what you like

Say what you like and where you want it on your site. The AI saves it in your style file, and uses it when it plans and builds your site in the next tab. Say what you like about the site, not "make it look exactly like this." You can run this more than once for different parts of your site.

I like [paste a link]. What I like about it: [for example, how the projects are shown as cards with an image and two lines of text]. I want to use that for [my projects / my header / the whole site]. Add the link and what I like to "A site I like the look of" in context/style.md, and describe the style in plain words in the Look section. Do not copy any of their text or code, and do not build anything yet.

Worth keeping.

How to get good results.

People who get great results from AI aren't better at typing prompts. They're better at organizing what the AI reads.

Write it down once, point to it forever. If you've typed the same explanation twice, it belongs in a file.
Same shape every time. Every project file has the same headings, so the AI (and you) can find anything.
Name things for what they are. water-quality-chart.png tells the AI what it is. IMG_2041.png tells it nothing.
Point only at what the job needs. More context isn't better; the right context is. Use @ to point at one or two files.
One job per chat. When the AI gets confused or starts going in circles, start a new session. It rereads your files and starts clean.
Plan, then build. Ask for the plan first. Fixing a plan takes one sentence; fixing a website takes ten prompts.
Make it ask, not guess. "Ask me" and "leave a TODO" are the two most useful phrases you have.
Save decisions to a file. The chat forgets. AGENTS.md doesn't.
Read before you approve. You're the editor. If you can't explain a change, ask the AI to explain it or undo it.
Save points. When something works, ask Claude to save a backup copy of your folder. If the next change breaks everything, you can go back.

In this order.

Eight prompts.

Copy each one into Claude, in order. Type @ to point at a file by name. When Claude wants to change a file, read what it's changing before you approve.

Orient

Make the AI read before it writes. If its summary is wrong, your files are unclear: fix the file, not the chat.

Read AGENTS.md and every file in context/ and projects/. In five bullets, tell me what you know about me and what is still missing. Do not write any code yet.

Interview

Let the AI fill your gaps by asking you. Your answers end up in a file, so they're saved for every future chat.

Interview me to fill in what is missing in context/about-me.md. Ask one question at a time and wait for my answer. After five questions, update the file and show me what changed.

Plan

Planning is cheap; rebuilding is not. Push back on anything you don't like before it builds.

Plan a one-page portfolio site that follows context/style.md, including the sites I like and what I said I like about them. List the sections in order, what goes in each, and how each one will look, in plain words. Wait for my OK before building anything.

Build

Watch your preview tab: the site appears as Claude writes it.

Build the site from the plan: index.html and style.css at the top of the folder, following every rule in AGENTS.md and the look in context/style.md. Turn every file in projects/ into a project on the page. Use only facts from context/ and projects/ and images from images/. Where something is missing, leave a TODO comment and list the TODOs for me at the end.

Feature a project

Point at just the file the job needs. Less context, better aim.

Make @projects/[your-project].md the featured project. Show its key results as a short row of numbers or highlights, and use the image listed in the file. Change nothing else on the page.

Fix one thing

Describe what you see and where. You can also paste a screenshot into the chat. One fix per prompt.

On a phone-sized screen, [describe the problem and where it is]. Fix only that. Tell me which lines you changed.

Remember

This is how the AI remembers between chats: decisions go in a file, not in your head.

Add the decisions we made today (colors, fonts, section order, anything else we settled) to the Decisions section of AGENTS.md, one line each with today's date.

Check

Make the AI audit its own work against your rules before the world sees it.

Review index.html against AGENTS.md. List every rule it breaks and every fact on the page that is not backed by a file in context/ or projects/. Do not fix anything yet; just list them.

Five minutes, any time.

Add a project.

Your site is built from your files, so updating it means adding a file. You never edit the website by hand; you ask Claude.

Have Claude make the project file

If you have images for the project, drag them into the images/ folder first. Then paste:

I want to add a new project. Make a new file in projects/ from projects/_template.md, named for the project. Interview me to fill it in, one question at a time, and list any images I added to images/. Show me the file before you save it.

Ask Claude to add it to the site

Add the new project file to the Projects section of the site, matching how the other projects are shown, and follow every rule in AGENTS.md. Change nothing else on the page.

Do this every time you finish something: a poster, a class project, a summer program, an internship. Your portfolio grows with you.

After the workshop.

Put your site on the web.

Your site works on your computer today. These steps put it online for anyone to see, for free.

Not part of today's session. Do this on your own when your site is ready. Paste any step into Claude if you want it to walk you through.

Get your name as a domain (recommended)

A domain like yourname.com is yours for as long as you renew it, and it looks professional on a résumé. Search for your name at a domain registrar such as Namecheap, Porkbun, or Cloudflare, or buy it directly in Vercel in step 04. Most names cost roughly $10 to $20 a year.

Not ready to buy one? Skip this step. Vercel gives you a free address like yourname.vercel.app.

Make a free GitHub account

Push your folder to GitHub

I want to put this folder on GitHub as a new repository named portfolio. I have a GitHub account but I've never used git. Walk me through it one step at a time and wait for me to say "done" before each next step. Before anything is uploaded, check that no file contains a phone number, home address, student ID, or birthday.

Deploy it on Vercel

a. Go to vercel.com and sign up with your GitHub account. The free Hobby plan covers a personal portfolio.

b. Click Add New, then Project, and import your portfolio repository.

c. Click Deploy. In about a minute, Vercel gives you a live address. Open it on your phone to check it.

Connect your domain

In your Vercel project, go to Settings, then Domains, and add your domain. Vercel shows the DNS records to copy into your registrar's settings. It can take a few minutes to a few hours to start working.

I bought [yourname.com] from [registrar] and want it to point to my Vercel project. Walk me through adding the DNS records one step at a time, and wait for me to say "done" before each next step.

Updating from now on

Add a project file, ask Claude to update the site, then ask it to push the change to GitHub. Vercel sees the push and updates your live site on its own.

Commit my changes with a short message describing what changed, and push them to GitHub.

It happens.

Quick fixes.

Find your problem, try the fix, then ask Claude if it's still not working.

Problem	Fix
No Code tab in Claude	Check you're signed in to a Pro plan or higher, and that the app is up to date.
`npm` not found	Node.js isn't installed. Go back to Pre-work step 03, then restart the Claude app.
Preview page won't load	Ask Claude: "Is npm run dev still running? Restart it and give me the address."
AI invented a fact	Tell it which fact, and point it to rule 1 in `AGENTS.md`. Then add the real fact to `context/`.
Everything broke	Ask the AI to undo its last change, or go back to your last saved copy of the folder.