←tutti i progetti
// personal

Personal site · 2026 remaster

Il sito che stai guardando. Niente framework, niente build step: solo HTML, CSS e JS vanilla serviti da nginx. Pensato per raccontare il mio lato sysadmin in un formato coerente — terminal-style, ordinato, con qualche dettaglio animato per dargli carattere.

Statoin corso
Anno2026
Ruoloconcept · design · dev
StackHTML · CSS · vanilla JS · nginx
HTML CSS Vanilla JS nginx Claude Code

contesto

Volevo una presenza online mia, non un template preconfezionato. I template "portfolio developer" parlano tutti la stessa lingua, e nessuna di quelle lingue suonava come la mia: io sono un sistemista, non un frontend dev, e il sito doveva sembrarlo.

L'idea era costruire qualcosa di leggero, veloce, senza dipendenze, con un'estetica terminale che riflettesse il mondo in cui passo la giornata: prompt, log, comandi, colori ad alto contrasto.

approccio

No-build, statico, vanilla. Tutto viene servito direttamente da nginx: nessun bundler, nessun transpiler, nessun node_modules da mantenere. I file sono letti da disco esattamente come li ho scritti.

  • Struttura: due HTML principali (IT/EN) + cartella projects/, un unico style.css e un unico main.js condivisi.
  • Tema dark/light: CSS Custom Properties per tutti i token, override via [data-theme="light"]. Il switch usa l'API View Transitions dove disponibile per una cross-fade fluida.
  • Rail verticale desktop + hamburger mobile, con scroll-spy JS per evidenziare la sezione corrente.
  • Command palette (⌘K) e un easter egg matrix-mode (M) per gli esploratori.
  • Accessibilità: skip-link, aria-label su ogni controllo, rispetto di prefers-reduced-motion.

outcome

Aggiungi qui le metriche rilevanti: punteggio Lighthouse (Perf / A11y / SEO), peso della pagina, TTFB medio, eventuale numero di visitatori se tracci analytics.

Il sito carica velocemente anche su connessioni lente, funziona senza JavaScript attivo per i contenuti fondamentali, ed è completamente navigabile da tastiera.

constraints

La scelta di restare no-build ha dei costi. Nav e footer sono duplicati in ogni file HTML — aggiornarli significa toccare più file (trade-off accettato: li aggiorno raramente). Niente templating nativo: se voglio riusare un pezzo, lo copio.

Tutto il CSS sta in un file unico da oltre 2000 righe. Funziona perché lo conosco bene, ma richiede disciplina: sezioni commentate, token al top, niente specificity wars.

lezioni

  • JS vanilla, scritto con attenzione, copre il 95% dei casi per cui la gente reach-a un framework. Per un sito di questa scala è la scelta giusta.
  • Le CSS Custom Properties con triplette RGB raw (es. --green-rgb: 74,222,128) rendono il theming incredibilmente flessibile: puoi comporre rgba() al volo senza preprocessore.
  • L'API View Transitions del browser è magia: per lo switch di tema ha eliminato del tutto lo stutter che avevo con le transitions CSS classiche.
  • Aggiungi qui una lezione personale — magari qualcosa che riguarda la collaborazione con Claude Code o un momento specifico di debugging.
matrix-mode · ON