L'idea
Un portfolio che elenca competenze è un curriculum in HTML. Volevo un sito che le dimostrasse e che mi somigliasse. Il punto di partenza è la frase con cui descrivo il mio modo di lavorare: andare oltre la superficie delle cose.
Il sito la prende alla lettera. È una sezione verticale del terreno: si parte in superficie, dove ci sono la persona e la sua storia, e scorrendo si scende verso il sistema: il metodo, i progetti, gli strumenti. Le sezioni sono numerate con quote altimetriche, da +200 a −200.
Un terreno, generato dal codice
Tutte le mappe del sito vengono dallo stesso modulo JavaScript. Genera un rilievo a partire da un seme fisso (1226, il mio compleanno) e ne estrae le curve di livello con l'algoritmo marching squares. Stessi dati, stessa montagna ovunque:
- in fase di build Astro trasforma le curve in SVG: la carta della legenda in home, il profilo A–A' che separa la parte chiara da quella scura, la mappa della pagina 404, le miniature dell'archivio progetti;
- nel browser lo stesso modulo alimenta le scene Three.js: il rilievo che si smonta nella sezione sul metodo, la montagna a strati della pagina Chi sono, il sentiero del Percorso;
- la vetta è segnata ovunque dallo stesso triangolino Terra Rossa, il simbolo con cui le carte topografiche indicano le cime.
Le scelte tecniche
- Astro genera pagine statiche: niente JavaScript di default, solo dove serve un'interazione.
- Three.js si carica solo quando una scena entra nello schermo, e la scena si ferma quando esce.
- Tailwind compilato in build, font e immagini WebP ospitati in locale, CSS incorporato nella pagina per non bloccare il primo disegno.
- Le animazioni usano solo trasformazioni e opacità; chi ha attivato «riduci movimento» vede le versioni statiche.
- Hosting su Cloudflare Workers: ogni push su GitHub ricostruisce e pubblica il sito, e lo stesso Worker gestisce i moduli con le protezioni anti-spam.
Il sistema visivo
Cinque colori, ognuno con un motivo: Pietra e Inchiostro per la superficie e la profondità, Terra Rossa (i campi da tennis e i segnavia) per le azioni, Ghiacciaio per i dati, Grafite per le annotazioni. Tre caratteri con tre ruoli: Cabinet Grotesk per i titoli, Source Serif 4 per leggere, IBM Plex Mono per le etichette da strumento di misura.
Cosa ho imparato
Senza un cliente nessuno ti aiuta a tagliare. La regola più utile è stata chiedermi, per ogni elemento, cosa racconta di me. Se non c'era una risposta, l'elemento usciva.