project portfolio site

Step 4: Project Pages

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

Full Lesson Reference

Create individual pages for each project.

Create a Project Template

terminal
Create a template for individual project pages.

Each page should include:
- Project title (large heading)
- Hero image or images
- Project overview/description
- My role
- Key details (client, year, etc.)
- More images or screenshots
- Link back to all projects

Make it scrollable with good visual rhythm.

Add Content Structure

terminal
Structure the content sections:
- Overview: What the project is
- Problem: What challenge it solved
- Solution: How it was approached
- Results: Outcomes or impact (if available)

Use headings to organize. Images between sections.

Create Your First Project Page

terminal
Create the project page for [Project Name].

Content:
- Overview: [Description]
- Role: [Your role]
- Details: [Client, year, tools used]
- Images: [Describe or provide images]

Duplicate for Other Projects

terminal
Create project pages for the remaining projects
using the same template:

- [Project 2]: [Brief details]
- [Project 3]: [Brief details]

Link Everything

terminal
Make sure:
- Project cards on home link to their detail pages
- Project pages link back to home/projects section
- Navigation works from everywhere

Checkpoint

  • Project page template created
  • Individual pages for each project
  • Navigation between pages works
  • Content structure is consistent

What You Learned

  • Creating page templates
  • Content structure for case studies
  • Multi-page navigation
  • Maintaining consistency across pages

Exercises

  1. Send the template and content-structure prompts, then build your first project page with real overview, role, and details using the "Create Your First Project Page" prompt.
  2. Duplicate the template for your remaining projects, then click through from a grid card to its detail page and back to confirm every link works.
  3. Read one of your project pages top to bottom as a visitor — check that the Overview → Problem → Solution → Results flow makes sense and add an image between any sections that feel text-heavy.