IlariaPortfolio.
A portfolio that changes its skin depending on who's looking. A dual-identity digital system, built to prove that a portfolio can itself be the most complex project in the portfolio.
- Live-switchable dual design system: two visual identities, one site
- Every visual value abstracted into CSS variables — zero hardcoded values
- Three.js, Web Audio API, dynamic favicon, LCP under 2.5s
Not a portfolio. A system.
The brief was personal: build something that didn't just showcase the work, but embodied the method. A portfolio that was already an answer to the question "how do you think about design?". The solution was a live-switchable dual design system — Editorial and Nebula — two coherent and distinct visual identities the user can alternate in real time, without reloading the page.
"Challenge yourself technically, without losing warmth. The goal wasn't to impress with effects — it was to demonstrate control."
The real problem was the CSS, not the design.
Building a design system that switches in real time requires every visual value — colors, typography, spacing, shadows — to be abstracted into CSS variables swapped at the root level. No component can contain hardcoded values. After the first iterations it became clear that the biggest challenge wasn't aesthetics, but systemic consistency: every new component added had to work in both themes without exceptions. The system took approximately 1-2 months to build, most of it spent testing edge cases — hover states, animations, transitions — across both themes simultaneously.
Web Audio, Three.js and a favicon that changes with the theme.
The technical stack was chosen to maximise expressiveness without compromising performance: React + Vite for the architecture, Framer Motion for page transitions, Three.js for the 3D canvas in the Nebula theme, Web Audio API for audio response reactive to the active theme, Lenis for smooth scroll, full IT/EN i18n. One detail that sums up the approach: the favicon changes dynamically on theme toggle — a minimal gesture that proves the system is truly end-to-end. Bundle splitting is configured to guarantee LCP under 2.5 seconds even on average connections.
The portfolio is the answer.
The result is a system where every component — from typography to favicon, from audio to 3D canvas — is engineered around a single idea: that a designer's identity is not monolithic. The portfolio was submitted to Awwwards as a demonstration of a design method, not just an aesthetic outcome. The most honest metric: every person who opens it chooses the theme that reflects them most. That was the objective.
