Radici – Sito portfolio per uno studio di bioarchitettura
Radici è un sito portfolio realizzato per uno studio di bioarchitettura, pensato per raccontare un approccio progettuale che nasce dal luogo e dai materiali naturali. Sviluppato in React, TypeScript e Vite, unisce un'estetica editoriale ed elegante a interazioni animate curate nel dettaglio con GSAP.
Idea e obiettivi del progetto
L'obiettivo era costruire un sito che comunicasse rigore progettuale anche nel modo in cui si naviga: niente scroll banali, ma un'esperienza che accompagna chi visita il sito attraverso manifesto, metodo di lavoro, materiali e archivio progetti, prima di arrivare ai contatti.
Il pezzo più impegnativo è l'archivio progetti: uno slider orizzontale a schermo intero, ispirato ai portfolio di studi di architettura internazionali, dove la sezione si blocca (pin) e lo scroll verticale della rotellina viene tradotto in movimento orizzontale tra i progetti — utilizzabile anche trascinando con il mouse, con inerzia naturale al rilascio.
Design, temi e accessibilità
L'intero sistema di colori è costruito su variabili CSS, pensate fin dall'inizio per poter sostenere una modalità chiara e scura senza duplicare il lavoro: le sezioni che fanno parte dell'identità del brand restano fisse, mentre sfondo e testo delle sezioni principali si invertono in base al tema scelto, ricordato tra una visita e l'altra.
Il sito è stato inoltre verificato punto per punto secondo le
Linee Guida sull'Accessibilità degli strumenti informatici (AGID): contrasti colore
conformi al livello AA, focus visibile e navigabile da tastiera, struttura dei titoli coerente,
testo alternativo su ogni immagine e gestione corretta del movimento ridotto
(prefers-reduced-motion).
Tecnologie utilizzate
React + TypeScript + Vite – struttura dell'applicazione, tipizzazione e build ottimizzata.
React Router – navigazione tra home, archivio progetti e pagine di dettaglio (con rotte dinamiche per ogni progetto).
GSAP (ScrollTrigger, Draggable, InertiaPlugin) – slider orizzontale pinnato, trascinabile con inerzia, sincronizzato allo scroll.
Lenis – smooth scroll su tutto il sito, sincronizzato con GSAP per animazioni fluide senza conflitti.
CSS custom properties – sistema di temi chiaro/scuro centralizzato, senza duplicazione di stili.
Netlify + GitHub – hosting con deploy automatico a ogni push, redirect configurati per il routing lato client.
Ottimizzazione performance – compressione di immagini e video, con il peso della pagina ridotto da oltre 30MB a pochi MB.
Altre sezioni del sito
Risultati e prospettive future
Il sito è online e completamente funzionante, con archivio progetti, pagine di dettaglio dinamiche, sezione contatti, footer, informativa cookie, modalità scura e un'attenzione particolare all'accessibilità e alle performance di caricamento.
Tra i possibili sviluppi futuri:
- un CMS headless per permettere allo studio di aggiornare i progetti autonomamente,
- un modulo di contatto realmente funzionante, collegato a un servizio di invio email,
- ulteriori pagine di dettaglio progetto, man mano che lo studio ne pubblica di nuovi.
Vedi il sito live ↗ · Codice su GitHub ↗
Se hai bisogno di un sito curato in ogni dettaglio, animato con GSAP e costruito pensando davvero a chi lo userà, parliamone.
Parliamo del tuo progetto