Aquesta web

Volia un lloc propi on explicar qui soc, què he fet i com treballo, més enllà d’un currículum. I volia que la mateixa web fos un projecte real, publicat i amb les decisions documentades.

• —Contingut separat del disseny: tots els textos, en tres idiomes, viuen a src/data.
• —Components reutilitzables (components/), seccions de la portada (sections/) i pàgines (pages/).
• —Cada pàgina es prerenderitza en HTML estàtic durant el build i React la hidrata al navegador. Així els cercadors i les previsualitzacions d’enllaços veuen el contingut real.

• —Concepte de «quadern de treball»: paper crema, tinta i un sol color d’accent, el vermell mini.
• —Tres tipografies amb rols fixos: Newsreader per als títols, IBM Plex Sans per al text i IBM Plex Mono per a les dates i les etiquetes.
• —Un índex que marca la secció on ets mentre fas scroll.
• —El mode «Veure la infraestructura», que superposa la retícula i explica com està muntada la web.

• —Contrastos comprovats segons WCAG 2.2 AA (mínim de 4,9:1 en el text).
• —Navegació completa amb teclat, enllaç per saltar al contingut i focus sempre visible.
• —aria-current a l’índex de seccions i al selector d’idioma.
• —Animacions desactivades amb prefers-reduced-motion.
• —Textos alternatius a totes les imatges informatives.

• —Sense galetes, analítica ni peticions a tercers.
• —Capçaleres de seguretat amb una CSP estricta: cap script ni estil inline.
• —Imatges en AVIF i WebP amb dimensions explícites, i tipografies allotjades a la mateixa web.

• —Playwright a 375, 768 i 1440 px: navegació, índex actiu, enllaços, teclat i consola del navegador.
• —Lighthouse per mesurar rendiment, accessibilitat, bones pràctiques i SEO.
• —Scripts propis que comproven enllaços trencats i contrastos.

• —Hidratar pàgines prerenderitzades sense desajustos, sobretot la 404, que es pot servir a qualsevol URL.
• —Mantenir una CSP estricta obliga a evitar atributs style i scripts injectats.
• —El primer desplegament a Cloudflare fallava: sense configuració, Wrangler modificava el build de Vite. Es va resoldre amb un wrangler.jsonc explícit.
• —Les animacions lligades al scroll deixaven invisibles les seccions fora de pantalla en captures i impressions. Ara el contingut sempre és visible.

• —Com funciona el desplegament automàtic de Cloudflare des de GitHub: cada push genera un build nou i, si passa, una versió nova de la web.
• —L’experiència de representar-me a mi mateix: decidir què explico de mi, com ho explico i com vull que es vegi.