> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/GmzQzvZ/portafolio/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> A modern, responsive portfolio template for developers to showcase their skills, projects, and experience

# Portfolio Template

A clean, professional portfolio template designed for developers who want to showcase their work effectively. Built with modern web technologies and featuring a sleek dark theme with smooth animations.

<CardGroup cols={3}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get up and running in minutes
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Detailed setup instructions
  </Card>

  <Card title="Customization" icon="palette" href="/customization/content">
    Make it your own
  </Card>
</CardGroup>

## What's Included

This portfolio template comes with everything you need to create a professional online presence:

<AccordionGroup>
  <Accordion title="Hero Section with Profile">
    A fixed sidebar profile section featuring:

    * Circular profile image with accent border
    * Your name and tagline
    * Social media links (GitHub, LinkedIn, WhatsApp, Email)
    * Responsive offcanvas menu for mobile devices
  </Accordion>

  <Accordion title="About Section">
    Comprehensive introduction including:

    * Professional bio and background
    * Personal information (age, location, contact)
    * Services you offer with icon cards
    * Clean typography for readability
  </Accordion>

  <Accordion title="Resume Section">
    Professional experience display with:

    * Technical skills grid with technology icons
    * Timeline-based work experience
    * Education history with details
    * AOS scroll animations
  </Accordion>

  <Accordion title="Portfolio Grid">
    Showcase your projects with:

    * Responsive grid layout
    * Project thumbnails with hover effects
    * Category badges
    * Direct links to live demos or repositories
  </Accordion>

  <Accordion title="Contact Section">
    Multiple ways to connect:

    * Contact form with WhatsApp integration
    * Contact information cards (phone, email, location)
    * Social media buttons
    * Hover animations on interactive elements
  </Accordion>
</AccordionGroup>

## Design Features

<CardGroup cols={2}>
  <Card title="Responsive Layout" icon="mobile">
    Adapts seamlessly from desktop to mobile with a fixed sidebar that converts to an offcanvas menu on smaller screens.
  </Card>

  <Card title="Modern Dark Theme" icon="moon">
    Professional color scheme with custom CSS variables:

    * Accent color: `#4A90E2`
    * Dark background: `#0D1117`
    * Secondary: `#1A1F2E`
  </Card>

  <Card title="Smooth Animations" icon="wand-magic-sparkles">
    Built-in AOS (Animate on Scroll) library for elegant fade-in effects and hover transitions throughout the site.
  </Card>

  <Card title="Icon Navigation" icon="compass">
    Vertical navigation bar with Tabler Icons that highlights the active section as users scroll through the page.
  </Card>
</CardGroup>

## Technology Stack

<CodeGroup>
  ```html HTML Structure theme={null}
  - Semantic HTML5
  - Bootstrap 5.2.3 framework
  - Meta tags for SEO and social sharing
  - Accessibility features (ARIA labels, alt text)
  ```

  ```css CSS Styling theme={null}
  - Custom CSS with CSS variables
  - Google Fonts (Inter, Nunito Sans)
  - Tabler Icons webfont
  - Responsive grid layouts
  - Smooth transitions and animations
  ```

  ```javascript JavaScript Features theme={null}
  - Bootstrap bundle (tooltips, offcanvas)
  - AOS (Animate on Scroll) library
  - Form submission to WhatsApp
  - Scroll spy navigation
  ```
</CodeGroup>

## Portfolio Sections Overview

The template is organized into distinct sections accessible through the navigation:

| Section       | ID           | Purpose                               |
| ------------- | ------------ | ------------------------------------- |
| **Home**      | `#home`      | Hero introduction with call-to-action |
| **About**     | `#about`     | Bio, personal info, and services      |
| **Resume**    | `#resume`    | Skills, work experience, education    |
| **Portfolio** | `#portfolio` | Project showcase with images          |
| **Contact**   | `#contact`   | Contact form and information          |

<Tip>
  The template uses Bootstrap's ScrollSpy feature to automatically update the navigation as users scroll through sections.
</Tip>

## Browser Support

This template works across all modern browsers:

* Chrome/Edge (latest)
* Firefox (latest)
* Safari (latest)
* Mobile browsers (iOS Safari, Chrome Mobile)

<Note>
  No build process required - just open `index.html` in any browser to preview your portfolio!
</Note>

## Next Steps

<Steps>
  <Step title="Download the template">
    Get started by downloading or cloning the template files to your local machine.
  </Step>

  <Step title="Customize your content">
    Update the HTML with your personal information, projects, and images.
  </Step>

  <Step title="Deploy online">
    Host your portfolio on GitHub Pages, Netlify, or any static hosting service.
  </Step>
</Steps>

Ready to build your portfolio? Head over to the [Quick Start](/quickstart) guide to begin customizing your site in minutes.