Portfolio Builder Prompt
Shared by Amelia Leong

Build your portfolio with Claude.

The prompt I used to turn my CV and an old Canva site into two live portfolio sites, one for employers and one for clients. Copy it, fill in the brackets, and paste it into Claude.

Have these ready

The prompt

Replace everything in [brackets]
I want you to build my personal portfolio website and get it live for free. Work with me step by step, show me a preview before anything goes live, and ask me before you publish or upload anything.

ABOUT ME
- Name: [your name]
- What I do: [e.g. digital marketer / designer / photographer]
- My CV: [attach PDF]
- My current portfolio, if any: [link]
- My work samples: [screenshots, and Google Drive folder links set to "Anyone with the link"]
- Contact details I'm happy to show publicly: [email, WhatsApp, Instagram, LinkedIn]
- Who will see it: [e.g. employers AND freelance clients]

1. GATHER FIRST
Read my CV, my current portfolio and my work folders before designing. Reuse my brand colours and fonts if I already have them. If I don't, design a look that fits me and my field. Don't copy the colours or style of any example portfolio I show you. Pull real numbers from my work (views, results, years) and tell me how you worked out any total. Never invent clients, numbers or testimonials. Leave out my home address and my references' contact details.

2. ONE AUDIENCE PER LINK
If I have more than one audience, build a separate version for each:
- Professional (for employers): intro, experience timeline, skills, selected work, a little about me, contact.
- Freelance (for clients): proof of work with real numbers, services (split "for businesses" and "for individuals" if it fits), how a project runs, photo and video folders, a fun section about me, contact.
Each version stands alone, with no switch or link to the other one.

3. CLEAN, BUT FUN TO SCROLL
- A hero with my photo and one line that says what I do.
- Count-up stats, things that gently zoom in or out as you scroll, flip cards for personal facts, and a swipeable row of work cards that open into details.
- Anything that looks tappable must do something: open details, jump to a section, or open a folder.
- Photo and video folders as clickable collage cards (1 to 3 images each) that open the matching Drive folder.
- A "Next up" link at the end of each section so people keep scrolling.
- Works on phones: cards sit side by side and swipe sideways instead of stacking into long columns, and text never spills out of its box.

4. WRITE LIKE ME
Short, warm, plain sentences in first person. Describe long-term client relationships as partnerships ("we continued working together"), not "they kept me". Keep personal details light and relevant, with no oversharing.

5. PREVIEW FIRST
Publish a private preview (a Claude artifact works well) so I can review it before anything goes live. Apply my feedback in small rounds.

6. GO LIVE FOR FREE
When I'm happy:
- Build each version as its own folder: index.html plus an assets folder, with images compressed as JPEG at about 900px wide.
- Zip each folder with forward-slash paths. On Windows use: tar -a -c -f site.zip index.html assets (not Compress-Archive, which breaks every image).
- Walk me through Cloudflare Pages. I sign in myself (it's free), then: Workers & Pages, Create application, Pages, Upload assets, name the project, upload the zip, Deploy. That gives me [project-name].pages.dev.
- Once it's live, open the link and check that every image and link works.
- For later edits: you update the files and rebuild the zip, and I upload it from the project's "Create deployment" button. The link stays the same.

What helped me

See mine