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 features a fixed navigation header that stays at the top of the page while scrolling. It includes a logo and navigation links to all major sections.

​
HTML Structure

The navigation is defined in index.html:13-23: 
<header class="header">
    <nav class="nav">
        <h1><img src="https://placehold.co/140x40/f0f0f0/333?text=Luis+Llatas" alt="Luis Llatas"></h1>
        <ul class="menu">
            <li class="nav-link"><a href="#main">Quien Soy</a></li>
            <li class="nav-link"><a href="#Habilidades">Habilidades</a></li>
            <li class="nav-link"><a href="#proyectos">Proyectos</a></li>
            <li class="nav-link"><a href="#contacto">Contáctame</a></li>
        </ul>
    </nav>
</header>

​
Structure Breakdown

  • <header class="header">: Container with fixed positioning
  • <nav class="nav">: Flexbox container for logo and menu
  • <h1>: Contains logo image (currently a placeholder)
  • <ul class="menu">: Unordered list of navigation items
  • <li class="nav-link">: Each menu item
  • <a href="#...">: Anchor links for smooth scrolling

​
CSS Styling

The header is fixed to the top of the viewport in styles.css:61-67:
.header {
    background-color: #0f1011;
    padding: 0 5rem;
    position: fixed;
    width: 100%;
    z-index: 99;
}
Key Properties:
  • position: fixed - Stays at top while scrolling
  • width: 100% - Spans entire viewport width
  • z-index: 99 - Ensures header appears above other content
  • padding: 0 5rem - Horizontal spacing

​
Z-Index and Layering

The z-index: 99 ensures the header remains visible above all other content. This is critical for fixed navigation to avoid being hidden behind sections.
styles.css:66
z-index: 99;
The main content section compensates with styles.css:121: 
#main {
    margin-top: 80px;  /* Prevents content from hiding under fixed header */
}

​
Smooth Scrolling

The navigation uses anchor links that smoothly scroll to sections: 
<a href="#main">Quien Soy</a>
<a href="#Habilidades">Habilidades</a>
<a href="#proyectos">Proyectos</a>
<a href="#contacto">Contáctame</a>
Each href targets an id on the page:
  • #main → <main id="main"> (index.html:26)
  • #Habilidades → <section id="Habilidades"> (index.html:36)
  • #proyectos → <section id="proyectos"> (index.html:49)
  • #contacto → <section id="contacto"> (index.html:54)

​
Interactive Effects

Basic link styling from styles.css:82-85: 
.nav-link a {
    text-decoration: none;
    color: white;
}

​
Hover Animation

An animated underline appears on hover (styles.css:96-104): 
.nav-link:hover::after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: #003ba8;
    display: block;
    animation-name: ampliar-anchura;
    animation-duration: 0.5s;
}

@keyframes ampliar-anchura {
    from { width: 0%; }
    to { width: 100%; }
}
The animation uses a CSS ::after pseudo-element that grows from 0% to 100% width, creating a smooth underline effect.

​
Accessibility Features

The navigation includes keyboard accessibility with focus styles from styles.css:88-93: 
.nav-link a:focus {
    outline: 4px solid #003ba8;
    border-radius: 8px;
    outline-offset: 3px;
    transition-delay: 125ms;
}

​
Focus Features:

  • 4px blue outline - Visible focus indicator
  • 8px border radius - Rounded corners for aesthetic
  • 3px offset - Space between outline and text
  • 125ms delay - Smooth transition timing
Users can navigate the menu using the Tab key, and each link displays a clear focus indicator for accessibility compliance.

​
Mobile Responsiveness

On smaller screens (styles.css:166-168), the padding is removed: 
@media (max-width: 780px) {
    .header {
        padding: 0;
    }
}
This prevents horizontal overflow on mobile devices.

​
Visual Example

Here’s how the navigation structure works together: 
<header class="header">              <!-- Fixed container -->
    <nav class="nav">                   <!-- Flexbox: logo | menu -->
        <h1><img src="..." /></h1>      <!-- Left: Logo -->
        <ul class="menu">               <!-- Right: Menu items -->
            <li class="nav-link">       <!-- Flex items with gap -->
                <a href="#main">...</a> <!-- Smooth scroll links -->
            </li>
        </ul>
    </nav>
</header>

​
Next Steps

HTML Layout

Learn about the overall grid layout structure

Content Sections

Explore the main content sections

CSS Animations

Discover navigation hover animations

Responsive Design

See how navigation adapts to mobile

Build docs developers (and LLMs) love

Get started for freeTalk to us