Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luisllatas-dev/portafolio-programador-web-junior/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The portfolio uses CSS Grid as the foundation for its layout system. Two grid implementations work together:
  1. Main Layout Grid - Controls overall page structure
  2. Hero Section Grid - Two-column layout for main content area
CSS Grid provides precise control over both rows and columns, making it ideal for this layout.

​
Main Layout Grid

The .layout container wraps the entire page and uses named grid areas:
styles.css:22-32
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "main main"
        "Habilidades Habilidades"
        "proyectos proyectos"
        "contacto contacto"
        "footer footer";
}

​
Grid Structure Breakdown

Columns: 2fr 1fr
  • Column 1: Takes up 2 fractional units (66.67% width)
  • Column 2: Takes up 1 fractional unit (33.33% width)
While two columns are defined, all grid areas span both columns. This creates a flexible foundation for future multi-column sections.
Grid Areas: Six named sections 
┌─────────────────────┐
│  header   header    │ ← Navigation bar
├─────────────────────┤
│   main     main     │ ← Hero section
├─────────────────────┤
│ Habilidades  ...    │ ← Skills showcase
├─────────────────────┤
│ proyectos   ...     │ ← Projects section
├─────────────────────┤
│ contacto    ...     │ ← Contact section
├─────────────────────┤
│  footer    footer   │ ← Footer
└─────────────────────┘

​
Grid Area Assignments

Each section is assigned to its grid area:
styles.css:34-56
.header {
    grid-area: header;
}

#main {
    grid-area: main;
}

#Habilidades {
    grid-area: Habilidades;
}

#proyectos {
    grid-area: proyectos;
}

#contacto {
    grid-area: contacto;
}

#footer {
    grid-area: footer;
}
Named grid areas make the layout self-documenting. You can see the page structure just by reading the CSS.

​
HTML Structure

The HTML maps directly to the grid:
index.html:12-62
<div class="layout">
    <header class="header">
        <!-- Navigation -->
    </header>

    <main id="main">
        <!-- Hero content -->
    </main>

    <section id="Habilidades">
        <!-- Skills -->
    </section>

    <section id="proyectos">
        <!-- Projects -->
    </section>

    <section id="contacto">
        <!-- Contact -->
    </section>

    <footer id="footer">
        <!-- Footer -->
    </footer>
</div>

​
Hero Section Grid

The #main section uses a nested grid for its two-column layout:
styles.css:117-122
#main {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
    margin-top: 80px;
}

​
Column Distribution

┌──────────────────┬─────────────┐
│                  │             │
│   Text Content   │   Profile   │
│   (3fr - 60%)    │   Image     │
│                  │  (2fr-40%)  │
│                  │             │
└──────────────────┴─────────────┘
The text section gets 60% of the width (3 out of 5 fractional units)The image section gets 40% of the width (2 out of 5 fractional units)

​
Margin Top Spacing

styles.css:121
margin-top: 80px;
This 80px top margin creates space for the fixed header (which has similar height), preventing content from being hidden behind it.

​
Grid vs Flexbox

This portfolio strategically uses both layout systems:
FeatureGridFlexbox
Page Structure✅ Main layout container❌
Hero Section✅ Two-column layout❌
Navigation❌✅ Horizontal menu
Skills Icons❌✅ Wrapping icon grid
Content Sections❌✅ Vertical centering
Rule of thumb: Use Grid for two-dimensional layouts (rows AND columns), Flexbox for one-dimensional layouts (single row OR column).

​
Advantages of This Grid System

​
1. Semantic and Readable

grid-template-areas:
    "header header"
    "main main"
The layout structure is immediately clear.

​
2. Easy Reordering

You can change the visual order without touching HTML: 
grid-template-areas:
    "header header"
    "proyectos proyectos"  /* Projects moved up */
    "main main"
    "Habilidades Habilidades"

​
3. Responsive Flexibility

Grid areas naturally adapt to different screen sizes.

​
4. No Positioning Hacks

No floats, absolute positioning, or clearfix needed.

​
Customization Examples

​
Add a Sidebar

Modify the grid to create a sidebar layout: 
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "sidebar Habilidades"
        "sidebar proyectos"
        "footer footer";
}

.sidebar {
    grid-area: sidebar;
}

​
Full-Width Hero with Contained Content

.layout {
    grid-template-areas:
        "header header header"
        "main main main"          /* Full width */
        ". Habilidades ."           /* Contained */
        ". proyectos .";
    grid-template-columns: 1fr 800px 1fr;  /* Max content width */
}
When adding new sections, always assign them a grid-area property or they’ll auto-place outside the defined areas.

​
Browser Support

CSS Grid is supported in all modern browsers:
  • ✅ Chrome 57+ (March 2017)
  • ✅ Firefox 52+ (March 2017)
  • ✅ Safari 10.1+ (March 2017)
  • ✅ Edge 16+ (October 2017)
  • ⚠️ IE 11 (partial support with -ms- prefix)
For IE11 support, you’d need to use the older grid syntax with -ms-grid and explicit row/column placement. However, IE11 usage is now negligible.

​
Next Steps

CSS Architecture

Learn about the overall CSS organization

Responsive Design

Explore how the grid adapts to mobile

HTML Layout

See how HTML implements the grid

Animations

Add motion to the grid

Build docs developers (and LLMs) love

Get started for freeTalk to us