Resume Section Component

The resume section displays technical skills in a grid layout and presents work experience and education in vertical timeline formats.

Section Structure

<section id="resume">
    <div class="py-4 my-4">
        <h1 class="fw-bold mt-5">Resume</h1>
    </div>
    
    <!-- Skills Section -->
    <div class="py-4 my-4">
        <h2 class="fw-bold pb-4">Habilidades Técnicas</h2>
        <div class="skills-list">
            <!-- Skills grid items -->
        </div>
    </div>
</section>

<!-- Experience Section -->
<section id="experiencia-laboral" class="resume-section">
    <div class="container">
        <div class="section-title">
            <div class="py-4 my-4"></div>
            <h2 class="fw-bold pb-4">Experiencia Laboral</h2>
        </div>
        <hr class="mid-break my-2">
        <div class="timeline">
            <!-- Timeline items -->
        </div>
    </div>
</section>

<!-- Education Section -->
<section id="education" class="resume-section">
    <div class="container">
        <div class="section-title">
            <div class="py-4 my-4"></div>
            <h2 class="fw-bold pb-4">Educación</h2>
        </div>
        <hr class="mid-break my-2">
        <div class="timeline">
            <!-- Timeline items -->
        </div>
    </div>
</section>

Skills Grid Layout

The skills section uses CSS Grid to create a responsive layout of skill badges.

HTML Structure

<div class="py-4 my-4">
    <h2 class="fw-bold pb-4">Habilidades Técnicas</h2>

    <div class="skills-list">
        <h4><i class="ti ti-brand-nodejs"></i> Node.js</h4>
        <h4><i class="ti ti-brand-javascript"></i> JavaScript</h4>
        <h4><i class="ti ti-brand-php"></i> PHP</h4>
        <h4><i class="ti ti-brand-mysql"></i> MySQL</h4>
        <h4><i class="ti ti-brand-html5"></i> HTML & CSS</h4>
        <h4><i class="ti ti-brand-c-sharp"></i> C#</h4>
        <h4><i class="ti ti-brand-git"></i> Git</h4>
    </div>
</div>

CSS Grid Styling

.skills-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.4rem 2rem;
  margin: 2.5rem 0;
}

.skills-list h4 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  background: rgba(74, 144, 226, 0.07);
  border: 1px solid rgba(74, 144, 226, 0.15);
  border-radius: 12px;
  color: var(--body-text-color);
  font-weight: 600;
  transition: all 0.3s ease;
}

.skills-list h4:hover {
  background: rgba(74, 144, 226, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.skills-list .ti {
  font-size: 2rem;
  color: var(--accent-color);
}

Responsive Grid

@media (max-width: 576px) {
  .skills-list { 
    grid-template-columns: 1fr; 
  }
}

Work Experience Timeline

The work experience section uses a timeline layout to display job history.

Timeline HTML

<section id="experiencia-laboral" class="resume-section">
    <div class="container">
        <div class="section-title">
            <div class="py-4 my-4"></div>
            <h2 class="fw-bold pb-4">Experiencia Laboral</h2>
        </div>
    
        <hr class="mid-break my-2">
        
        <div class="timeline">
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">
                            Ene 2022 - Oct 2025 
                            <span class="divider">•</span> 
                            <span class="company">Vita Support SAS</span>
                        </p>
                        <h3 class="info-title">Técnico de Software Junior</h3>
                        <p>
                            Liderazgo de área por casi 11 meses, gestionando proyectos 
                            y coordinando equipo. Desarrollo de sistemas a medida 
                            garantizando seguridad, escalabilidad y cumplimiento de plazos.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">
                            Ene 2022 - Jul 2022 
                            <span class="divider">•</span> 
                            <span class="company">Aprendiz SENA – FUNDEM PSP</span>
                        </p>
                        <h3 class="info-title">Desarrollador de Software</h3>
                        <p>
                            Pruebas de calidad y validación de desarrollos. 
                            Desarrollo de una plataforma educativa desde cero.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Education Timeline

The education section uses the same timeline structure as work experience.

Education HTML

<section id="education" class="resume-section">
    <div class="container">
        <div class="section-title">
            <div class="py-4 my-4"></div>
            <h2 class="fw-bold pb-4">Educación</h2>
        </div>
    
        <hr class="mid-break my-2">
        
        <div class="timeline">
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">
                            En curso 
                            <span class="divider">•</span> 
                            <span class="company">Corporación Universitaria Iberoamericana</span>
                        </p>
                        <h3 class="info-title">Ingeniería de Software</h3>
                        <p>
                            Formación universitaria en ingeniería de software con enfoque 
                            en arquitectura de sistemas, desarrollo de aplicaciones y 
                            gestión de proyectos tecnológicos.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">
                            2020 - 2021 
                            <span class="divider">•</span> 
                            <span class="company">SENA</span>
                        </p>
                        <h3 class="info-title">Técnico en Programación de Software</h3>
                        <p>
                            Formación técnica especializada en desarrollo de software, 
                            algoritmos, estructuras de datos y buenas prácticas.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">
                            2018 - 2019 
                            <span class="divider">•</span> 
                            <span class="company">SENA</span>
                        </p>
                        <h3 class="info-title">Técnico en Asistencia Administrativa</h3>
                        <p>
                            Formación en administración y gestión de procesos, 
                            complementando las habilidades técnicas con capacidades 
                            administrativas y organizativas.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Timeline Item Structure

Timeline Item Components

Each timeline item contains:

.timeline-item - Main container with AOS animation
.timeline-content - Content wrapper
.data-info - Information container
.meta-date - Date range and company/institution
.info-title - Job title or degree (h3)
Description paragraph - Job responsibilities or education details

<div class="timeline-item" data-aos="fade-up">
    <div class="timeline-content">
        <div class="data-info">
            <p class="meta-date">
                Date Range <span class="divider">•</span> 
                <span class="company">Organization</span>
            </p>
            <h3 class="info-title">Position/Degree Title</h3>
            <p>Description of responsibilities or curriculum.</p>
        </div>
    </div>
</div>

AOS Animation Integration

Timeline items use AOS (Animate On Scroll) library for fade-up animations.

AOS Initialization

<!-- AOS CSS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

<!-- AOS JS -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

<script>
  AOS.init({
    once: true,
    duration: 600,
    easing: 'ease-out-quart'
  });
</script>

Animation Attributes

data-aos

attribute

default:"fade-up"

Animation type applied when element enters viewport

once

boolean

default:"true"

Animation triggers only once (doesn’t repeat on scroll up)

duration

number

default:"600"

Animation duration in milliseconds

easing

string

default:"ease-out-quart"

Animation easing function

Skills Grid Parameters

grid-template-columns

css

repeat(auto-fit, minmax(210px, 1fr)) - Auto-fitting columns with minimum 210px width

gap

css

default:"1.4rem 2rem"

Grid gap: 1.4rem vertical, 2rem horizontal

padding

css

default:"16px 20px"

Internal padding for skill badges

border-radius

css

default:"12px"

Rounded corners for skill badges

Hover Effects

Skill Badge Hover

.skills-list h4:hover {
  background: rgba(74, 144, 226, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Background opacity increases from 0.07 to 0.15
Element lifts 4px upward
Box shadow appears for depth

Key Features

Responsive grid for skills using CSS Grid auto-fit
Timeline layout for chronological experience/education
Scroll animations with AOS library
Icon integration with Tabler Icons for tech stacks
Hover interactions on skill badges
Semantic HTML with proper heading hierarchy
Consistent spacing using Bootstrap utilities

Getting Started

Customization

Components

Deployment

Resume Section Component

Resume Section Component

Section Structure

Skills Grid Layout

HTML Structure

CSS Grid Styling

Responsive Grid

Work Experience Timeline

Timeline HTML

Education Timeline

Education HTML

Timeline Item Structure

AOS Animation Integration

AOS Initialization

Animation Attributes

Skills Grid Parameters

Hover Effects

Skill Badge Hover

Key Features

Build docs developers (and LLMs) love

Getting Started

Customization

Components

Deployment

​Resume Section Component

​Section Structure

​Skills Grid Layout

​HTML Structure

​CSS Grid Styling

​Responsive Grid

​Work Experience Timeline

​Timeline HTML

​Education Timeline

​Education HTML

​Timeline Item Structure

​AOS Animation Integration

​AOS Initialization

​Animation Attributes

​Skills Grid Parameters

​Hover Effects

​Skill Badge Hover

​Key Features

Build docs developers (and LLMs) love

Resume Section Component

Section Structure

Skills Grid Layout

HTML Structure

CSS Grid Styling

Responsive Grid

Work Experience Timeline

Timeline HTML

Education Timeline

Education HTML

Timeline Item Structure

AOS Animation Integration

AOS Initialization

Animation Attributes

Skills Grid Parameters

Hover Effects

Skill Badge Hover

Key Features