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

  1. Fill the bracketed placeholders in the "Add Your Introduction" prompt with your real name, tagline, and intro, then send it.
  2. 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."
  3. Resize your browser to mobile width and send the responsive prompt; confirm the name, tagline, and nav links all stay readable.