One Ocean Foundation

Mar 2025・still working

Frontend・

Headless CMS

Official One Ocean Foundation website built with Next.js 15 (App Router) and React 19. The platform is fully multilingual and provides editorial sections for Mission, Blue Economy, Impact Areas, Projects, News, Events, Resources, Team, and Partners. The UI is designed with Tailwind and custom components, with polished motion powered by GSAP and a smooth scrolling layer.

Technologies:

Next.js

Strapi

GSAP

Tailwind CSS

Vercel

Overview

Official One Ocean Foundation website built with Next.js 15 (App Router) and React 19. The platform is fully multilingual (IT/EN) and offers editorial sections for Mission, Blue Economy, Impact Areas, Projects, News, Events, Resources, Team, and Partners.

The UI is crafted with Tailwind and custom components, featuring smooth animations powered by GSAP and integrated smooth scrolling.

Dynamic Content via Strapi (Dynamic Blocks)

Projects, News, and Events are managed through a CMS and composed of dynamic blocks that map 1:1 to strongly typed React components.

Detail pages consume these dynamic blocks and hand them off to rendering components.

The API client builds Strapi queries with deep populate, filters, pagination, and optimization parameters.

Animations and Motion Design

Smooth scrolling with Lenis is synchronized with GSAP to guarantee stable frame pacing and reliable ScrollTrigger timelines.

Morph sections leverage zoom effects, pinning, and background transitions, while headings feature letter-by-letter animations and color/reveal transitions on scroll.

Sliders and carousels use Embla for autoplay and autoscroll, coupled with IntersectionObserver so videos play only when they enter the viewport.

Internationalization and Localized Routing

Locale-aware routing via next-intl maps Italian and English paths in i18n/routing.ts (e.g., /progetti ↔ /projects, /i-nostri-eventi ↔ /events).

A smart language switcher handles both static and dynamic pages (news, projects, events, industries) by resolving translated slugs through Strapi. International SEO is covered with dynamic metadata and alternates including hreflang for every locale.

SEO and Developer Experience

Dynamic metadata for each page is generated by getPageMetadata() with Open Graph and Twitter Card support.

ISR is applied where it makes sense (e.g., News uses revalidate = 3600 and a partial generateStaticParams()), while the Projects page relies on Suspense for concurrent data fetching.

A custom fetch handler adds timeouts, error handling, and logging.

User Experience and UI

Tailwind underpins the design system and custom components (buttons, hero sections, carousels, charts). The SDG sections combine an interactive slider with a dedicated chart. The responsive navbar offers themed variants and distinct mobile/desktop menus.

Role and Collaboration

I focused primarily on the front-end development while collaborating with a teammate. I also contributed to Strapi CMS: modeling collection types, reusable components, dynamic zones, relationships, and localizations. This enabled a flexible, scalable editorial workflow that keeps content, localized URLs, and SEO tightly aligned.