🏗️ 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).

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

// 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>