Content Sections

Overview

The portfolio is organized into four main content sections, each with a unique purpose and structure. These sections are wrapped in semantic HTML5 elements and positioned using CSS Grid.

Main Section (Hero)

The hero section introduces the developer with a two-column grid layout from index.html:26-34:

<main id="main">
    <section class="section">
        <h2>Desarrollador Full Stack</h2>
        <p>Soy un desarrollador web con experiencia en el desarrollo de aplicaciones web.</p>
    </section>
    <aside class="aside">
        <img src="/img/mi-foto.png" alt="Foto de perfil de Luis Eduardo" class="mi-foto">
    </aside>
</main>

Grid Layout

The main section uses a 3:2 column ratio defined in styles.css:117-122:

CSS Grid
Section Styling
Profile Image

#main {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
    margin-top: 80px;
}

3fr - Left column for text content (.section)
2fr - Right column for profile image (.aside)
margin-top: 80px - Offset for fixed header

.section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: auto;
    margin: 0 25px;
    text-align: center;
}

Centers the text content vertically and horizontally using flexbox.

.mi-foto {
    width: 350px;
    display: block;
    margin: 0 auto;
    margin: 2rem;
    filter: drop-shadow(1px 1px 30px #0094a8);
}

Fixed width of 350px
Centered with margin: 0 auto
Glowing blue drop shadow effect

The <aside> element is semantically correct for the profile image, as it represents content that is tangentially related to the main content.

Mobile Responsiveness

On screens below 780px (styles.css:144-169), the layout switches to single column:

@media (max-width: 780px) {
    #main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .mi-foto {
        display: block;
        margin: 0 auto;
        width: 60%;
    }
}

Habilidades Section (Skills)

The skills section displays technology icons with animations from index.html:36-47:

<section id="Habilidades">
    <h2>Habilidades</h2>
    <div class="group">
        <img src="/svg/html-5-svgrepo-com.svg" alt="html imagen" class="img">
        <img src="/svg/css-3-svgrepo-com.svg" alt="css imagen" class="img">
        <img src="/svg/javascript-svgrepo-com.svg" alt="javascript imagen" class="img">
        <img src="/svg/tailwind-svgrepo-com.svg" alt="tailwind imagen" class="img">
        <img src="/svg/microsoft-sql-server-logo-svgrepo-com.svg" alt="sqlserver imagen" class="img">
        <img src="/svg/mongodb-svgrepo-com.svg" alt="mongodb imagen" class="img">
        <img src="/svg/mysql-logo-svgrepo-com.svg" alt="mysql imagen" class="img">
    </div>
</section>

Technology Stack Displayed

Icon	Technology	File
🌐	HTML5	`html-5-svgrepo-com.svg`
🎨	CSS3	`css-3-svgrepo-com.svg`
⚡	JavaScript	`javascript-svgrepo-com.svg`
🎐	Tailwind CSS	`tailwind-svgrepo-com.svg`
🗄️	SQL Server	`microsoft-sql-server-logo-svgrepo-com.svg`
🍃	MongoDB	`mongodb-svgrepo-com.svg`
🐬	MySQL	`mysql-logo-svgrepo-com.svg`

Icon Container

The .group class creates a flexible, centered layout from styles.css:182-189:

.group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 0 10px 0 10px;
}

flex-wrap: wrap - Icons wrap to multiple rows on small screens
gap: 1.2rem - Consistent spacing between icons
justify-content: center - Centers the icon grid

Icon Animations

Each icon has fade-in and hover effects from styles.css:192-211:

.img {
    width: 50px;
    height: 50px;
    transition: 0.3s ease-out;
    box-sizing: content-box;
    animation: fadeSlide 0.8s both;
    scale: 1;
}

Staggered Animation Delays

Each icon animates in sequence (styles.css:225-251):

.img:nth-child(1) { animation-delay: 0.2s; }
.img:nth-child(2) { animation-delay: 0.3s; }
.img:nth-child(3) { animation-delay: 0.4s; }
.img:nth-child(4) { animation-delay: 0.5s; }
.img:nth-child(5) { animation-delay: 0.4s; }
.img:nth-child(6) { animation-delay: 0.3s; }
.img:nth-child(7) { animation-delay: 0.2s; }

The delays create a wave effect - icons fade in from both sides toward the center, then reverse back out.

Proyectos Section (Projects)

The projects section is a placeholder for future content from index.html:49-52:

<section id="proyectos">
    <h2>Mis Proyectos</h2>
    <div></div>
</section>

Current State

Empty <div> - Ready for project cards or gallery
Centered heading - Styled in styles.css:286-288
Minimal CSS - Only text-align defined

This section is intentionally empty, allowing developers to customize it with their own project showcases, galleries, or card grids.

Contacto Section (Contact)

The contact section is also a placeholder from index.html:54-56:

<section id="contacto">
    <h2>Contacto</h2>
</section>

Styling

Minimal styling from styles.css:292-294:

#contacto {
    text-align: center;
}

Consider adding:

Contact form
Email and social media links
Location information
Professional profiles (LinkedIn, GitHub)

The footer is defined in index.html:59-61:

<footer id="footer">
    <h2>Footer</h2>
</footer>

Styling

Simple centered text from styles.css:298-300:

#footer {
    text-align: center;
}

Section Summary

Section	ID	Purpose	Status	Lines
Main	`#main`	Hero intro with profile	✅ Complete	index.html:26-34
Habilidades	`#Habilidades`	Technology skills display	✅ Complete	index.html:36-47
Proyectos	`#proyectos`	Project showcase	🚧 Placeholder	index.html:49-52
Contacto	`#contacto`	Contact information	🚧 Placeholder	index.html:54-56
Footer	`#footer`	Footer content	🚧 Placeholder	index.html:59-61

Complete Structure Example

Here’s the full section hierarchy:

<div class="layout">
    <!-- Navigation -->
    <header class="header">...</header>
    
    <!-- Hero: Complete -->
    <main id="main">
        <section class="section">...</section>
        <aside class="aside">...</aside>
    </main>
    
    <!-- Skills: Complete -->
    <section id="Habilidades">
        <h2>Habilidades</h2>
        <div class="group">
            <img class="img" />  <!-- 7 technology icons -->
        </div>
    </section>
    
    <!-- Projects: Placeholder -->
    <section id="proyectos">
        <h2>Mis Proyectos</h2>
        <div></div>  <!-- Empty - ready for customization -->
    </section>
    
    <!-- Contact: Placeholder -->
    <section id="contacto">
        <h2>Contacto</h2>
        <!-- Empty - ready for contact form/info -->
    </section>
    
    <!-- Footer: Placeholder -->
    <footer id="footer">
        <h2>Footer</h2>
    </footer>
</div>

Next Steps

HTML Layout

Understand the overall grid structure

Navigation

Learn about the fixed navigation header

CSS Grid System

Explore the grid layout powering these sections

Customize Content

Learn how to add your own content to sections

Getting Started

Structure

Styling

Customization

Overview

Main Section (Hero)

Grid Layout

Mobile Responsiveness

Habilidades Section (Skills)

Technology Stack Displayed

Icon Container

Icon Animations

Staggered Animation Delays

Proyectos Section (Projects)

Current State

Contacto Section (Contact)

Styling

Footer Section

Styling

Section Summary

Complete Structure Example

Next Steps

HTML Layout

Navigation

CSS Grid System

Customize Content

Build docs developers (and LLMs) love

Getting Started

Structure

Styling

Customization

Documentation Index

​Overview

​Main Section (Hero)

​Grid Layout

​Mobile Responsiveness

​Habilidades Section (Skills)

​Technology Stack Displayed

​Icon Container

​Icon Animations

​Staggered Animation Delays

​Proyectos Section (Projects)

​Current State

​Contacto Section (Contact)

​Styling

​Footer Section

​Styling

​Section Summary

​Complete Structure Example

​Next Steps

HTML Layout

Navigation

CSS Grid System

Customize Content

Build docs developers (and LLMs) love

Overview

Main Section (Hero)

Grid Layout

Mobile Responsiveness

Habilidades Section (Skills)

Technology Stack Displayed

Icon Container

Icon Animations

Staggered Animation Delays

Proyectos Section (Projects)

Current State

Contacto Section (Contact)

Styling

Footer Section

Styling

Section Summary

Complete Structure Example

Next Steps