Salvatore Ritrovato

Il punto di partenza

La prima versione del portfolio di Salvatore era uscita presto. Aveva un'estetica brutalista in nero e verde lime, caratteri monospazio, una griglia a righe sempre visibile, sezioni numerate come “01 / HOME” e una scritta che si componeva da sola come su un terminale. Era lo stile di uno sviluppatore che mette in mostra la tecnica, ma raccontava poco la persona. Tra i cinque lavori in vetrina c'erano un progetto ancora in beta, un concept e il portfolio stesso.

Perché non bastava più

Salvatore sentiva che quel sito non lo rappresentava più, e non per un singolo difetto:

Era prematuro

Era online prima che il lavoro fosse maturo: tanta tecnica in mostra e pochi progetti conclusi da raccontare.

Un'estetica a parte

Il verde acido e il monospazio non somigliavano a nulla di ciò che Salvatore costruisce oggi: il portfolio sembrava quello di un altro sviluppatore.

La persona sullo sfondo

La sua foto era un riquadro in bianco e nero in mezzo alla pagina, il resto parlava solo di strumenti e tecnologie.

Il telefono come ripiego

Da smartphone i tre pulsanti della home si impilavano a tutta larghezza e riempivano quasi una schermata intera prima ancora di arrivare ai contenuti.

Il nuovo linguaggio

Invece di scegliere una palette, siamo partiti dalla fotografia: da lì sono arrivati il blu notte della pagina, l'ambra del tramonto e il bianco caldo delle sezioni chiare.

Le scelte di stile

Un solo carattere

Switzer, un'unica famiglia con un solo peso e spaziatura stretta nei titoli, al posto del mix di caratteri di prima.

Luce, non neon

L'unico colore caldo è l'ambra della foto, riservata ai gesti principali, come il pulsante per contattarlo.

Una barra che si adatta

La navigazione è una pillola semitrasparente che resta leggibile sia sulle sezioni scure sia su quelle chiare.

I clienti nei toni del sito

Le copertine dei progetti si vedono nei colori del portfolio e tornano a quelli originali al passaggio del mouse. Su touch si vedono sempre a colori.

Come è costruita la pagina

Una pagina sola, con un ritmo preciso: hero fotografico, due sezioni chiare, i progetti su fondo scuro, una pausa a tutta foto con una citazione di Steve Jobs, lo stack e infine il contatto, di nuovo a tutta foto.

Una foto che non si taglia

Su desktop il ritratto è intero, senza tagliare capelli né mento. Su telefono la composizione è diversa: foto sopra, testo sotto, mai sul viso.

Una pagina per lingua

Inglese in home e italiano su /it, ciascuna con i propri metadati. Cambiando lingua si resta nella stessa sezione.

Contatto senza uscire

Al posto di una pagina Contatti, un riquadro che si apre da ogni pulsante “Get in touch”, con controllo dei campi e un'email diretta di riserva.

Una pausa editoriale

La citazione a tutto schermo e la nota di Salvatore sul perché conta per lui spezzano il ritmo tra i progetti e lo stack.

I dettagli che non si vedono

Il lavoro più fine è quello che, se fatto bene, nessuno nota:

Un menu che non sposta nulla

Bloccare lo scorrimento all'apertura del menu faceva scattare la pagina di qualche pixel, perché la barra di scorrimento scompare. Ora ne compensiamo lo spazio, e logo e titoli sono stati misurati prima, durante e dopo l'apertura.

Un nastro che rallenta

La striscia degli strumenti rallenta sotto il mouse senza mai ripartire da capo.

Animazioni su misura

Chi ha ridotto il movimento nel proprio dispositivo non vede animazioni, in nessuna sezione.

Come è stato fatto

Un'unica sessione di lavoro tra Salvatore e Claude Code: direzione, foto, testi e decisioni sue, ricerca, codice e verifiche iterate sul sito in funzione, sezione dopo sezione.

Frontend

Next.js (App Router) e React con TypeScript in modalità rigorosa.

Stile

CSS semplice, senza framework: parametri di stile condivisi e un file di stile per ogni componente.

Traduzioni

Dizionari tipizzati per inglese e italiano: una traduzione mancante è un errore di compilazione.

SEO e condivisione

Metadati e dati strutturati generati dagli stessi contenuti della pagina, anteprima social creata in fase di build.

Il Risultato

Il portfolio vecchio era già ottimo dal punto di vista delle prestazioni, e abbiamo voluto portare le stesse prestazioni in quello nuovo: la pagina resta leggera e veloce, anche con foto grandi e animazioni curate. La differenza è altrove. Oggi il portfolio somiglia a chi lo ha scritto: la fotografia al centro, tre ambiti chiari, quattro progetti reali e una pagina che si legge bene dal telefono come dal computer.