project portfolio site
Step 2: Home Page
System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck
Full Lesson Reference
Build your introduction and navigation.
Add Your Introduction
terminal
Update the home page with:
- My name: [Your Name]
- A brief tagline: [Your tagline, e.g., "Product Designer"]
- A short intro paragraph about what I do
- Navigation to sections (Projects, About, Contact)
Keep it minimal. The projects should be the focus.Style the Header
terminal
Style the introduction section:
- Large name as the main heading
- Tagline should be prominent but secondary
- Add comfortable spacing
- Use a clean, readable font
I want it to feel [minimal/bold/friendly — pick one].Add Navigation
terminal
Add a simple navigation:
- Link to projects section
- Link to about section
- Link to contact
It can be subtle — just text links is fine.Responsive Check
Resize your browser window.
terminal
Make sure the home page looks good on mobile.
The text should stay readable and properly spaced.Checkpoint
- Name and tagline displayed
- Intro paragraph
- Navigation links
- Looks good on mobile
What You Learned
- Building hero/introduction sections
- Typography hierarchy
- Basic responsive adjustments
Exercises
- Fill the bracketed placeholders in the "Add Your Introduction" prompt with your real name, tagline, and intro, then send it.
- Pick one feeling (minimal, bold, or friendly) in the "Style the Header" prompt and send it; if the result misses the mark, iterate with a follow-up like "make it feel calmer / more confident."
- Resize your browser to mobile width and send the responsive prompt; confirm the name, tagline, and nav links all stay readable.