L10 XP00

How to vibe code a portfolio site

A portfolio is the ideal first vibe coding project — no backend, pure taste, and the artifact is your public face. It's also the project where 'vibe' matters most literally: the agent can produce any aesthetic; your job is to direct one, not accept the default.

The differentiator isn't animation — it's case studies. Three projects with problem → what you did → outcome beats twelve screenshot tiles every time, with recruiters and with search engines.

Tool: Any agent; this is also the perfect project for Course 01's early modules — it IS the practice. Time: one sitting. The free deep-dive: Vibe Coding using Claude Code.

The steps
  1. 1

    Write the content before the code

    One-line identity ('Product designer who ships'), three project case studies (problem, your work, outcome — with numbers where possible), and contact links. Content in hand makes every design decision easier and stops the agent from filling the page with lorem ipsum energy.

  2. 2

    Direct a specific aesthetic

    Name a direction, don't say 'clean and modern' (you'll get the same site as everyone): 'editorial, serif headlines, off-white paper background, one accent color, generous whitespace' or 'terminal-brutalist, monospace, visible grid'. Reference a site you love. Taste is the prompt.

  3. 3

    Build as a static Next.js/Astro site

    Case studies as markdown files so adding projects never touches layout code. Ask for semantic HTML, real meta tags, an OG image, and a sitemap — hiring managers share links; make the preview card look intentional.

  4. 4

    Make it fast and accessible

    Optimized images, system-font fallbacks, keyboard navigation, honest alt text. Run Lighthouse and let the agent fix what it flags — a 100 score on your own portfolio is a quiet flex that costs one prompt.

  5. 5

    Deploy on your own domain

    Vercel/Netlify free tier + a ~$10/year domain. yourname.com signals ownership; a platform subdomain signals template. Add a tiny privacy-friendly analytics snippet to see which case study people actually read.

Starter prompt — paste into your agent
Build my portfolio site as a static Next.js app. Content (real, included below): identity line, bio paragraph, three case studies (each: title, problem, what I did, outcome), and contact links — case studies as markdown files in /content. Aesthetic direction: [name a specific direction + one reference site]. Requirements: semantic HTML, responsive, dark mode following system, real meta/OG tags with a generated OG image, sitemap, and a Lighthouse-100 target (image optimization, no layout shift). No contact form — mailto and socials only. Deployable to Vercel. [paste your content]
Frequently asked questions

Do I need a portfolio if I'm not a designer?

If anyone ever Googles your name — yes. For developers and vibe coders specifically, a portfolio whose footer says 'vibe-coded with Claude Code, source on GitHub' is itself a work sample: it proves you ship.

Should I use a template instead?

Templates are faster to start and slower to stand out — and editing someone else's structure fights you. Vibe coding from a taste direction gets you a site that's actually yours in the same afternoon, and every tweak afterward is one sentence away.

Keep going

Related verdicts: Linktree, Carrd, Webflow. All guides: a browser game · a mobile app · a Chrome extension · a SaaS · a Discord bot · a dashboard