Rubén Albiach ⚡️
Así monté mi portfolio

Así monté mi portfolio


Nuevo
astro docker devops

Introducción: “En casa de herrero…”

Hay un refrán que dice: “en casa de herrero, cuchillo de palo”. Como Technical Lead con más de una década de experiencia construyendo sistemas críticos y escalables en entornos corporativos, a menudo dedicamos tanta energía a la arquitectura de nuestros clientes que nuestra propia presencia digital queda en segundo plano.

Este proyecto nace con un objetivo claro: romper esa inercia. No quería simplemente usar una plantilla prefabricada. Quería tratar mi portfolio personal como trato cualquier proyecto de transformación tecnológica: como un producto de ingeniería robusto, automatizado y eficiente.

En este artículo, quiero desglosar el stack tecnológico que he elegido y, lo más importante, el porqué de cada decisión arquitectónica.

1. El Frontend: Rendimiento y Simplicidad con Astro

Viniendo de un background fuerte en Java Enterprise y arquitecturas complejas, buscaba algo que ofreciera rendimiento puro sin la sobrecarga habitual.

La elección fue Astro.

A diferencia de las SPAs (Single Page Applications) tradicionales que envían grandes bundles de JavaScript al cliente, Astro apuesta por una arquitectura de “Islands” (Islas) y HTML estático por defecto. Esto significa que el sitio se renderiza en el servidor (o en tiempo de compilación) y solo envía JavaScript cuando es estrictamente necesario (por ejemplo, para el botón de cambio de tema).

El resultado: puntuaciones perfectas en Lighthouse y una carga instantánea, algo vital para la experiencia de usuario hoy en día.

2. Diseño y UX: Tailwind CSS + DaisyUI

Para la interfaz, opté por la utilidad y la semántica. Tailwind CSS me permite prototipar rápido directamente en el HTML, mientras que DaisyUI añade una capa de abstracción de componentes (botones, cards, navbar) que acelera el desarrollo sin ensuciar el código.

El reto del “Modo Oscuro”: Uno de los puntos técnicos interesantes fue implementar un sistema de temas (Light/Dark) robusto. Para evitar el temido FOUC (Flash of Unstyled Content) —ese parpadeo blanco antes de que cargue el tema oscuro—, implementé un script de bloqueo inline en el <head> que lee las preferencias del sistema operativo y localStorage antes de pintar el DOM, manipulando los atributos data-theme al vuelo.

3. Backend Headless: Desacoplando el contenido

Para gestionar los artículos de este blog y mis proyectos, necesitaba un CMS, pero no quería acoplarme a un monolito como WordPress.

Elegí una arquitectura Headless con Strapi.

  • Strapi vive en su propio contenedor Docker.
  • Expone una API REST segura.
  • Mi frontend (Astro) consume esta API durante el proceso de build.

Esto mejora la seguridad (la base de datos no está expuesta a internet) y el rendimiento (el usuario final consume HTML estático, no hace consultas a la BD en cada visita).

4. Infraestructura: Filosofía “Container First”

Aquí es donde aplico mi experiencia en operaciones. Todo el proyecto está orquestado mediante Docker Compose.

He estructurado el proyecto para que el entorno de desarrollo sea un espejo del de producción. Gracias a Docker, evito los típicos problemas de versiones de Node.js o dependencias del sistema. Todo corre aislado: el frontend, el backend, la base de datos (PostgreSQL) y el proxy inverso (Nginx).

5. CI/CD: Automatización Profesional

No concibo desplegar software manualmente hoy en día. He implementado un pipeline de Integración y Despliegue Continuo (CI/CD) usando GitHub Actions.

El flujo es completamente automático:

  1. Code: Hago un push a la rama principal.
  2. Build: GitHub Actions levanta un entorno, instala dependencias (usando npm ci y caché inteligente) y ejecuta los tests.
  3. Package: Se construyen las imágenes de Docker optimizadas (Multi-stage builds).
  4. Publish: Las imágenes se etiquetan y se suben a GitHub Container Registry (GHCR).
  5. Deploy: El servidor detecta la nueva versión y actualiza los contenedores sin tiempo de inactividad.

Conclusión

Este portfolio es mi “campo de pruebas”. Es el lugar donde experimento con tecnologías modernas (como Astro o Edge Computing) aplicando la disciplina y los estándares de calidad que requiere el software empresarial de alto nivel.

El código fuente está disponible en mi perfil de GitHub para quien quiera curiosear cómo está montado el sistema de CI/CD o la configuración de Docker.

🛠 Ficha Técnica

  • Frontend: Astro + Tailwind CSS + DaisyUI
  • CMS: Strapi (Headless)
  • Base de Datos: PostgreSQL
  • Contenedorización: Docker & Docker Compose
  • CI/CD: GitHub Actions + GHCR
  • Servidor Web: Nginx (Reverse Proxy)