Portfolio Web

Come funziona

Campana, tentacoli e pulsazione sono shader scritti a mano su geometrie generate dal codice: non c'è nessun modello da scaricare, e l'intera pagina pesa circa 1 MB (un modello 3D tipico ne pesa decine). Lo scroll decide dove si trova la medusa: a ogni sezione corrisponde una posizione, una inclinazione e una scala, e il movimento tra l'una e l'altra è smorzato, così non scatta e cambia direzione in modo morbido a metà strada. Lo zoom della foto di fondo è solo CSS (animazione legata allo scroll), senza JavaScript. La scena si ferma quando esce dalla vista; con «riduci movimento» attivo la medusa pulsa appena e si sposta senza voli. Effetto d'impatto per una hero o una pagina di racconto, da usare una volta per pagina.

Come funziona

Il palco resta fermo (sticky) per quattro schermate e lo scroll fa da manovella: a ogni passo gli anelli ruotano, si separano e si richiudono. Le due forme sono contorni vettoriali dal nostro logo, estrusi in 3D con materiali fisici (riflessi e bordi smussati) e un ambiente di luce procedurale. Un dettaglio utile per chi vuole fare lo stesso con un logo: i path SVG originali si auto-intersecano e la libreria non riesce a estruderli, quindi i contorni sono stati ritracciati puliti. Anche qui nessun file 3D da scaricare. Adattabile al marchio di un cliente, per una pagina «chi siamo» o una presentazione di prodotto.

Come funziona

Wizard a 4 step (servizio, data, orario, dati) gestito con lo stato React del componente: ogni passo avanza solo dopo una scelta valida, con un indicatore di progresso che si riempie di rosso mano a mano. Il calendario calcola la griglia del mese a runtime (settimane di 7 celle, lunedì come primo giorno) e blocca automaticamente domeniche e giorni passati; gli orari già 'prenotati' sono calcolati in modo deterministico dalla data scelta, così ogni giorno mostra una disponibilità plausibile e diversa senza un vero backend. La conferma finale disegna un segno di spunta via SVG (stroke-dashoffset animato) e genera al volo un piccolo scoppio di coriandoli in JS, posizionati e colorati casualmente: nessuna libreria, solo elementi assoluti animati via CSS. Stesso principio dei dati mock del widget recensioni: pronto a collegarsi a un vero backend di prenotazione (o a un servizio come cal.com, già usato per Axpro Paintball) sostituendo solo la funzione che genera la disponibilità.

Come funziona

I dati hanno la stessa forma della risposta 'Place Details' dell'API Google Places (rating, numero recensioni, testo/autore/voto per ogni recensione), per ora mockati (per non esporre una key con costo per richiesta su una pagina pubblica del Lab), ma la logica è già pronta a ricevere dati veri: basta sostituire la funzione che li recupera con una vera chiamata, dietro una key ristretta per dominio o un proxy dedicato come per SkyTracker, a seconda di quanto la key debba restare privata. Il caricamento passa da uno stato 'skeleton' (gestito con gli hook useState/useEffect di React) ai dati veri, per simulare l'attesa reale di una chiamata di rete. Il rating medio frazionario (es. 4.8 su 5) è reso con due righe di stelle sovrapposte, quella rossa ritagliata in percentuale via CSS: nessuna immagine, nessuna libreria di icone. Pattern vendibile a qualunque cliente con una scheda Google Business attiva, a prescindere dal settore.

Come funziona

L'app chiama l'API meteo esterna non direttamente dal browser, ma tramite un proxy dedicato su Cloudflare Worker che tiene la chiave come secret lato server: il client contatta solo l'URL del Worker, mai l'API reale. Pattern riusabile ogni volta che un sito statico deve consumare un'API a pagamento o con quota senza esporre credenziali nel codice pubblico.

Come funziona

Lo sfondo è un fragment shader WebGL scritto a mano: la luce vira verso il colore della categoria del giorno scelto e l'accento ha luminanza costante, così il contrasto del testo sopra il canvas resta misurabile (testo chiaro oltre 5,8:1 anche nei punti più luminosi). Tessere, capovolgimenti e loader sono WAAPI e IntersectionObserver, senza librerie di animazione: l'intero script pesa pochi KB. Gli eventi stanno in localStorage con ricorrenze annuali e mensili calcolate al volo; per l'uso reale lo stesso calendario si sincronizza con un piccolo endpoint, qui tolto. Adattabile a un calendario eventi, orari di corsi o scadenziario per studi professionali.