TEST

Marco Zaninelli

Tipo progetto:
Website
Anno:
2025
Cliente:
Marco Zaninelli
Librerie:
  • React
  • Next JS
  • Tailwind CSS
  • Sanity Studio
Design:
Figma
Codice:
Git Hub

Benvenuti nel mio playground.
Questo è il sito che ho realizzato per me stesso. L’obiettivo è mostrare i progetti su cui ho lavorato e, in generale, condividere anche altre passioni come la fotografia.

Il sito è realizzato con Next.js e Sanity Studio: ho scelto questa combinazione perché mi garantiva la massima libertà estetica, insieme a un’ottima ottimizzazione SEO, mentre Sanity mi permette di aggiornare facilmente i contenuti senza intervenire direttamente sul codice. Mi sono concentrato in particolare su accessibilità e adattabilità ai dispositivi mobili più che sulla pura ottimizzazione SEO. Ho cercato anche di integrare piccole animazioni per rendere l’esperienza più dinamica, pur essendo – da fotografo – un amante delle composizioni statiche.

Il sito si compone di tre pagine principali e di un template dedicato ai singoli progetti:

Pagina principale del sito con solo test e logo MZ sullo sfonzo.

Homepage

Con questa pagina ho voluto allontanarmi dalle classiche homepage, inizialmente eliminando il menu di navigazione (che poi ho reintrodotto per migliorare familiarità e accessibilità). Ho scelto di utilizzare esclusivamente testo per presentarmi, mantenendo un approccio minimal. I link alle altre pagine sono integrati nel testo e sottolineati per essere ben riconoscibili.

Pagina dei progetti con griglia dei progetti sulla destra e immagine sulla sinistra.

Pagina portfolio

Qui raccolgo i miei lavori e progetti personali, principalmente legati allo sviluppo web ma anche al product design e, in futuro, forse alla fotografia. Ho scelto una griglia interattiva: i progetti sono elencati e, selezionandoli, l’immagine corrispondente appare accanto, offrendo una panoramica immediata. L’adattamento a dispositivi mobili è stata una sfida, visto che non esiste la funzionalità “hover” come su desktop. Ho risolto introducendo una modalità di scroll e tap per facilitare la navigazione.

Pagina post di un sito con immagine principale in cima con sotto titolo, barra laterale con metadata e contenuto sulla destra.

Pagina del singolo progetto

Ogni progetto ha la sua pagina dedicata, generata automaticamente tramite i dati inseriti su Sanity Studio. Nella barra laterale compaiono i metadati più importanti: tecnologie utilizzate, link al codice e ai design preliminari. La descrizione del progetto mantiene un tono colloquiale e personale piuttosto che tecnico, pur restando attenta all’accessibilità.

invalid

Galleria

Questa sezione è ancora in fase di sviluppo: l’idea è discostarmi dalle classiche gallerie a griglia per proporre una presentazione più creativa e originale.