Step 1: Starting
Set up the portfolio project structure.
Create the Project
mkdir ~/Desktop/Portfolio
cd ~/Desktop/Portfolio
claudeFirst 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 — it builds fast static sites and is
great for content-heavy pages like portfolios.
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
Start the dev server so I can see changes live.Open the URL Claude provides (usually localhost:4321).
Create CLAUDE.md
Before going further, give Claude a file that describes your project. This is called CLAUDE.md — Claude reads it automatically every time you start a session.
Create a CLAUDE.md file for this project.
Here's what it should say:
# Portfolio
A personal portfolio website to showcase my work.
## What This Is
- A portfolio site built with Astro
- Minimal, clean design that puts the work front and center
- Sections for projects/work and an about page
## Design Goals
- Clean typography and generous whitespace
- Project grid that looks good with or without images
- Simple navigation — don't over-engineer it
- Responsive across desktop, tablet, and mobile
## Structure
- Home page with intro and project grid
- Individual project pages
- About sectionClaude creates the file in your project root. From now on, every session starts with full context — no re-explaining needed.
Want to understand why this matters? Read the Your Project’s Brain guide.
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
- CLAUDE.md created
- Basic page visible in browser
- You understand the file structure
What You Learned
- Setting up an Astro project
- 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.