Skip to content
NDLab Blog
Sign in

Responsive Portfolio Page Project — Combining Flexbox, Grid & Modern CSS

Site Console Site Console
5 min read Updated Oct 18, 2025 Frontend Design 0 comments
🔖 Bookmark

Introduction

You’ve mastered the building blocks of layout and responsiveness.
Now, let’s bring them together in a real-world project — building a responsive portfolio page.

This project demonstrates:

  • A semantic HTML structure

  • Flexbox navigation and hero alignment

  • CSS Grid project gallery

  • Responsive scaling with clamp() and minmax()

  • Container-based adjustments

  • A clean, mobile-first design

By the end, you’ll have a working, modern layout ready for a real portfolio or resume site.

1. Project Overview

Goal:
Design a personal portfolio landing page that works across mobile, tablet, and desktop devices.

Sections:

  1. Header + Navigation

  2. Hero section with intro and image

  3. Projects grid

  4. Contact footer

Techniques Used:

  • Semantic HTML

  • Flexbox (nav, hero)

  • CSS Grid (project gallery)

  • clamp() for fluid typography

  • Media queries for layout adjustments

2. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Responsive Portfolio</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="header">
    <div class="logo">MyPortfolio</div>
    <nav class="nav">
      <a href="#">Home</a>
      <a href="#">Projects</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h1>Hi, I'm Alex</h1>
      <p>I build modern, responsive, and accessible web experiences.</p>
      <a href="#" class="btn">View My Work</a>
    </div>
    <img src="portrait.jpg" alt="Developer portrait" class="hero-img" />
  </section>

  <section class="projects">
    <h2>My Projects</h2>
    <div class="grid">
      <article class="project-card">Project 1</article>
      <article class="project-card">Project 2</article>
      <article class="project-card">Project 3</article>
      <article class="project-card">Project 4</article>
    </div>
  </section>

  <footer class="footer">
    <p>© 2025 MyPortfolio. Built with ❤️ using HTML & CSS.</p>
  </footer>
</body>
</html>

3. CSS: Mobile-First Base Styles

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.6;
  background: #f9fafc;
  color: #222;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
}

.nav {
  display: flex;
  gap: 1rem;
}

.nav a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.nav a:hover {
  color: #0077ff;
}

/* Hero section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  background: #fff;
}

.hero-content h1 {
  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
  color: #555;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  background: #0077ff;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
}

.btn:hover {
  background: #3399ff;
}

/* Hero image */
.hero-img {
  width: 100%;
  max-width: 300px;
  border-radius: 50%;
  margin-top: 2rem;
}

/* Projects */
.projects {
  padding: 2rem 1rem;
  text-align: center;
}

.projects h2 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  margin-bottom: 1.5rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.project-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Footer */
.footer {
  text-align: center;
  padding: 1.5rem;
  background: #fff;
  border-top: 1px solid #eee;
}

4. CSS: Responsive Enhancements

/* Tablets */
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    justify-content: space-around;
    text-align: left;
  }

  .hero-content {
    max-width: 50%;
  }

  .hero-img {
    max-width: 250px;
    margin: 0;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktops */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero {
    padding: 4rem;
  }

  .hero-content h1 {
    font-size: clamp(2rem, 2vw + 1rem, 3.5rem);
  }

  .projects {
    padding: 4rem 2rem;
  }
}

5. Modern Enhancements with Clamp() and Minmax()

The page already uses clamp() for scalable typography.
You can further apply min() and max() for adaptive spacing:

.projects {
  padding: min(5vw, 4rem);
}

.grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

✅ Result:

  • The layout expands fluidly across all screen sizes

  • Projects reflow naturally without fixed breakpoints

  • Text scales smoothly for readability

6. Optional: Container Queries for Components

If you want each .project-card to respond to its own width:

.projects {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .project-card {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}

This makes each card adaptive inside grids or other containers.

7. Testing the Portfolio Layout

✅ Checklist:

  • Works on mobile, tablet, and desktop

  • No horizontal scrolling at small widths

  • Text scales smoothly

  • Buttons have adequate tap area

  • Images resize and maintain aspect ratio

Test on real devices or with DevTools’ device simulation.

✅ Summary & What’s Next

You’ve just built your first full responsive layout using:

  • Semantic HTML5

  • Flexbox & CSS Grid together

  • Fluid typography (clamp())

  • Responsive grids (minmax(), auto-fit)

  • Mobile-first design

You’re now ready for Phase 3: Styling Systems & Components, where we’ll move beyond structure into scalable styling patterns, reusable UI components, and CSS architecture.

CSS3

Related

Leave a comment

Sign in to leave a comment.

Sign in Create account

Comments