Building the Hero Section

The hero is the first thing visitors see. You have ~3 seconds to make them stay. Make it count.

Hero anatomy

<section class="hero">
  <div class="hero-content">
    <span class="greeting">Hi, I'm</span>
    <h1>Alex Chen</h1>
    <h2>Frontend Developer</h2>
    <p>I build fast, beautiful web apps.</p>
    <div class="cta-group">
      <a href="#projects" class="btn-primary">View My Work</a>
      <a href="#contact" class="btn-outline">Hire Me</a>
    </div>
  </div>
</section>

Tips

• Use a gradient or subtle background, not plain white
• Your name should be the biggest text on the page
• One primary CTA (e.g. "View Work"), one secondary (e.g. "Contact")
• Typing animation on the role text looks impressive but keep it quick