Skip to main content
The Hero section is the first content users see when landing on the CV site. It features a badge, welcome card, interactive photo slider with video support, and call-to-action buttons.

​
Overview

The hero section includes:
  • Badge component - Visual indicator at the top
  • Welcome card - Displays name and professional description
  • Photo slider - Swiper-powered card-style carousel with images and videos
  • Video controls - Sound toggle for video slides
  • CTA buttons - Download CV and LinkedIn profile links

​
File Location

src/sections/hero.astro

​
Key Features

​
Swiper Integration

The hero section uses Swiper.js with the Cards Effect to create a modern, interactive photo slider: 
const swiper = new Swiper(swiperEl, {
    modules: [EffectCards, Pagination],
    effect: 'cards',
    grabCursor: true,
    loop: false,
    cardsEffect: {
        slideShadows: true,
        perSlideOffset: 8,
        perSlideRotate: 2,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});

​
Media Configuration

The photo slider supports both images and videos. Media items are defined in the frontmatter: 
const photos = [
    { type: "image", src: "/profile_01.jpeg", alt: "Nico Gaitán - Retrato" },
    { type: "video", src: "/assets/videos/photo_video.mp4", alt: "Nico Gaitán - Video" },
    { type: "image", src: "/assets/images/photo_talk.png", alt: "Nico Gaitán - Creativo" },
    { type: "image", src: "/assets/images/photo_setup.jpeg", alt: "Nico Gaitán - Casual" },
    { type: "image", src: "/assets/images/photo_doodle.jpeg", alt: "Nico Gaitán - Trabajo" },
];

​
Video Handling

Videos in the slider include automatic playback control and a sound toggle button: 
on: {
    slideChange: function() {
        // Pause all videos
        const videos = document.querySelectorAll('.hero-video');
        videos.forEach(video => {
            video.pause();
            video.currentTime = 0; // Reset to start
        });
        
        // Play video ONLY on active slide
        const activeSlide = this.slides[this.activeIndex];
        const activeVideo = activeSlide?.querySelector('.hero-video');
        if (activeVideo) {
            activeVideo.play().catch(err => console.log('Video play error:', err));
        }
    }
}
Sound Toggle: Users can unmute videos with a custom button overlay: 
soundToggles.forEach(toggle => {
    toggle.addEventListener('click', (e) => {
        e.stopPropagation();
        const videoIndex = toggle.getAttribute('data-video-index');
        const video = document.querySelector(`.hero-video[data-video-index="${videoIndex}"]`);
        
        if (video) {
            video.muted = !video.muted;
            toggle.classList.toggle('unmuted', !video.muted);
        }
    });
});

​
Conditional Rendering

The slider conditionally renders either video or image based on the media type: 
{photos.map((photo, index) => (
    <div class="swiper-slide" data-index={index}>
        {photo.type === "video" ? (
            <div class="video-container">
                <video 
                    src={photo.src} 
                    class="hero-video"
                    muted
                    loop
                    playsinline
                    data-video-index={index}
                ></video>
                <button class="video-sound-toggle" aria-label="Activar/desactivar sonido" data-video-index={index}>
                    <!-- SVG icons for sound off/on -->
                </button>
            </div>
        ) : (
            <img src={photo.src} alt={photo.alt} draggable="false">
        )}
    </div>
))}

​
Call-to-Action Buttons

Two prominent CTA buttons are provided:
  1. Download CV - Download PDF resume
  2. View LinkedIn - Link to LinkedIn profile
<div class="ctas">
    <a href="#" class="btn" aria-label="Descargar currículum en PDF">
        <svg><!-- Download icon --></svg>
        Descargar CV
    </a>

    <a href="#" class="btn" aria-label="Ver perfil en LinkedIn" target="_blank" rel="noopener noreferrer">
        <svg><!-- LinkedIn icon --></svg>
        <span>Ver Linkedin</span>
    </a>
</div>

​
Styling

The hero section features:
  • Square aspect ratio slider (1:1)
  • Cards effect with shadows and rotation
  • Glassmorphism video controls with backdrop blur
  • Custom pagination bullets with primary color
  • Hover animations on CTA buttons

​
Accessibility

  • aria-label attributes on interactive buttons
  • playsinline attribute for mobile video compatibility
  • rel="noopener noreferrer" on external links
  • Custom pagination is keyboard accessible and clickable

​
Dependencies

import Swiper from 'swiper';
import { EffectCards, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-cards';
import 'swiper/css/pagination';

​
Components Used

  • Badget.astro - Badge component at the top
  • WelcomeCard.astro - Name and description card

Build docs developers (and LLMs) love

Get started for freeTalk to us