Esta web

Quería un sitio propio donde explicar quién soy, qué he hecho y cómo trabajo, más allá de un currículum. Y quería que la propia web fuera un proyecto real, publicado y con las decisiones documentadas.

• —Contenido separado del diseño: todos los textos, en tres idiomas, viven en src/data.
• —Componentes reutilizables (components/), secciones de la portada (sections/) y páginas (pages/).
• —Cada página se prerenderiza en HTML estático durante el build y React la hidrata en el navegador. Así los buscadores y las vistas previas de enlaces ven el contenido real.

• —Concepto de «cuaderno de trabajo»: papel crema, tinta y un solo color de acento, el rojo minio.
• —Tres tipografías con roles fijos: Newsreader para los títulos, IBM Plex Sans para el texto e IBM Plex Mono para fechas y etiquetas.
• —Un índice que marca la sección en la que estás mientras haces scroll.
• —El modo «Ver la infraestructura», que superpone la retícula y explica cómo está montada la web.

• —Contrastes comprobados según WCAG 2.2 AA (mínimo de 4,9:1 en el texto).
• —Navegación completa con teclado, enlace para saltar al contenido y foco siempre visible.
• —aria-current en el índice de secciones y en el selector de idioma.
• —Animaciones desactivadas con prefers-reduced-motion.
• —Textos alternativos en todas las imágenes informativas.

• —Sin cookies, analítica ni peticiones a terceros.
• —Cabeceras de seguridad con una CSP estricta: ningún script ni estilo inline.
• —Imágenes en AVIF y WebP con dimensiones explícitas, y tipografías alojadas en la propia web.

• —Playwright a 375, 768 y 1440 px: navegación, índice activo, enlaces, teclado y consola del navegador.
• —Lighthouse para medir rendimiento, accesibilidad, buenas prácticas y SEO.
• —Scripts propios que comprueban enlaces rotos y contrastes.

• —Hidratar páginas prerenderizadas sin desajustes, sobre todo la 404, que puede servirse en cualquier URL.
• —Mantener una CSP estricta obliga a evitar atributos style y scripts inyectados.
• —El primer despliegue en Cloudflare fallaba: sin configuración, Wrangler modificaba el build de Vite. Se resolvió con un wrangler.jsonc explícito.
• —Las animaciones ligadas al scroll dejaban invisibles las secciones fuera de pantalla en capturas e impresiones. Ahora el contenido siempre es visible.

• —Cómo funciona el despliegue automático de Cloudflare desde GitHub: cada push genera un build nuevo y, si pasa, una versión nueva de la web.
• —La experiencia de representarme a mí mismo: decidir qué cuento de mí, cómo lo cuento y cómo quiero que se vea.