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 a clean, modular CSS architecture organized into logical sections. The stylesheet (css/styles.css) follows a top-down structure that’s easy to navigate and maintain.

​
File Structure

The CSS is organized into these main sections:
  1. Reset - Normalizing styles
  2. Grid Layout - Page structure
  3. Menu - Navigation styling
  4. Main - Hero section
  5. Sections - Individual content areas (Habilidades, Proyectos, etc.)
  6. Media Queries - Responsive adjustments
The entire stylesheet is 300 lines of vanilla CSS with no preprocessors or frameworks.

​
Reset Section

The stylesheet begins with a universal box-sizing reset for consistent sizing:
styles.css:3-11
html {
    box-sizing: border-box;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}
This ensures padding and borders are included in element dimensions, preventing layout issues.

​
Body Styling

The body class creates the signature gradient background:
styles.css:14-19
.body {
    margin: 0;
    padding: 0;
    background: linear-gradient(#000000, #0069a8, #101828);
    color: white;
}
The gradient flows from pure black at the top, through the primary blue #0069a8, to a dark blue-gray at the bottom.

​
Color Palette

The portfolio uses a consistent color scheme throughout:
ColorHex ValueUsage
Pure Black#000000Gradient start
Primary Blue#0069a8Gradient middle, main accent
Dark Blue-Gray#101828Gradient end
Darker Blue#003ba8Hover effects, focus states
Light Blue#0094a8Drop shadows, accents
Almost Black#0f1011Header background
Whitewhite / #ffffffText, links

​
Modular Organization

Each major component is clearly separated with comments:
styles.css:21-57
/* Inicio del Grid Layout */
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "main main"
        "Habilidades Habilidades"
        "proyectos proyectos"
        "contacto contacto"
        "footer footer";
}
/* ... grid area assignments ... */
/* Fin del Grid Layout */

​
Design Patterns

​
1. Flexbox for Components

Flexbox is used for smaller UI components:
styles.css:69-80
.nav {
    display: flex;
    justify-content: space-between;
}

.menu {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    list-style: none;
    align-items: center;
}

​
2. CSS Grid for Layout

CSS Grid handles the overall page structure:
styles.css:22-24
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* ... */
}

​
3. Transitions and Animations

Smooth animations enhance user experience:
styles.css:195
transition: 0.3s ease-out;
styles.css:201
animation: fadeSlide 0.8s both;
All animations use animation-fill-mode: both to maintain end state and prevent flashing.

​
Class Naming Convention

The CSS uses semantic class names:
  • .body - Main body container
  • .layout - Grid layout wrapper
  • .header - Navigation header
  • .nav - Navigation container
  • .menu - Navigation list
  • .nav-link - Individual nav items
  • .section - Content section wrapper
  • .group - Icon group container
  • .img - Skill icons
  • .mi-foto - Profile photo
No BEM or complex naming methodology is used - names are straightforward and descriptive.

​
Browser Compatibility

The CSS uses modern features that work in all current browsers:
  • CSS Grid - Supported in all modern browsers (IE11+)
  • Flexbox - Universal support
  • CSS Animations - Full support
  • CSS Variables - Not used (could be added for easier theming)
Consider adding CSS custom properties (variables) for colors to make theme customization easier:
:root {
  --color-primary: #0069a8;
  --color-dark: #003ba8;
  --color-light: #0094a8;
}

​
Next Steps

Grid Layout

Deep dive into the CSS Grid system

Animations

Learn about keyframes and transitions

Responsive Design

Explore media queries and mobile layouts

Color Customization

Customize the color scheme

Build docs developers (and LLMs) love

Get started for freeTalk to us