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.

​
What is This Portfolio?

This is a personal portfolio website for Luis Llatas, a Full Stack Developer. Built with pure HTML5 and CSS3, this project demonstrates fundamental web development skills without relying on frameworks or libraries. It’s designed to showcase a developer’s skills, projects, and contact information in a professional, visually appealing format.

​
Key Features

Responsive Grid Layout

CSS Grid-based layout that adapts to different screen sizes with mobile-first responsive design

Fixed Navigation

Sticky header with smooth scrolling navigation to different portfolio sections

Skills Showcase

Animated skill icons with hover effects and staggered fade-in animations

Gradient Background

Professional dark gradient theme from black through blue tones

​
Accessibility Features

The portfolio includes keyboard navigation support with custom focus states: 
/* Keyboard focus accessibility */
.nav-link a:focus {
    outline: 4px solid #003ba8;
    border-radius: 8px;
    outline-offset: 3px;
    transition-delay: 125ms;
}

​
Technology Stack

  • HTML5 - Semantic markup with proper document structure
  • CSS3 - Modern features including:
    • CSS Grid for layout management
    • Flexbox for component alignment
    • CSS Animations and transitions
    • Custom properties and gradients
    • Media queries for responsive design
This project intentionally avoids JavaScript frameworks and CSS libraries to demonstrate mastery of core web technologies.

​
Portfolio Structure

The portfolio is organized into distinct sections:

​
1. Hero Section (#main)

Introduces Luis as a Full Stack Developer with a profile photo and brief description. 
<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>

​
2. Habilidades (Skills)

Displays technology proficiency with animated icons for:
  • HTML5
  • CSS3
  • JavaScript
  • Tailwind CSS
  • SQL Server
  • MongoDB
  • MySQL

​
3. Proyectos (Projects)

Designated area for showcasing web development projects.

​
4. Contacto (Contact)

Contact section for potential clients or employers to reach out.

​
Grid Layout Architecture

The portfolio uses a sophisticated grid system defined in styles.css: 
.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "header header"
        "main main"
        "Habilidades Habilidades"
        "proyectos proyectos"
        "contacto contacto"
        "footer footer";
}
This creates a flexible, maintainable structure that’s easy to customize.

​
Target Audience

This documentation is for:
  • Junior developers learning portfolio development
  • Students understanding HTML/CSS architecture
  • Developers seeking a template for their own portfolio
  • Educators teaching web development fundamentals

​
Design Philosophy

The portfolio emphasizes:
  • Simplicity - Clean code without unnecessary complexity
  • Performance - No external dependencies or heavy frameworks
  • Accessibility - Keyboard navigation and semantic HTML
  • Maintainability - Well-organized CSS with clear naming conventions
The portfolio is written in Spanish (“es” language attribute) but the code structure and documentation principles apply universally.

​
Next Steps

Quick Start

Get the portfolio running locally in minutes

Customize Content

Learn how to personalize text and images

Customize Colors

Modify the color scheme and gradient

Customize Images

Replace photos and skill icons

Build docs developers (and LLMs) love

Get started for freeTalk to us