Skip to main content
The Hero Section is the first thing visitors see when landing on the portfolio. It features an eye-catching video introduction, personal branding, downloadable resources, and social media links.

​
Overview

Located in src/components/HeroSection.tsx, this component creates a compelling first impression with:
  • Interactive video player with play/pause controls
  • Personal introduction with animated text effects
  • Call-to-action buttons for presentations and resume
  • Social media integration (GitHub, LinkedIn, Instagram, Email)
  • Responsive design that adapts to all screen sizes

​
User Experience

​
Video Player Behavior

The hero section includes an intelligent video player that enhances engagement:
  1. Initial State: Shows video thumbnail with a prominent play button overlay
  2. Playing: When clicked, video plays automatically with smooth fade-in
  3. After Playback: Replaces video with a static memoji image
  4. Re-watch: Play button reappears when user scrolls back to the section
The video player uses Intersection Observer API to detect when users return to the hero section, allowing them to replay the introduction video.

​
Visual Elements

// Video container with glow effect
<div className="relative w-full h-full rounded-full overflow-hidden border-2 border-primary/30">
  <video ref={videoRef} playsInline onEnded={handleVideoEnded}>
    <source src={introVideo} type="video/mp4" />
  </video>
  
  {showPlayButton && (
    <button onClick={handlePlayClick}>
      <Play className="w-10 h-10 text-background" />
    </button>
  )}
</div>

​
Content Structure

​
Personal Information

The left side displays:
  • Badge: Animated badge with sparkle icon and welcoming message
  • Name: Large gradient text displaying “André Ruperto”
  • Role: Subtitle showing “Desenvolvedor & Cientista de Dados”
  • Bio: Brief description of skills and expertise

​
Action Buttons

Three primary action buttons are provided:

Apresentação

Links to a PDF presentation about André’s work and services

Importância de um Site

Educational PDF about the importance of having a professional website

Download Currículo

Direct download link for the resume (Google Drive integration)
Social icons are rendered as circular buttons with hover effects: 
<div className="flex gap-4 justify-center lg:justify-start">
  <a href="https://github.com/AndreRuperto" className="p-3 rounded-full bg-secondary">
    <Github className="w-5 h-5" />
  </a>
  <a href="https://linkedin.com/in/andrerup" className="p-3 rounded-full bg-secondary">
    <Linkedin className="w-5 h-5" />
  </a>
  <a href="https://instagram.com/andreruperto.dev" className="p-3 rounded-full bg-secondary">
    <Instagram className="w-5 h-5" />
  </a>
  <a href="mailto:andreruperto@gmail.com" className="p-3 rounded-full bg-secondary">
    <Mail className="w-5 h-5" />
  </a>
</div>

​
Animation System

The hero section uses staggered fade-in animations:
  • Badge: Appears at 0.1s delay
  • Name & Title: Appears at 0.2s delay
  • Description: Appears at 0.3s delay
  • Buttons: Appears at 0.4s delay
  • Social Links: Appears at 0.5s delay
  • Video Container: Slides in from right at 0.3s delay
<div className="animate-fade-in" style={{ animationDelay: "0.2s" }}>
  <h1 className="heading-lg">
    <span className="text-gradient">André Ruperto</span>
  </h1>
</div>

​
Background Pattern

A subtle SVG pattern creates visual interest: 
<div className="absolute inset-0 opacity-5">
  <div style={{
    backgroundImage: `url("data:image/svg+xml,...")`
  }} />
</div>

​
Responsive Design

​
Mobile (< 768px)

  • Centered text alignment
  • Full-width buttons
  • Smaller video container (256px)
  • Stacked layout

​
Tablet (768px - 1024px)

  • Larger video container (320px)
  • Maintained stacked layout
  • Adjusted padding

​
Desktop (> 1024px)

  • Two-column grid layout
  • Left-aligned text
  • Large video container (500px)
  • Side-by-side content
The video file (intro-video.mp4) should be optimized for web to ensure fast loading. Recommended: H.264 codec, 1080p max resolution, under 5MB file size.

​
Key Features

​
Intersection Observer

The component uses Intersection Observer to track visibility: 
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && !hasPlayed) {
        setShowPlayButton(true);
      }
    });
  },
  { threshold: 0.5 }
);
This allows the play button to reappear when users scroll back after watching the video.

​
State Management

Three key state variables control the video experience:
  • hasPlayed: Tracks whether video has finished playing
  • showPlayButton: Controls play button visibility
  • videoRef: Reference to video element for programmatic control

​
Assets Used

  • Video: intro-video.mp4 - Introduction video
  • Image: memoji-joia.png - Static image shown after video
  • PDFs: André Ruperto - Apresentação.pdf, Importância de um Site.pdf

​
Integration

The Hero Section is typically placed at the top of the main portfolio page: 
import HeroSection from '@/components/HeroSection';

function App() {
  return (
    <>
      <HeroSection />
      {/* Other sections */}
    </>
  );
}
The component is fully self-contained and doesn’t require any props, making it easy to integrate into any page structure.

Build docs developers (and LLMs) love

Get started for freeTalk to us