Questo sito

Contesto

Volevo un sito che fosse una vetrina professionale e, insieme, uno spazio dove provare le tecnologie web più recenti senza dover chiedere il permesso a un cliente. Per questo il sito stesso è parte della prova: conta quanto i contenuti che mostra, dalle prestazioni alla cura del codice.

Le pagine principali (esperienza, progetti, contatti) sono sobrie e quasi senza JavaScript. Tutto ciò che è pesante o sperimentale sta nel /lab, in isole caricate solo quando servono.

Cosa ho fatto

• HTML statico per default. Astro genera le pagine in anticipo; React, Svelte e Qwik compaiono solo nelle isole interattive, caricate quando diventano visibili.
• Bilingue fin dall’inizio. Italiano senza prefisso e inglese su /en/, con il routing i18n di Astro, URL tradotti, testi in file tipizzati (una chiave mancante rompe il type-check) e contenuti in Content Collections.
• Hero in WebGL. Uno shader WebGL2 scritto a mano, senza librerie: linee di livello su rumore simplex. Si carica quando il browser è inattivo, si ferma fuori dallo schermo, rispetta prefers-reduced-motion e ha un pulsante di pausa; senza WebGL2 resta uno sfondo CSS.
• CSS moderno al posto di JavaScript. Tema chiaro e scuro con light-dark(), animazioni legate allo scroll per la larghezza dei titoli, color-mix() per le tinte e View Transitions per la navigazione.
• Tipografia variabile. Font self-hosted (Bricolage Grotesque per i titoli, Hanken Grotesk per il testo, Geist Mono per le etichette), subset latino e fallback con metriche corrette per evitare salti di layout.
• Un lab fatto di pagine indipendenti. Ogni esperimento ha la sua cartella e si aggiunge o si toglie senza toccare il resto:
  • una demo Smart TV nel browser, navigabile con frecce, Invio e Back, con un motore di spatial navigation in TypeScript senza dipendenze;
  • la stessa demo riscritta in Qwik, con un contatore del JavaScript scaricato per confrontare le due versioni;
  • Snake su canvas e Memory in Svelte 5.
• Modulo di contatti senza email in chiaro. Una funzione serverless invia i messaggi con Resend, protetta da un campo trappola e dal controllo dell’origine. L’indirizzo non compare mai nel sito.
• Pubblicazione su Vercel, come sito statico con una sola funzione.