> ## Documentation Index
> Fetch the complete documentation index at: https://alan-ramirez-dev.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 🎯 Introducción del Proyecto

> Ecosistema central interactivo y orquestador de microservicios (Frontend).

¡Te doy la bienvenida a la documentación de mi portafolio de desarrollo web!

Este proyecto actúa como un HUB central diseñado bajo una arquitectura estática y modular, sirviendo como punto de integración para cuatro microservicios independientes. Su propósito es demostrar mis capacidades en ingeniería de software, patrones de diseño y despliegues fullstack integrando múltiples tecnologías.

## 🚀 Características del Proyecto & UX Avanzada

<CardGroup cols={2}>
  <Card title="Arquitectura Híbrida Estática" icon="bolt">
    Generación de sitio estático (SSG) con Astro para asegurar tiempos de carga casi instantáneos y un rendimiento óptimo.
  </Card>

  <Card title="Islas de Interactividad" icon="react">
    Integración de componentes dinámicos en React hidratados mediante `client:load` para un manejo eficiente del estado del lado del cliente.
  </Card>

  <Card title="Consumo de Microservicios" icon="network">
    Contratos de comunicación homologados bajo versionado estricto (`/api/v1/`) interactuando con backends en Java y PHP.
  </Card>

  <Card title="Accesibilidad Web (a11y)" icon="accessibility">
    Atributos ARIA y semántica HTML nativa para soportar navegación por teclado y lectores de pantalla.
  </Card>
</CardGroup>

## 🛠️ Stack Tecnológico

| Tecnología       | Propósito en el proyecto                                                    |
| :--------------- | :-------------------------------------------------------------------------- |
| **Astro**        | Generación de sitio estático (SSG), colecciones de contenido y enrutamiento |
| **React**        | Componentes interactivos, hidratación y manejo de estado complejo           |
| **Tailwind CSS** | Estilos globales con variables CSS puras bajo una paleta oscura             |
| **Axios**        | Clientes HTTP configurados con interceptores de seguridad                   |

## 📈 Casos de Estudio Destacados

El HUB integra y orquesta múltiples microservicios (desplegados de forma independiente) en una sola interfaz fluida:

<AccordionGroup>
  <Accordion title="1. Sandbox Interactivo: Motor Transaccional" icon="workflow">
    * **Integración Viva en la Nube:** Consumo de peticiones asíncronas bajo semántica REST hacia un backend robusto en Spring Boot 3 (Java 21).
    * **UI Reactiva Defensiva:** Emite *Custom Events* para congelar la navegación global durante los ciclos de red activos.
    * **Logger de Red Integrado:** Módulo de observabilidad acoplado a la interfaz que despliega visualmente el ciclo de vida completo de los intercambios HTTP.
  </Accordion>

  <Accordion title="2. Generador Dinámico de Reportes" icon="file-spreadsheet">
    * **Consistencia de Contexto:** Inyección dinámica de la zona horaria del cliente (`Intl.DateTimeFormat().resolvedOptions().timeZone`) hacia el motor de renderizado PHP.
    * **UX Perimetral:** Prevención de Race Conditions interceptando códigos HTTP 429 (Rate Limiting).
  </Accordion>

  <Accordion title="3. Pipeline ETL: Ingesta Masiva" icon="arrow-right-left">
    * **Sincronización Inteligente de Red:** Frontend defensivo que consulta activamente (polling) la salud del motor backend.
    * **Terminal SQL:** Consola interactiva embebida que evalúa la robustez del sistema y el WAF simulado del backend.
  </Accordion>

  <Accordion title="4. Micro-Frontend: Gestión de Identidad (IAM)" icon="user-cog">
    * **Control de Accesos:** Consumo de backend en PHP (Laravel 13) evaluando roles (`admin`, `auditor`, `operador`).
    * **Cliente HTTP Inteligente:** Interceptores de Axios para la inyección automática y segura de JWT.
    * **Experiencia Integrada:** Componentes de autenticación operando como una aplicación de una sola página (SPA).
  </Accordion>
</AccordionGroup>

## 💻 Comandos de Desarrollo

Todos los comandos se ejecutan desde la raíz del proyecto utilizando `pnpm`:

```bash theme={null}
# Instalar dependencias
pnpm install

# Iniciar servidor local (localhost:4321)
pnpm dev

# Compilar sitio estático optimizado para producción
pnpm build

# Previsualizar compilación localmente
pnpm preview
```