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.

​
Get Up and Running

This guide will help you set up and view the portfolio on your local machine. No build tools or package managers required - just open and view!
1

Clone or Download the Repository

First, get a local copy of the portfolio files:
# Clone the repository
git clone <repository-url>
cd luis-llatas-portfolio
Or download the ZIP file and extract it to your preferred location.
Make sure you have all files including the /css, /img, and /svg directories for proper rendering.
2

Open in Your Browser

The simplest way is to open index.html directly:Option A: Direct File Opening
  • Navigate to the project folder
  • Double-click index.html
  • It will open in your default browser
Option B: Local Development Server (Recommended)Using a local server prevents CORS issues and mimics production better:
# Python 3
python -m http.server 8000
# Then visit http://localhost:8000
If images don’t load, a local server is required because some browsers restrict file:// protocol access to local resources.
3

Explore the Portfolio Sections

Once loaded, you’ll see the complete portfolio with these sections:Navigation Bar - Fixed at the top with links to:
  • Quien Soy (Who I Am)
  • Habilidades (Skills)
  • Proyectos (Projects)
  • Contáctame (Contact Me)
<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>
Hero Section - Profile introduction:
<section class="section">
    <h2>Desarrollador Full Stack</h2>
    <p>Soy un desarrollador web con experiencia en el desarrollo de aplicaciones web.</p>
</section>
Skills Display - Animated technology icons that fade in with staggered timingTry hovering over the skill icons to see the scale and brightness effects!
4

Test Responsive Design

The portfolio is fully responsive. Test it by:
  1. Desktop View - Default 2-column grid layout for the hero section
  2. Mobile View - Resize your browser to under 780px width
The layout automatically switches to a single column at the 780px breakpoint:
@media (max-width: 780px) {
    #main {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}
Open your browser’s DevTools (F12) and use the device toolbar to test different screen sizes.
5

Verify All Features Work

Test these interactive elements:Navigation Hover Effects
  • Hover over navigation links to see the animated underline
  • The animation expands from 0% to 100% width over 0.5 seconds
Keyboard Navigation
  • Press Tab to navigate through links
  • Notice the blue focus outline on focused elements
Skill Icons
  • Icons should fade in with staggered delays (0.2s to 0.8s)
  • Hover to see scale increase to 1.15x with brightness boost
If animations seem too fast or slow, you can adjust timing in css/styles.css - look for animation-duration and animation-delay properties.

​
What You’ll See

When properly loaded, you’ll experience:
  • Gradient Background: A smooth dark gradient from black (#000000) through blue (#0069a8) to dark blue-gray (#101828)
  • Fixed Header: Navigation stays at the top as you scroll (z-index: 99)
  • Profile Section: 3:2 grid ratio between text content and profile image
  • Animated Skills: 7 technology icons with fade-in and hover effects

​
Troubleshooting

  • Verify the /img and /svg folders exist in your project root
  • Check that file paths match exactly (case-sensitive on some systems)
  • Use a local server instead of opening index.html directly
  • Check browser console (F12) for 404 errors
  • Confirm css/styles.css exists and is in the correct location
  • Check the link tag in index.html line 8: <link rel="stylesheet" href="css/styles.css">
  • Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)

​
Next Steps

Now that your portfolio is running, you’re ready to customize it:

Customize Content

Replace placeholder text and add your own information

Customize Colors

Change the gradient and accent colors to match your brand

Customize Images

Replace profile photo and skill icons

Learn CSS Grid

Understand the layout system powering the portfolio
Since this is a static HTML/CSS site, any changes you make will be visible immediately after refreshing your browser!

Build docs developers (and LLMs) love

Get started for freeTalk to us