Mi Sitio Web | Proyectos

Cuando decidí construir mi nuevo sitio web, tenía una premisa clara: no quería hacer un portafolio más, quería construir un laboratorio. Un espacio digital que no solo mostrara de lo que soy capaz de hacer, sino que el propio sitio fuera la demostración de esas capacidades.

Quería que fuera ridículamente rápido, bilingüe desde su concepción, seguro a nivel de tipos y visualmente inmersivo, todo sin sacrificar un ápice de accesibilidad. Así es como diseñé la arquitectura de este proyecto.

1. La Búsqueda del Rendimiento Radical: Por qué elegí Astro

El problema con la mayoría de los frameworks modernos (como React puro o Next.js) es que a menudo envían demasiados “megabytes” de JavaScript al navegador solo para mostrar una página de inicio estática. Esto afecta los tiempos de carga, especialmente en dispositivos móviles.

La solución fue Astro v5. Astro cambia las reglas del juego con su arquitectura de “Islas”. Por defecto, el sitio se compila como HTML estático (Zero JS). El navegador no tiene que descargar ni ejecutar pesados paquetes de JavaScript a menos que haya un componente interactivo que lo necesite estrictamente. Esto garantiza puntuaciones perfectas en Core Web Vitals y una carga casi instantánea, crucial para la retención del usuario.

Para mantener la sensación de fluidez de una Single Page Application (SPA) sin perder los beneficios de Astro, implementé el ClientRouter. Esto permite transiciones de página suaves (View Transitions) sin recargar el navegador, dando una sensación de aplicación nativa.

2. Escribir una vez, renderizar en dos idiomas: Arquitectura i18n

Soportar español e inglés no podía ser un “parche” de última hora; tenía que ser el núcleo del enrutamiento.

Para evitar la pesadilla de duplicar código, diseñé un patrón de abstracción:

Las rutas físicas (src/pages/ para español y src/pages/en/ para inglés) actúan únicamente como “enrutadores”.
La lógica real de cada página vive en src/components/pages/.
Esto significa que si actualizo el diseño de la página de inicio, lo hago en un solo archivo, y ambas versiones idiomáticas heredan el cambio inmediatamente.

Un diccionario centralizado fuertemente tipado (ui.ts) asegura que cada texto de la interfaz se traduzca correctamente, mientras que el componente SEO inyecta dinámicamente etiquetas hreflang para que Google entienda exactamente qué versión mostrar a cada usuario sin penalizar por contenido duplicado.

3. El Sistema de Diseño: Tailwind CSS v4 y la obsesión por el Modo Oscuro

Para el diseño, utilicé la versión más reciente de Tailwind CSS v4. Su nuevo motor simplifica drásticamente la configuración (ahora vive enteramente en CSS puro usando @theme) y permite un desarrollo extremadamente ágil bajo el principio Mobile-First.

Pero el verdadero reto de UX era el Modo Oscuro. Nada arruina más una experiencia que el temido Flash of Unstyled Content (FOUC) —ese destello blanco en la pantalla antes de que el sitio se dé cuenta de que prefieres el modo oscuro—. Para resolver esto, escribí un script de bloqueo de renderizado súper ligero directamente en el <head> del HTML. Este script consulta el localStorage o las preferencias del sistema y aplica el tema antes de que el navegador pinte el primer píxel en la pantalla.

Además, introduje un sistema de Theme Forcing: páginas inmersivas, como mi sección de enlaces (Link.me), pueden bloquearse forzosamente en modo oscuro para preservar la intención artística original sin importar la preferencia global del usuario.

4. Demostrando Músculo con JavaScript Crudo

Un buen framework te da estructura, pero el JavaScript puro (Vanilla JS) demuestra verdadero dominio. Decidí incluir dos piezas técnicas complejas hechas desde cero:

El Motor de Galaxia 3D: En lugar de importar una pesada librería 3D, construí un motor de partículas directamente sobre un <canvas> HTML5. Utiliza matemáticas de brazos espirales logarítmicos, proyección isométrica 3D y renderizado a 60 fps (vía requestAnimationFrame) para crear un fondo dinámico y fascinante. Es una demostración de rendimiento gráfico directo en el navegador.
Detección de Colisiones a 60fps: El carrusel de tecnologías en la página de inicio no usa simples efectos de hover en CSS. Implementé un algoritmo de raycasting (document.elementFromPoint) que se ejecuta en cada frame. Esto permite que el sitio sepa exactamente sobre qué ícono tecnológico está tu cursor, incluso si no lo mueves y es el carrusel el que se desplaza debajo de él. Cuando ocurre la colisión, se inyecta dinámicamente el color exacto de la marca (ej. sombra naranja para HTML, azul para TypeScript).

5. Contenido como Datos: Zod y Content Collections

Finalmente, la gestión del blog y el portafolio tenía que ser a prueba de errores. Utilizo las Content Collections de Astro respaldadas por esquemas de Zod.

Esto transforma mis archivos Markdown en una base de datos segura. Si intento publicar un proyecto y olvido agregar el campo icon o el description, el proceso de build falla y me avisa de inmediato. Esto elimina los errores silenciosos en producción. Además, un plugin personalizado intercepta el Markdown durante la compilación para calcular automáticamente el tiempo de lectura de cada artículo.

Conclusión

Este sitio web es mi carta de presentación. No solo por el contenido que alberga, sino porque cada capa de su arquitectura —desde la ausencia de JavaScript innecesario hasta las matemáticas del motor 3D y la seguridad de tipos del contenido— fue diseñada intencionalmente para construir una herramienta digital robusta, mantenible y excepcionalmente rápida.