Build a Portfolio Website With AI That Doesn't Look Like a Template

For job hunts, freelancing, or grad school: a personal site with real personality, a projects grid, and the details recruiters actually check — built in an evening.

DifficultyBeginner

TimeEvening

You'll needClaude (free tier works) · Hosting + a domain (your name if you can get it)

You'll buildA multi-section personal site — hero, about, projects with screenshots, skills, contact — that loads fast, works on phones, and reads like you instead of like a theme.

Everyone googles you — recruiters, clients, admissions committees, dates. A personal site is the one search result you fully control, and 'made it myself' is now a one-evening claim instead of a $2,000 invoice. The trap is generic output: AI's default portfolio looks like everyone else's AI default portfolio. This tutorial is about avoiding that.

Step 1 — Write the raw material first

Before any code: write 5 bullet facts about yourself you'd say out loud, list 3–6 projects/works/wins with one concrete result each ('grew the newsletter to 800 readers', not 'passionate about content'), and pick three adjectives for how the site should feel (e.g., warm/sharp/quiet vs. bold/playful/loud). AI amplifies input — give it a personality to amplify.

Step 2 — The build prompt, with taste constraints

Build my personal portfolio site as a single HTML file. Sections: hero with my name, role, and one-line positioning; about (raw material below — rewrite tight, first person, no buzzwords like 'passionate' or 'detail-oriented'); projects grid with image placeholders, 2-sentence descriptions and links; skills as a simple grouped list, NO percentage bars; contact with email and [LinkedIn/GitHub]. Design direction: [warm, sharp, quiet] — choose ONE distinctive font pairing from Google Fonts (not Inter/Roboto), one accent color [#...], generous whitespace, subtle scroll reveals, fast. No stock-photo aesthetic, no particle backgrounds, no typing animations. Mobile-first. My raw material: [paste]. Complete file.

Worth knowingThe 'no' list is doing the design work: skill bars, typing animations, and particle backgrounds are the three universal tells of a template site. Banning clichés forces the model toward distinctive choices — this works for any design prompt, not just portfolios.

Step 3 — Screenshots that sell the work

Empty gray placeholders kill portfolios. For each project: a clean screenshot (hide bookmarks bar, use a tidy browser window), or for non-web work, a photo or document cover. Ask Claude to 'frame project screenshots in a subtle browser-window mockup with CSS' — it's a pure-CSS trick that makes screenshots look intentional.

Step 4 — The credibility pass

Walk it as a skeptical stranger: Does the hero say what you do in five seconds? Does every project link actually go somewhere? Is the email real and clickable? Then the recruiter checks: a PDF resume link, your city (or 'remote'), and an og:image + title so the link unfurls properly when you send it ('add Open Graph and Twitter card tags with a preview image' — one ask).

Step 5 — Your name as the domain

yourname.com if it's available, a sensible variant if not (~$10/yr — buy at a registrar, host anywhere; the hosting guide has free options that handle a portfolio perfectly). Then put the URL where it works: LinkedIn header, resume header, email signature, conference name-tag QR if you're that person. A portfolio nobody visits is a diary.

Step 6 — Keep it alive in 10 minutes a quarter

Stale portfolios read worse than none. Calendar a quarterly reminder: add the newest project, prune the weakest, update the role line. Each update is a one-sentence request against your saved file. The compounding here isn't traffic — it's that the next opportunity always finds the current you.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.