Step 1: Starting

Set up the portfolio project structure.

Create the Project

mkdir ~/Desktop/Portfolio
cd ~/Desktop/Portfolio
claude

First Prompt

I want to build a personal portfolio website.

Structure:
- Home page with brief intro and project grid
- Individual project pages with details
- About section (can be on home page)
- Contact information

Tech: Use Astro or Next.js — whatever you recommend
for a simple static portfolio.

Start with the basic project structure and a minimal home page.

What Claude Creates

• Project scaffolding
• Basic file structure
• A starting home page

Run the Dev Server

Open the URL Claude provides (usually localhost:3000 or localhost:4321).

Project Structure

Ask Claude to explain what was created:

Walk me through the project structure.
What files do what?

Understanding the structure helps when you want to modify things later.

Checkpoint

• Project created
• Dev server running
• Basic page visible in browser
• You understand the file structure

What You Learned

• Setting up modern web projects
• Dev servers for live preview
• Basic project organization

Tip: A portfolio site benefits from consistent design and responsive layouts. As you progress, consider adding the Design System and Responsive skill files to your project — they teach Claude to make better visual decisions automatically.

Exercises

1. Run the three setup commands, then paste the First Prompt and let Claude scaffold the project. Confirm the dev server starts and the page loads in your browser.
2. Paste the "Walk me through the project structure" prompt and read Claude's explanation — note where pages and styles live so you can find them later.
3. Make one tiny edit (change the page title text) and watch it update live in the browser to confirm hot reload is working.