Portfolio
Il sito che stai guardando: portfolio e blog in SvelteKit, con un CMS costruito su misura e fasci di luce in Three.js che danno profondità allo scroll.
- Ruolo
- Design e sviluppo
- Anno
- 2026
- Stack
- SvelteKit
- TypeScript
- Three.js
- GLSL
- Sass
- Vite
- Node.js
- PostgreSQL
- Prisma
- Better Auth
- Zod
- Docker
- Playwright
L’idea
Un redesign del mio sito personale con un’impronta editoriale e sobria: tipografia leggera, un solo colore d’accento e molto spazio. Nessuna call to action: il sito racconta cosa faccio, e i recapiti restano in fondo per chi li cerca.
Profondità con Three.js
Dietro al contenuto ci sono fasci di luce volumetrici a profondità diverse, con striature e tremolii come luce filtrata dagli alberi, e un pulviscolo che si accende del colore del fascio che attraversa. Scorrendo la pagina la camera ruota attorno ai fasci scendendo di quota, la messa a fuoco si sposta e ogni sezione porta in primo piano i propri fasci: caldi, freddi o avorio. Le particelle fuori fuoco diventano bokeh. La scena parte solo quando il browser è libero e c’è una GPU vera, limita il pixel ratio e si ferma su un fotogramma statico quando è attivo il movimento ridotto.
Architettura
SvelteKit con Svelte 5 e TypeScript su Node, in italiano e in inglese con URL dedicati e collegati con hreflang. I contenuti stanno in PostgreSQL e passano da Prisma; il Markdown degli articoli diventa HTML al salvataggio, con l’evidenziazione del codice, così le pagine leggono solo HTML pronto. Un articolo programmato esce da solo alla data scelta: la visibilità si decide a ogni lettura, senza processi pianificati.
Un CMS su misura
Tutto il sito si gestisce da un’area di amministrazione scritta da zero. L’editor degli articoli ha l’anteprima dal vivo affiancata, un pannello SEO che mostra il risultato su Google e segnala titoli troppo lunghi o immagini senza testo alternativo, la cronologia delle versioni e un link di anteprima privato per far leggere una bozza. Le immagini caricate vengono ridimensionate e convertite in AVIF e WebP, senza metadati come la posizione GPS. Ciò che si elimina resta in un cestino per 30 giorni, Ctrl+K cerca ovunque e i commenti si moderano anche da tastiera, con notifiche push inviate dal server stesso.
Prestazioni
Le pagine sono rese dal server in pochi millisecondi e arrivano compresse, con gli stili già nell’HTML. I loghi delle tecnologie sono un unico sprite SVG in cache, invece di centinaia di tracciati ripetuti in ogni pagina: l’HTML della home, stili compresi, è passato da oltre 170 a circa 35 KB. Il ritratto e le immagini caricate hanno varianti AVIF e WebP per ogni dimensione, e l’immagine di produzione contiene solo i file che il server usa davvero.
Sicurezza e privacy
Accesso con verifica in due passaggi, blocco dopo i tentativi falliti ed elenco dei dispositivi collegati. Content Security Policy con nonce per ogni richiesta e nessuna risorsa di terze parti. Chi visita il sito non riceve cookie, quindi non serve alcun banner; i commenti hanno un anti-spam senza CAPTCHA esterni e conservano solo un hash dell’indirizzo IP, cancellato dopo 30 giorni. Un test prova ogni rotta dell’area riservata senza accesso, comprese quelle aggiunte in futuro.
Qualità e rilascio
Oxlint, Prettier e svelte-check con warning bloccanti. Oltre settanta test end-to-end con Playwright: cinque viewport, tastiera, entrambe le lingue, movimento ridotto, pagina senza JavaScript e controlli automatici di accessibilità su ogni pagina, pubblica e riservata. In CI gli stessi test girano anche sull’immagine Docker di produzione; il rilascio sul VPS è automatico, con backup notturni di database e immagini.