project portfolio site

Portfolio Site

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Build your personal portfolio with projects showcase.

What You'll Build

A personal portfolio that:

  • Introduces who you are
  • Showcases your projects in a grid
  • Has individual project pages
  • Looks polished and professional
  • Lives on your own domain (optional)

The most practical project for designers — you'll actually use this.

Why This Project

Every designer needs a portfolio. This project teaches:

  1. Multi-page sites — Navigation between pages
  2. Content structure — Organizing projects and information
  3. Polish — Making it look professional
  4. Real deployment — Custom domains and production hosting

You'll end up with something you can actually share with clients or employers.

Before You Start

Make sure you have:

  • Claude Code installed and working
  • Node.js installed
  • Some projects to showcase (even 2-3 is fine)
  • Brief descriptions and images for each project

The Steps

  1. Starting — Project setup and structure
  2. Home Page — Introduction and navigation
  3. Projects Grid — Showcase your work
  4. Project Pages — Individual project details
  5. Polish — Refinement and responsiveness
  6. Going Live — Deployment and custom domain

Design Decisions

Before starting, consider:

  • Tone: Minimal? Bold? Playful?
  • Content: What projects to feature?
  • Photography: Do you have project images?

Don't overthink it — you can always iterate.

If You Get Stuck

Portfolio sites involve design decisions. When stuck:

  1. Reference other portfolios — "Style it like [designer's site]"
  2. Describe the feeling — "I want it to feel minimal but warm"
  3. Iterate — "That's too busy, simplify it"

Let's Start

terminal
cd ~/Desktop

Exercises

  1. Write down your three design decisions before opening Claude Code: pick a tone (minimal/bold/playful), list the 2-3 projects you'll feature, and note whether you have images for each.
  2. Find one or two portfolios you admire and save their URLs — you'll use them as references ("Style it like [site]") when you get stuck.
  3. Draft a one-sentence description for each project you plan to feature, so the content is ready before you start building.