IT

xarop.com

Tot · 2026 · visita →

Design FrontEnd Portfolio

#a11y #css #design #Git #github-pages #html #javascript #meta #Node.js #xarop #xarop.com

Il progetto

web.xarop.com è un sito web personale (blog + portfolio + CV) costruito da zero nel 2026. Funziona senza database, senza runtime server e senza JavaScript obbligatorio sul client. La fonte di verità è Markdown nel repository; uno script Node genera HTML statico.

Migrazione completa dell'archivio WordPress 2007–2024: circa 90 articoli e 70 progetti, categorie, tag e immagini in evidenza conservati.

Caratteristiche

  • Sette sapori: fragola, mirtillo, ciliegia, menta, limone, arancia, liquirizia — palette intercambiabili tramite data-flavor. Cambio istantaneo, solo CSS.
  • Modalità scura: automatica per prefers-color-scheme, con toggle manuale persistente in localStorage.
  • Selettore di lingua: CA / ES / EN / SV / IT tramite Google Translate, con protezione del marchio e persistenza per URL (?lang=es).
  • Asap auto-ospitato: tipografia dei titoli senza chiamate esterne. File WOFF2 proprietari, @font-face in tokens.css.
  • Senza JS obbligatorio: il sito funziona al 100% senza eseguire JavaScript.
  • Pubblicazione via Git: scrivere è touch post.md && git push.
  • GitHub Pages: hosting gratuito, deploy automatico tramite GitHub Actions.
  • Accessibile: WCAG 2.1 AA, semantica HTML pura, focus ring visibili, prefers-reduced-motion.
  • Categorie e tag: distinzione visiva (badge vs. testo semplice), pagine di indice per ognuno con aside navigabile.
  • Immagini: 60+ immagini migrate da WordPress, convertite a WebP auto-ospitato. Screenshot automatici tramite Puppeteer per i nuovi progetti.

Stack

Node.js (build) · Markdown · CSS custom properties · Asap (OFL, auto-ospitato) · GitHub Pages

Codice su GitHub