Un posto dove spiegarmi
Di solito un portfolio serve a mostrare dei lavori. Questo mi serve anche a un'altra cosa: avere finalmente un posto dove spiegarmi meglio.
Un progetto, da solo, non dice chi l'ha fatto, come ci ha lavorato né perché. Volevo uno spazio in cui far conoscere chi sono, come lavoro, perché faccio quello che faccio, qual è la mia etica e tutto il resto che un elenco di tecnologie non racconta.
Per questo qui dentro non ci sono soltanto progetti: ci sono il mio modo di lavorare, i miei principi e la mia voce.
Far capire chi c'è dietro
L'obiettivo era facile da dire e difficile da fare: chi arriva sul sito deve capire in pochi minuti che tipo di persona sono e che tipo di lavoro faccio. Doveva far capire:
- chi sono, senza giri di parole
- come lavoro e perché lavoro così
- perché costruisco quello che costruisco
- i principi che non negozio: niente pubblicità, niente tracker, niente profilazione
- prove concrete che so fare quello che dico
L'ultimo punto è il motivo di questa pagina: il portfolio stesso doveva essere una dimostrazione di competenza.
Com'è fatto
Il sito è un'unica esperienza in cui ogni dettaglio è pensato, anche quelli che non si notano al primo sguardo. Ecco i principali.
Un menu che ti segue
La barra in alto resta con te mentre scorri la pagina e ha un effetto di sfocatura che lascia intravedere il contenuto sotto. Al suo interno una barra di avanzamento mostra a che punto sei della pagina, e la voce della sezione in cui ti trovi si evidenzia da sola.
Uno sfondo spaziale che puoi spegnere
Dietro tutta la pagina c'è uno sfondo animato a tema spaziale. Se ti dà fastidio, su computer basta cliccare su di me nella hero per disattivarlo, e il sito ricorda la scelta. Rispetta anche chi ha ridotto le animazioni nelle impostazioni del sistema.
Progetti filtrabili in tempo reale
L'elenco dei progetti si filtra al volo per categoria, senza ricaricare la pagina e senza chiamare un server.
Due temi e tre lingue, senza ricaricare
Puoi passare dal tema viola a quello bianco e tra italiano, inglese e spagnolo con un click, e tutto cambia in tempo reale. Le traduzioni le ho scritte io e il sito le carica da solo: nessun traduttore automatico e nessuna richiesta esterna.
Un terminale che risponde
Nella sezione sul lavoro c'è un terminale interattivo: scrive da solo e risponde ai comandi, e l'elenco dei progetti che mostra lo legge direttamente dalla pagina.
Solo HTML, CSS e JavaScript
Sarebbe stato molto più semplice usare Bootstrap o Tailwind, o appoggiarmi a un framework: è quello che fanno quasi tutti. Ho scelto di non farlo.
Il portfolio è scritto in HTML, CSS e JavaScript puri. Nessun framework, nessuna libreria di interfaccia, nessun traduttore e nessun font o script caricato da un CDN.
Una struttura semplificata può essere vista così:
index.html → style.css → script.js → translations.js + i18n/
Il menu, il footer e la finestra del feedback sono componenti scritti a mano con i Web Components del browser e condivisi da tutte le pagine. Le traduzioni sono divise in un file comune e in un file per ogni pagina, così ognuna scarica solo i testi che le servono e cambia lingua leggendo da lì.
Le parti più difficili
1. Fare tutto senza framework
Senza un framework devi gestire a mano cose che altrove sono già pronte: lo stato dell'interfaccia, i componenti, gli eventi, le animazioni. Il prezzo è più codice da scrivere con attenzione; il vantaggio è che so cosa fa ogni riga e nulla viene caricato per niente.
2. Cambiare lingua e tema senza ricaricare
Ogni testo della pagina è collegato a una chiave di traduzione e si aggiorna al volo, compresi quelli creati dinamicamente, come l'output del terminale. Anche il tema cambia tutti i colori in un colpo solo, grazie alle variabili CSS.
3. Uno sfondo animato che non pesa
Lo sfondo spaziale è disegnato su un canvas a schermo intero. Si ferma da solo quando non serve (animazioni ridotte, dispositivi lenti, telefoni) e il sito ricorda se l'hai spento.
4. Privacy e prestazioni insieme
Niente tracker e niente CDN: font e immagini stanno tutti sul sito, e la pagina non fa nessuna richiesta a servizi di terzi.
Perché ho scelto questo approccio
1. Il portfolio come dimostrazione
Dire di saper fare un lavoro non basta: preferisco che tu lo veda. Ogni dettaglio del sito è una prova di quello che so fare.
2. Meno dipendenze possibile
Meno dipendenze significano meno richieste esterne, meno cose che si rompono e più controllo sulla privacy di chi visita.
3. L'etica prima di tutto
Niente pubblicità, niente tracker, niente profilazione: è un principio che vale per ogni mio progetto, e il portfolio doveva essere il primo a rispettarlo.
4. Una voce, non un curriculum
Ho scelto un tono diretto e personale, come se ti parlassi di persona. Se ti serve un curriculum formale, non è il posto giusto.
Uno spazio che parla di me
Il risultato è un portfolio che non si limita a elencare progetti: racconta chi sono, come lavoro e perché faccio quello che faccio in tre lingue diverse.
Per me la cosa più importante è che il sito stesso sia la dimostrazione di competenza con ogni dettaglio che funziona senza framework, senza traduttori e senza richieste esterne.
Oltre il codice
Costruire il mio portfolio mi ha costretto a fare una cosa che non faccio mai con i progetti per altri: decidere come raccontarmi. È molto più difficile che scrivere codice.
Mi ha ricordato che un buon sito è fatto di tanti dettagli piccoli, spesso invisibili, che messi insieme fanno sentire chi lo visita in buone mani.
E mi ha confermato che si può fare tutto questo con gli strumenti di base del web, senza chiedere a nessuno di caricare più di quello che serve.