Este portfolio.

React y TypeScript

He desarrollado esta web con React y TypeScript, organizando la interfaz en componentes y páginas para los proyectos, las obras y la presentación personal. Uso hooks para gestionar el estado de la interfaz y los efectos asociados a la navegación y al idioma.

Vite proporciona el entorno de desarrollo y genera la versión de producción. El proceso de compilación comprueba los tipos con TypeScript y prerenderiza el contenido de cada página en HTML. React hidrata ese HTML para activar las interacciones.

Diseño con CSS

La web tiene una entrada compartida y dos secciones con diseños propios: desarrollo y escritura. He utilizado CSS con Grid, Flexbox, variables y media queries para construir las composiciones y adaptarlas a distintos tamaños de pantalla.

La interfaz incluye foco visible para la navegación con teclado, enlaces para saltar al contenido y estilos que respetan la preferencia de movimiento reducido.

Contenido en Markdown y YAML

Los textos se mantienen en archivos Markdown con cabeceras YAML, separados de los componentes. Cada proyecto, novela y etapa de la trayectoria tiene su propio documento.

Uso react-markdown para renderizar el contenido y yaml para leer los campos de las cabeceras. Un módulo común carga los archivos mediante import.meta.glob de Vite y valida su estructura y los campos que necesita cada sección. Esto permite editar textos sin modificar el código de la interfaz.

Español e inglés

He integrado i18next y react-i18next para gestionar los dos idiomas. El contenido de cada uno vive en archivos separados. El idioma está representado en la URL: las rutas en español se mantienen y las inglesas usan el prefijo /en, de modo que cada versión puede compartirse e indexarse por separado.

Navegación en el navegador

La navegación interna utiliza la History API, con rutas propias para cada proyecto y obra, cambios de página sin recarga y soporte para los botones de atrás y adelante. Al cambiar de ruta se restablece el desplazamiento y se lleva el foco al contenido; los títulos de las páginas de DEV y Escritura se actualizan según la página y el idioma.

HTML y metadatos por página

La compilación genera las páginas estáticas, el sitemap y robots.txt. Cada ruta incluye título, descripción, URL canónica, enlaces entre idiomas, etiquetas Open Graph y datos estructurados con JSON-LD. El contenido está disponible en el HTML antes de ejecutar JavaScript.