Leica Florian Robert

<< Torna ai progetti

My website V3 — case study

Ruolo: Design e sviluppo. Anno: 2026.

Sito: leicaflorianrobert.dev

Il restyling del mio portfolio: un sito che non si limita a mostrare i progetti, ma racconta in prima persona il passaggio dal vecchio web al rendering moderno.

Stai vedendo questo case study con il motore Legacy. Per vederlo come è stato progettato, attiva il rendering nativo qui sotto.

Chiaro, ma silenzioso

La V2 era ordinata e funzionale: palette chiara e calda, testi discorsivi, nessuna anteprima dei lavori in home. Presentava bene i servizi, ma non mostrava cosa so fare.

Gli obiettivi della V3: una grafica più moderna e contrastata, più immagini, e un'identità che parli da sviluppatore.

Il Motore Duale

Il sito si apre in modalità Legacy: Times New Roman, link blu sottolineati, foto in bianco e nero in una cornice grigia. Un ipertesto anni '90.

Un pulsante, Attiva Rendering Nativo, avvia una breve sequenza di boot con glitch e porta alla versione Native: scura, monospace, con accenti arancio. La scelta resta memorizzata tra le pagine.

Pochi elementi, molto contrasto

Un nero morbido invece del nero assoluto, un solo colore d'accento e un unico carattere: JetBrains Mono, dal titolo al form.

• #111113 sfondo
• #18181B superficie
• #EDEBE6 testo
• #FF5B14 accento

Il nuovo logo: le iniziali in minuscolo con il cursore, come un comando da terminale. Sostituisce il monogramma FR con le due L rovesciate.

Movimento e respiro

• Hover con curva a molla su card e pulsanti, invece di transizioni lineari.
• Parallasse leggera su foto, alone e snippet di codice nella hero.
• Spaziature verticali ampie tra le sezioni, colonna di 1120px.
• Progetti mostrati in mockup laptop e smartphone, servizi con immagine.
• Su mobile i servizi diventano uno slider orizzontale.

Sotto il cofano

• Un sito statico. Nuxt genera ogni pagina come HTML già pronto, nelle tre lingue: non c'è un server da tenere acceso, e le pagine arrivano subito.
• Contenuti a blocchi in Directus. Ogni pagina è una sequenza di blocchi (testi, gallerie, timeline, progetti) che compongo dal pannello. Quando un contenuto cambia, Directus ricostruisce e pubblica il sito da solo.
• Ogni blocco esiste due volte. Una versione Legacy e una Native leggono gli stessi dati: cambiare modalità non ricarica la pagina, cambia solo il modo di disegnarla.
• Si parte sempre da Legacy. Il server prepara la versione anni '90, semplice e leggibile ovunque; la Native si accende nel browser e la scelta resta salvata per le visite successive.
• Animazioni con misura. Widget, timer e ritratto ASCII si fermano quando escono dallo schermo, per non consumare risorse inutilmente, e lo scorrimento morbido è attivo solo in Native.
• Il curriculum si genera da sé. A ogni pubblicazione un browser headless stampa il CV in PDF nelle tre lingue; se non sta in una pagina, la pubblicazione si ferma invece di mettere online un CV tagliato.

Diretto da me, scritto con l'AI

Il design ha preso forma in Claude Design; il codice e i testi, in tre lingue, sono stati scritti da Claude Code sotto la mia direzione, con il metodo Superpowers: ogni modifica nasce da un piano, passa dalla mia approvazione, viene verificata nel browser in entrambe le modalità e si chiude con un commit piccolo e leggibile.

Dirigere un'AI è un mestiere a sé: bisogna sapere cosa chiedere, riconoscere una soluzione fragile e dire di no al momento giusto. Gli obiettivi, l'architettura e i contenuti sono miei, e mia è l'ultima parola su ogni passaggio. Molte idee vengono da me, come la timeline delle esperienze ripresa dal vecchio sito, che resta ferma mentre scorri e accende l'anno che stai leggendo; altrettante le correzioni, dal ritmo degli spazi tra le sezioni ai dati allineati al curriculum.

Non è un sito generato con un clic, ma la somma di molte scelte, ciascuna ponderata e decisa da me.

Più spazio a chi sono

Rispetto alla V2 il sito dice molto di più, e lo dice da sviluppatore.

• Più contenuto: servizi, progetti, esperienze e la mia storia, in tre lingue.
• I progetti in primo piano: quelli con un case study dedicato hanno una pagina che racconta il lavoro per esteso, e si raggiungono dalla home.
• Chi sono e la mia storia hanno più risalto, con una pagina che racconta da dove vengo.
• Una grafica che parla di me: la modalità Legacy richiama il web da cui sono partito, la Native quello in cui lavoro oggi. Anche l'esperienza più datata entra nel racconto.
• Più spazio alle esperienze lavorative: la timeline le ripercorre anno per anno.