Acerca de esta Página
Este blog está construido utilizando Next.js y Next-Intl para la internacionalización. Presenta publicaciones escritas tanto en inglés como en español, atendiendo a una audiencia diversa interesada en la investigación en IA.
Stack de desarrollo
El núcleo del proyecto. Utilizo Next.js desplegado en Vercel, lo que me permite superar las limitaciones de los sitios estáticos tradicionales. Aprovecho el renderizado híbrido (Server Components + Static Generation) y su Edge Network para ofrecer una web instantánea, segura y escalable globalmente.
El lenguaje que conecta todo. Lo utilizo tanto para la lógica de interfaz como para las simulaciones interactivas (como los algoritmos genéticos) que corren directamente en tu navegador.
La librería de interfaz. Me permite pensar en la web como piezas de LEGO (componentes) reutilizables. Desde la barra de navegación hasta las tarjetas de los posts, todo es un componente modular que gestiona su propio estado y lógica.
El repositorio de código. Sirve como la 'fuente de la verdad' para el control de versiones. Alojar el código aquí garantiza transparencia y permite a la comunidad auditar o aprender de la fuente, alineándose con los principios de Ciencia Abierta.
La plataforma de infraestructura. Se conecta directamente a GitHub para construir y desplegar el sitio. Provee la red global (Edge Network) necesaria para una entrega de contenido de alto rendimiento y soporta las funciones dinámicas de servidor de Next.js.
La capa de internacionalización. Gestiona el enrutamiento dinámico (/es, /en) y la carga optimizada de diccionarios JSON compatible con Server Components. Es lo que permite que este blog sea nativamente bilingüe sin sacrificar el rendimiento estático.
CSS en esteroides. Me permite escribir estilos CSS reales dentro de mis componentes de JavaScript. Es la herramienta clave que gestiona el sistema de temas (modo Dark/Light) y asegura que los estilos de un componente no rompan los de otro.
El cerebro detrás del texto. Es el procesador que lee mis archivos Markdown y construye un 'Árbol de Sintaxis Abstracta' (AST). Básicamente, entiende la estructura de mis apuntes y permite transformarlos en HTML seguro gracias a sus plugins: remark-gfm, remark-math,remark-toc,remark-html, remark-prism y remark-rehype.
La cadena de montaje del HTML. Una vez que Remark procesa el Markdown, el ecosistema Rehype toma el control para transformar y optimizar el HTML resultante. Utilizo rehype-slug para añadir IDs a los títulos (navegación interna), rehype-highlight (con highlight.js) para colorear la sintaxis del código, rehype-katex para renderizar las matemáticas, rehype-sanitize para limpiar código malicioso y rehype-stringify para empaquetar todo en el HTML final que ves en pantalla.
El primer filtro. Antes de procesar el contenido, esta herramienta extrae los metadatos (Frontmatter) del encabezado de cada archivo Markdown. Es lo que me permite definir el título, la fecha, el autor y el orden de los posts de manera estructurada antes de que Next.js renderice el artículo.
Mucho más que texto plano. MDX me permite escribir los artículos en Markdown estándar, pero incrustando componentes de React interactivos (gráficas, simuladores) directamente entre los párrafos. Es lo que hace que este blog sea 'vivo' y no solo texto estático.
El estándar de oro en la escritura académica. Gracias a la integración con Remark, puedo escribir ecuaciones complejas y notación científica (como $\Sigma$) directamente en el Markdown. El sistema las renderiza como vectores matemáticos perfectos, esenciales para explicar papers y algoritmos. El renderizado de las ecuaciones se hace via KaTeX con el plugin: rehype-katex.
Coreografía de interfaz. (Anteriormente Framer Motion). Es la librería responsable de las animaciones declarativas del sitio. La utilizo para las transiciones suaves entre páginas, los efectos de aparición al hacer scroll y la interactividad física de los elementos, haciendo que la experiencia de usuario se sienta orgánica y fluida.
Diagramas como código. Me permite generar diagramas de flujo, secuencias lógicas y gráficos de arquitectura escribiendo texto simple dentro del Markdown. Es vital para explicar visualmente el funcionamiento de los algoritmos genéticos o la estructura del proyecto sin depender de imágenes estáticas externas.
Provee la iconografía vectorial del sitio (redes sociales, indicadores de UI). Al ser SVGs, se ven nítidos en cualquier resolución y tamaño de pantalla sin afectar el rendimiento.