Skip to main content

​
Overview

The hero section is the first content users see when visiting the portfolio. It introduces the developer with a prominent headline, description, profile image, and social media links.

​
Key Features

  • Responsive layout that switches from mobile (stacked) to desktop (side-by-side)
  • Large, attention-grabbing headline with styled text
  • Professional description
  • Social media link buttons
  • Optimized hero image with fetchpriority=“high”

​
HTML Structure

The hero section uses a flexible container layout: 
<section class="hero">
  <div class="section-container">
    <img
      class="hero__image"
      src="assets/hero.svg"
      alt="Girl working on a laptop"
      fetchpriority="high"
      width="300"
      height="300"
    />
    <div class="hero__content">
      <h1 class="hero__title">
        Hello I'am <strong>Flora Sheen</strong><br />
        Frontend <span class="outlined">Developer</span><br />
        Based In <strong>India</strong>
      </h1>
      <p class="hero__description">
        I'm Flora Sheen Lorem Ipsum is simply dummy text of the printing
        and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer
        took a galley of type and scrambled it to specimen book.
      </p>
      <div class="hero__social">
        <a href="#" class="social-link" aria-label="Facebook">
          <img src="assets/facebook.svg" alt="Facebook" />
        </a>
        <a href="#" class="social-link" aria-label="Reddit">
          <img src="assets/reddit.svg" alt="Reddit" />
        </a>
        <a href="#" class="social-link" aria-label="Twitter">
          <img src="assets/twitter.svg" alt="Twitter" />
        </a>
        <a href="#" class="social-link" aria-label="Discord">
          <img src="assets/discord.svg" alt="Discord" />
        </a>
      </div>
    </div>
  </div>
</section>

​
CSS Classes

​
Hero Container

The main hero section with flexible layout:
.hero {
  padding: var(--spacing-40) var(--spacing-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-40);
}

​
Content Area

Contains the text and social links:
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-32);
}

​
Title Styling

Responsive typography with emphasis:
.hero__title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 400;
  color: var(--primary-black);
}

.hero__title strong {
  font-weight: 800;
}
The title uses the .outlined class for the “Developer” text, creating an outlined effect.

​
Image

Responsive image sizing:
.hero__image {
  width: 100%;
  height: auto;
  max-height: 30vh;
}

​
Responsive Behavior

  • Vertical stack layout
  • Image displayed above content
  • Content centered
  • Max image height: 30vh
The default mobile layout:
.hero {
  flex-direction: column;
}

​
Special Text Effect

The “Developer” text uses the .outlined utility class for a distinctive outlined text effect: 
.outlined {
  font-weight: 800;
  color: var(--primary-white);
  text-shadow: var(--outline-width) 0 var(--primary-black),
    calc(var(--outline-width) * -1) 0 var(--primary-black),
    0 var(--outline-width) var(--primary-black),
    0 calc(var(--outline-width) * -1) var(--primary-black),
    var(--outline-width) var(--outline-width) var(--primary-black),
    calc(var(--outline-width) * -1) calc(var(--outline-width) * -1)
      var(--primary-black),
    var(--outline-width) calc(var(--outline-width) * -1) var(--primary-black),
    calc(var(--outline-width) * -1) var(--outline-width) var(--primary-black);
}

​
Performance Optimizations

The hero image uses fetchpriority="high" to prioritize loading since it’s above the fold. Width and height attributes are specified to prevent layout shift.

​
Implementation Location

The hero section is located at lines 50-89 in index.html, with styles at lines 124-204 in global.css.

Build docs developers (and LLMs) love

Get started for freeTalk to us