How to build a portfolio hero section with HTML and CSS

The Hero Section Is Your Hook

The hero section is the first thing every visitor sees. It must answer three questions instantly: who you are, what you do, and what action to take. If it takes more than 3 seconds to read, it is too long.

The HTML Structure

<section id="hero">
  <h1>Jane Doe</h1>
  <p class="tagline">Frontend engineer building fast interfaces for SaaS teams.</p>
  <a href="#projects" class="btn-primary">See My Work</a>
</section>

Use h1 for your name — there should be exactly one h1 per page for SEO and accessibility. The tagline is a p tag, not a heading. The CTA links to your projects section, not an external URL.

Centering With Flexbox

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.btn-primary {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: #0070f3;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

Use min-height: 100vh instead of height: 100vh so the section can grow if content is taller than the viewport on small screens. Always test your hero on a 375px-wide screen before calling it done.