> ## 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.

# 🏗️ Arquitectura y Enrutamiento

> Generación estática, colecciones de contenido e islas de interactividad.

El HUB principal aprovecha la arquitectura en **Astro** para entregar un sitio web de carga casi instantánea mediante Generación Estática (SSG), integrando interactividad solo donde es estrictamente necesario mediante componentes de React.

## 🛣️ Enrutamiento Dinámico Estático (SSG)

Para generar las páginas individuales de cada caso de estudio (como el Motor Transaccional o el Pipeline), el portafolio utiliza las **Content Collections** de Astro.

El archivo `[id].astro` actúa como una plantilla maestra que lee los archivos Markdown de los proyectos durante el `build` o tiempo de compilación y genera rutas HTML estáticas. El algoritmo filtra dinámicamente el directorio para ignorar la carpeta de traducciones (idioma EN) y generar únicamente las rutas del idioma base (ES).

```javascript theme={null}
// Fragmento de pages/proyectos/[id].astro
export async function getStaticPaths() {
  const proyectos = await getCollection('proyectos', ({ id }) => {
    return !id.startsWith('en/'); // Ignora los archivos de la carpeta en/
  });
  
  return proyectos.map(proyecto => ({
    params: { id: proyecto.id },
    props: { proyecto },
  }));
}
```

## 🏝️ Islas de Interactividad (Astro Islands)

Para mantener la velocidad de un sitio estático pero añadir interactividad fluida, el HUB implementa la arquitectura de **Islas de Astro**. El HTML inicial se renderiza de forma estática en el servidor, y solo los componentes dinámicos se hidratan con JavaScript en el cliente mediante directivas de cliente.

### ⚡ Hidratación Selectiva con React

Los componentes como el selector de idiomas (`HeroDual`) y la matriz de filtros tecnológicos (`TechMatrix`) se cargan de forma interactiva utilizando la directiva `client:load`. Esto asegura que el JavaScript de React solo se descargue y ejecute para estos componentes específicos, manteniendo el resto de la página extremadamente ligera.

```javascript theme={null}
// Uso de islas reactivas en index.astro
---
import HeroDual from '../components/hub/HeroDual.jsx';
import TechMatrix from '../components/hub/TechMatrix.jsx';
---

<Layout>
    {/* Componentes hidratados en el cliente */}
    <HeroDual client:load lang={lang} />
    <TechMatrix client:load lang={lang} />
</Layout>
```