One Ocean Foundation: bilingual website with content from Strapi
Case study
- My role
- I built the front end in Next.js, with the Ride On development team.
- Duration
- Started in March 2025
The problem
The foundation publishes a lot of content in two languages and wanted a visually striking website that its team could update from the CMS without touching the code.
What I did and why
- Dynamic blocks: content composed from blocks in Strapi becomes typed React components.
- Translated URLs, with a language switch that finds the translated slug of every page.
- International SEO: per-page metadata and hreflang for every language.
- Animations with GSAP and Lenis: pinned sections, zooms and letter-by-letter headings.
- Videos that only play when they are visible.
Results
- IT + ENwith translated URLs
- 3 content typesprojects, news and events from CMS blocks
- GSAP + Lenissynchronised scroll animations
Stack highlights
- Next.js
- React 19
- Strapi
- GSAP
- Lenis
- next-intl
- Embla Carousel
- Tailwind CSS
Working on something similar? Let's talk.
Get in touchThe foundation publishes projects, news and events by composing them from blocks in the CMS, and every block becomes a component on the site. Addresses are translated, and the language switch leads to the same news item or project in the other language, not to the home page. The main sections have scroll animations: zooms, pinned sections and headings that appear letter by letter.
I wrote about how I built the event cards animation, later removed from the home page in the October 2026 redesign, in the post Cards that stack on scroll.
What I bring to an agency or a small business from this project
- A front end that works with the headless CMS the client or agency already chose, Strapi included.
- A bilingual website where the language switch also works on dynamic pages.
- Elaborate animations on a website with a lot of editorial content.
Realized for One Ocean Foundation in collaboration with Ride On
