Panoramica

Sito ufficiale One Ocean Foundation costruito con Next.js 15 (App Router) e React 19. La piattaforma è completamente multilingue (IT/EN) e offre sezioni editoriali per Missione, Blue Economy, Aree di impatto, Progetti, Notizie, Eventi, Risorse, Team e Partner. La UI è disegnata con Tailwind e componenti custom, con animazioni fluide basate su GSAP e smooth scrolling integrato.

Contenuti dinamici via Strapi (dynamic blocks)

Progetti, Notizie ed Eventi sono gestiti tramite CMS e composti da “blocchi dinamici” che mappano 1:1 componenti React tipizzati.

Le pagine di dettaglio consumano i dynamic blocks e li passano ai componenti di rendering.

L’API client costruisce query Strapi con deep populate, filtri, paginazione e parametri di ottimizzazione.

Animazioni e Motion Design

Smooth scrolling con Lenis sincronizzato a GSAP per garantire frame pacing e ScrollTrigger affidabile.

Sezioni “morph” con zoom, pinning e transizioni di background, animazioni letter-by-letter per heading, cambi cromatici e reveal su scroll nelle sezioni.

Slider e caroselli: Embla per slider e autoscroll con IntersectionObserver per autoplay video solo quando in viewport.

Internazionalizzazione e routing localizzato

Routing locale-aware con next-intl: mappatura path IT/EN in i18n/routing.ts (es. /progetti ↔ /projects, /i-nostri-eventi ↔ /events).

Switch lingua “smart”: gestisce pagine statiche e dinamiche (notizie, progetti, eventi, settori) risolvendo gli slug tradotti tramite Strapi.

SEO internazionale: metadati dinamici e alternates con hreflang per tutte le lingue.

SEO e DX

Metadati dinamici per ogni pagina via getPageMetadata() con Open Graph e Twitter card.

ISR dove opportuno (es. notizie: revalidate = 3600, generateStaticParams() parziale) e Suspense in pagina Progetti per caricamenti concorrenti.

Fetch handler custom con timeout, error handling e logging.

Esperienza utente e UI

Tailwind per il design system e componenti custom (button, hero, carousel, charts).

Sezioni SDG con slider interattivo e grafico dedicato.

Navbar responsiva con varianti di colore e menù mobile/desktop.

Ruolo e collaborazione

Mi sono occupato principalmente dello sviluppo front-end, lavorando in team con un collega.

Ho toccato anche qualche aspetto di Strapi CMS: modellazione delle collection types, componenti riutilizzabili, dynamic zones, relazioni e localizzazioni.

Questo ha permesso un flusso editoriale flessibile e scalabile mantenendo coerenza tra contenuto, URL localizzati e SEO.

Highlight tecnico

• UI animata: GSAP + ScrollTrigger + Lenis.
• CMS-driven con dynamic blocks (Strapi) e deep populate.
• i18n avanzata con path localizzati, slug tradotti e hreflang.
• Performance: ISR, Suspense, fetch con timeout e ottimizzazioni payload.