Skip to content

Hero Section

Jump to bottom
Alee Javed edited this page Mar 1, 2026 · 1 revision

Hero Section

The hero section is the main landing area of your portfolio, featuring your greeting, name, and subtitle with customizable content and smart text wrapping.

🎨 Customization

Access Hero Settings

Go to Appearance → Customize → Hero

Options

Setting Description Default Notes
Hero Greeting Opening greeting message "Hello!" Short, friendly greeting
Hero Name Your name with smart breaking "Alee Javed" Automatically wraps long names
Hero Subtitle Description or tagline "and I am a student and tech enthusiast" Your professional description

🦸 Smart Name Breaking

The theme automatically breaks names for optimal display:

Examples

  • "Alee Javed" → "Alee" + "Javed"
  • "John Smith" → "John" + "Smith"
  • "Mary Jane Watson" → "Mary" + "Jane Watson"
  • "Jean-Claude Van Damme" → "Jean-Claude" + "Van Damme"
  • "Christopher Robin Williams" → "Christopher" + "Robin Williams"

Breaking Logic

  • 1 part names: Single line display
  • 2 part names: Split evenly
  • 3+ part names: First name on line 1, rest on line 2

📱 Responsive Behavior

Font Scaling

  • Desktop: clamp(88px, 9vw, 140px) - Large hero text
  • Tablet: Scales proportionally
  • Mobile: Optimized for smaller screens

Text Wrapping

  • Long names: Wrap to next line with flex-wrap: wrap
  • Text overflow: text-overflow: ellipsis for very long text
  • Maximum width: max-width: 200px for buttons

🎯 Content Structure

HTML Structure

<section class="hero" id="me">
  <div class="container hero-inner">
    <div class="hero-left">
      <p class="hero-kicker">[Greeting]</p>
      <h1 class="hero-title">
        <span class="hero-line">
          <span class="hero-im">I'm</span>
          <span class="hero-brand">[First Name]</span>
        </span>
        <span class="hero-brand">[Last Name]</span>
      </h1>
      <p class="hero-subtitle">[Subtitle]</p>
    </div>
    <div class="hero-right">
      <!-- Avatar and links -->
    </div>
  </div>
</section>

CSS Classes

  • .hero-kicker - Greeting text
  • .hero-title - Main name heading
  • .hero-brand - Colored name parts
  • .hero-subtitle - Description text

🎨 Styling Options

Typography

  • Hero Greeting: Light gray, smaller font
  • Hero Name: Large, bold, accent color
  • Hero Subtitle: Muted gray, medium size

Colors

  • Name Color: Uses accent color variable (--accent)
  • Text Colors: Uses text and muted variables
  • Background: Uses background variable (--bg)

Animations

  • Hover effects: Smooth color transitions
  • Text wrapping: Responsive breaking
  • Loading: Fade-in animations

🔧 Advanced Customization

Custom CSS Examples

/* Change greeting color */
.hero-kicker {
  color: var(--accent);
  font-weight: 600;
}

/* Add background pattern */
.hero {
  background-image: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 5%, var(--bg)) 100%);
}

/* Custom name styling */
.hero-brand {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

Custom JavaScript

Add custom interactions in Appearance → Customize → Additional CSS:

// Add typing effect to greeting
document.addEventListener('DOMContentLoaded', function() {
  const kicker = document.querySelector('.hero-kicker');
  const text = kicker.textContent;
  kicker.textContent = '';
  let i = 0;
  
  function typeWriter() {
    if (i < text.length) {
      kicker.textContent += text.charAt(i);
      i++;
      setTimeout(typeWriter, 100);
    }
  }
  
  typeWriter();
});

📱 Mobile Considerations

Text Size

  • Small screens: Font scales down proportionally
  • Touch targets: Buttons remain touch-friendly
  • Readability: Maintains contrast ratios

Layout

  • Stacked layout: Hero content stacks vertically
  • Centered content: Everything remains centered
  • Proper spacing: Maintains visual hierarchy

🔍 Troubleshooting

Name Not Breaking

  1. Check name length - Very long names may need manual adjustment
  2. Verify CSS - Ensure flex-wrap: wrap is working
  3. Check browser - Test in different browsers

Colors Not Applying

  1. Clear cache - Browser and WordPress cache
  2. Check variables - Ensure CSS variables are loading
  3. Check Customizer - Verify settings are saved

Layout Issues

  1. Check responsive - Test at different screen sizes
  2. Verify HTML - Ensure proper structure
  3. Check conflicts - Plugin or theme conflicts

📚 Related Documentation

Clone this wiki locally