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

# 🏗️ Architecture and Routing

> Static generation, content collections, and islands of interactivity.

The main HUB leverages the **Astro** architecture to deliver a near-instant loading website through Static Site Generation (SSG), integrating interactivity only where strictly necessary using React components.

## 🛣️ Dynamic Static Routing (SSG)

To generate the individual pages for each case study (such as the Transactional Engine or the Pipeline), the portfolio uses Astro's **Content Collections**.

The `[id].astro` file acts as a master template that reads the projects' Markdown files during the `build` time and generates static HTML routes. The algorithm dynamically filters the directory to ignore the translation folder (EN language) and exclusively generate the base language routes (ES).

```javascript theme={null}
// Snippet from pages/proyectos/[id].astro
export async function getStaticPaths() {
  const proyectos = await getCollection('proyectos', ({ id }) => {
    return !id.startsWith('en/'); // Ignores files from the en/ folder
  });
  
  return proyectos.map(proyecto => ({
    params: { id: proyecto.id },
    props: { proyecto },
  }));
}
```

## 🏝️ Islands of Interactivity (Astro Islands)

To maintain the speed of a static site while adding fluid interactivity, the HUB implements the **Astro Islands** architecture. The initial HTML is statically rendered on the server, and only the dynamic components are hydrated with JavaScript on the client via client directives.

### ⚡ Selective Hydration with React

Components such as the language selector (`HeroDual`) and the tech filter matrix (`TechMatrix`) are loaded interactively using the `client:load` directive. This ensures that the React JavaScript is only downloaded and executed for these specific components, keeping the rest of the page extremely lightweight.

```javascript theme={null}
// Usage of reactive islands in index.astro
---
import HeroDual from '../components/hub/HeroDual.jsx';
import TechMatrix from '../components/hub/TechMatrix.jsx';
---

<Layout>
    {/* Client-hydrated components */}
    <HeroDual client:load lang={lang} />
    <TechMatrix client:load lang={lang} />
</Layout>
```