Architectural Portfolio - albertoeg.dev
Lead Architect & AI Engineer
Misión y Visión
Este portfolio no es solo una tarjeta de presentación; es un ecosistema técnico de demostración. El objetivo era construir una plataforma que sirviera como ejemplo real de arquitectura front-end moderna: modular, de alto rendimiento y puramente basada en estándares web.
Estrategia de Arquitectura
He utilizado Astro 5.1 como motor principal. La elección se basa en su patrón de Islands Architecture, lo que permite que el sitio sea 100% estático por defecto, hidratando selectivamente solo los componentes interactivos (como el switcher de lenguajes o las animaciones de la línea de tiempo).
- SSG (Static Site Generation): El sitio se pre-renderiza en el build, garantizando tiempos de respuesta instantáneos.
- Zero JS por defecto: Minimiza el costo de ejecución en el cliente, eliminando el "hydration bloat" típico de otros frameworks.
- Internationalization (i18n): Implementación robusta multicapa para soporte ES/EN escalable.
Ingeniería con IA (Agentic Coding)
La construcción de este ecosistema ha sido un ejercicio de Agentic Augmented Engineering. Utilizando Gemini 3 Flash junto con el motor Antigravity, el proceso de desarrollo ha trascendido el simple autocompletado de código.
Antigravity: El orquestador que permite al agente razonar sobre toda la base de código, ejecutar tests en tiempo real y proponer refactorizaciones arquitectónicas complejas.
Gemini 3 Flash: El cerebro cognitivo capaz de entender requerimientos técnicos profundos y generar layouts fluidos con precisión quirúrgica.
Performance & Core Web Vitals
La optimización no fue opcional, sino el driver principal del diseño. Monitorizamos continuamente con Unlighthouse para asegurar una puntuación de 100 en todas las métricas.
Técnicas aplicadas: Optimización de imágenes nativa de Astro, carga crítica de CSS inlined, y fuentes locales mediante `font-display: swap`.
Sistema de Diseño Propio (Vanilla Design)
En lugar de utilizar utilidades preconfiguradas, opté por un Sistema de Diseño "Vanilla" basado puramente en CSS nativo y tokens de diseño.
- Synthetic Dark Mode: Una paleta de colores de alto contraste basada en negros puros y acentos de energía (`#10B981`).
- Glassmorphism: Uso de `backdrop-filter` para crear jerarquía visual sin saturar la carga.
- Fluid Typography: Escalas tipográficas dinámicas calculadas con funciones matemáticas de CSS (`clamp`).
Calidad y Testing
La mantenibilidad se asegura mediante una estrategia de QA continua:
- Unit Testing: Implementación de tests unitarios con Vitest para los motores de traducción y lógica de negocio.
- Style Rules: Reglas estrictas de CSS y TypeScript para mantener una base de código coherente y escalable.
- UX Audit: Pruebas de usabilidad para garantizar que las animaciones de scroll no interfieran con la navegación fluida.
Infraestructura y CI/CD
La "tubería" de despliegue automatiza el ciclo completo desde el commit hasta producción.
- GitHub Actions & GHCR: Construcción y publicación automática de imágenes Docker optimizadas.
- Watchtower: Orquestador en el VPS que detecta nuevas versiones y actualiza los contenedores sin tiempo de inactividad (Zero Downtime).
- Nginx & Cloudflare: Capa de seguridad y rendimiento con proxy inverso, encriptación SSL estricta y aceleración global.