IlariaPortfolio.
Un portfolio che cambia pelle a seconda di chi lo guarda. Un sistema digitale a doppia identità visiva, costruito per dimostrare che un portfolio può essere esso stesso il progetto più complesso del portfolio.
- Dual design system live-switchable: due identità visive, un solo sito
- Ogni valore visivo astratto in variabili CSS — zero valori hardcoded
- Three.js, Web Audio API, favicon dinamica, LCP sotto 2.5s
Non un portfolio. Un sistema.
Il brief era personale: costruire qualcosa che non si limitasse a mostrare il lavoro, ma che incarnasse il metodo. Un portfolio che fosse già una risposta alla domanda "come pensi al design?". La soluzione è stata un dual design system live-switchable — Editorial e Nebula — due identità visive coerenti e distinte che l'utente può alternare in tempo reale, senza ricaricare la pagina.
"Sfidare tecnicamente se stesse, senza perdere il calore. L'obiettivo non era stupire con gli effetti — era dimostrare controllo."
Il problema vero era il CSS, non il design.
Costruire un design system che cambi in tempo reale richiede che ogni valore visivo — colori, tipografia, spaziature, ombre — sia astratto in variabili CSS scambiate a livello root. Nessun componente può contenere valori hardcoded. Dopo le prime iterazioni era chiaro che la sfida più grande non era l'estetica, ma la coerenza sistemica: ogni nuovo componente aggiunto doveva funzionare in entrambi i temi senza eccezioni. Il sistema ha richiesto circa 1-2 mesi di lavoro, di cui la maggior parte spesa a testare casi limite — hover states, animazioni, transizioni — su entrambi i temi simultaneamente.
Web Audio, Three.js e una favicon che cambia tema.
Lo stack tecnico è stato scelto per massimizzare l'espressività senza compromettere le performance: React + Vite per l'architettura, Framer Motion per le transizioni di pagina, Three.js per il canvas 3D nel tema Nebula, Web Audio API per la risposta sonora reattiva al tema attivo, Lenis per lo smooth scroll, i18n completo IT/EN. Un dettaglio che sintetizza l'approccio: la favicon cambia dinamicamente al toggle del tema — un gesto minimo che dimostra che il sistema è davvero end-to-end. Il bundle splitting è configurato per garantire LCP sotto i 2.5 secondi anche su connessioni medie.
Il portfolio è la risposta.
Il risultato è un sistema in cui ogni componente — dalla tipografia alla favicon, dall'audio al canvas 3D — è ingegnerizzato attorno a un'unica idea: che l'identità di un designer non è monolitica. Il portfolio è stato sottoposto ad Awwwards come dimostrazione di un metodo progettuale, non solo di un risultato estetico. La metrica più onesta: ogni persona che lo apre sceglie il tema che la rispecchia di più. Quello era l'obiettivo.
