Project: Portfolio Site

Introduction

A portfolio site is a practical capstone project for CSS fundamentals: layout composition, component reuse, responsive behavior, visual hierarchy, and theme consistency. In this chapter, you will build a complete one-page portfolio with reusable sections you can later split into multi-page structure if needed.

Prerequisites

  • Solid understanding of layout (Flexbox/Grid)
  • Familiarity with typography, spacing tokens, and interaction states
  • Basic project structure and CSS organization knowledge

Project Goal

Build a portfolio page with:

  • sticky navigation
  • hero/about section
  • skills grid
  • projects showcase
  • contact section
  • footer

Quality goals:

  • strong personal branding hierarchy
  • responsive and readable across devices
  • accessible keyboard interactions
  • reusable component patterns

Folder Setup

text
portfolio-site/
├── index.html
├── css/
│   └── styles.css
└── images/
    ├── avatar.jpg
    └── project-*.jpg

Step 1: HTML Structure

Create index.html:

Structure explanation:

  • sections are semantic and anchor-linked
  • cards are reusable patterns for skills and projects
  • CTA appears in hero and contact zones for clear action path

Step 2: Tokens and Base Styles

Create css/styles.css:

Code explanation:

  • tokens keep styling consistent and theme-ready
  • responsive container and section rhythm create predictable structure

Step 3: Header and Navigation

Add:

Step 4: Hero and Buttons

Add:

Step 5: Skills and Project Cards

Add:

Code explanation:

  • shared card baseline reduces duplication
  • project media uses fixed ratio for stable layout

Add:

Step 7: Responsive Enhancements

Add:

This keeps hero composition balanced on desktop and spacing efficient on mobile.

Add:

Optional: Simple Dark Mode Tokens

If you want theme support:

css
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #111827;
    --surface-muted: #0f172a;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: #1f2937;
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
  }
}

Quality Checklist

  • Hero clearly communicates role/value
  • Cards and text remain readable on small screens
  • Navigation links and buttons have visible focus states
  • No horizontal overflow at narrow widths
  • Section spacing and hierarchy feel consistent

Common Mistakes

MistakeWhy it hurtsBetter approach
Too much text in heroWeak first impressionKeep headline + concise supporting copy
Inconsistent card structureVisual noise and maintenance costUse shared card baseline styles
No media constraints in project cardsBroken responsive layoutUse aspect-ratio + object-fit
Hover-only cuesAccessibility gapAdd focus-visible feedback
No content prioritization on mobileDifficult scanningKeep sections concise and progressively enhanced

Stretch Goals

  1. Add project filtering UI (All/UI/CSS/Accessibility)
  2. Add timeline section for experience
  3. Add downloadable resume button
  4. Add animated section reveal with reduced-motion fallback
  5. Split into multi-page portfolio (About / Projects / Contact)

FAQ

Should portfolio be one page or multiple pages?

Either is fine. One-page is fast to build and easy to scan; multi-page can scale better for larger project catalogs.

How many projects should I show initially?

Three to six strong projects is usually better than a long list of weak examples.

Is dark mode required for a portfolio?

Not required, but it can improve polish and user comfort when implemented well.

Can I use this structure in frameworks later?

Yes. The component and section structure maps cleanly to React/Vue/Svelte pages.

What matters most for portfolio quality?

Clear storytelling, readable layout, accessible interactions, and real project outcomes—more than visual effects alone.