Titolo: Katania Personal Portfolio
Tipo: Sito web (Portfolio)
Stack: TypeScript · Vite · Tailwind · Framer Motion · React Router · R3F/Three.js · Lenis
Focus: Personal branding · Storytelling · Showcase progetti · Esperienza 3D
- Sul progetto
Panoramica
Katania Personal Portfolio è il mio portfolio personale costruito come se fosse un prodotto: una singola esperienza continua, immersiva e super fluida.
Dentro c’è tutto quello che serve per raccontare “chi sono” senza perdere tempo:
home/manifesto e about,
progetti selezionati con link a Microsoft Store e GitHub,
una pagina dedicata a KatanOS,
sezioni legali (Privacy & Terms).
L’interfaccia è cinematico-minimal: scena 3D in background, micro-interazioni e una navigazione che dà la sensazione di “sfogliare” il sito, senza stacchi.
UI/UX · Front-end · Motion Design · Esperienza 3D
Sfida & Soluzione
La sfida
Il classico problema dei portfolio è che spesso sembrano… un elenco.
Io volevo l’opposto: un’esperienza che fosse:
chiara in pochi secondi,
memorabile a livello visivo,
e con prove concrete (link reali, progetti pubblici), non “solo belle parole”
La soluzione
Ho costruito il sito come SPA con routing client-side (React Router) per eliminare il classico “stacco” tra pagine.
La continuità è enfatizzata da transizioni Framer Motion e smooth scrolling Lenis, così la navigazione resta sempre un flusso unico.
A completare tutto: un background 3D WebGL (Three.js con React Three Fiber/Drei) e una UI ad alto contrasto, pensata per essere leggibile anche con un visual importante dietro.
Il mio processo
Direzione e tono: manifesto e about definiscono identità, stile e priorità
Architettura SPA: navigazione immediata, zero reload, transizioni tra sezioni
Motion design: micro-feedback e animazioni usate come “ritmo”, non come decorazione
3D come atmosfera: scena WebGL in background, minimal e cinematica
Struttura completa: Projects + pagina KatanOS + Privacy & Terms
Proof verificabile: link diretti a Microsoft Store e GitHub, demo live quando disponibili
Design: Katania
1. Identità & Visione
Si entra e si capisce subito il taglio: non “un sito”, ma un prodotto personale con una direzione chiara.
Hero e About fanno da guida: poche frasi, scelte nette, zero dispersione.
2. Proof of Work
Niente “progetti finti”: lavori selezionati, con prove cliccabili.
KatanOS è centrale e il resto è consultabile con link diretti (Microsoft Store / GitHub), con demo live quando disponibili.
3. Esperienza fluida
La navigazione non interrompe mai la lettura: transizioni, scroll smooth e micro-interazioni fanno percepire il portfolio come un’unica esperienza continua.
Funzionalità principali
Navigazione “sfoglio senza caricamenti” grazie a routing client-side e transizioni tra sezioni
Animazioni e micro-interazioni (motion/hover/feedback UI) per rendere tutto più naturale
Scena 3D WebGL in background per un impatto immediato senza sacrificare leggibilità
Sezione Projects con link esterni (Microsoft Store / GitHub) e demo live quando disponibili
Pagina dedicata a KatanOS per approfondimento (contesto, feature e link)
- Sezioni legali integrate: Privacy Policy e Terms
- risultato
Risultato finale
Un portfolio che parla come un prodotto: chiaro, immersivo e memorabile.
L’utente entra, capisce subito il posizionamento, scorre senza interruzioni e arriva ai progetti con link diretti (Store/GitHub) in pochi secondi.
