Next.js 15 · Headless WordPress · Three.js · Storybook
Headless WordPress with 3D, maps and multi-brand themes
The most feature-rich Nextpress build: programmes, campuses, faculty and events on headless WordPress, with a large block library, a second brand theme, Three.js scenes and a Figma token pipeline.
Overview
Client: École Ducasse
Role: Senior Engineer
Built on: Nextpress (headless WordPress + Next.js)
A headless site for École Ducasse covering degree programmes, campuses, faculty, events, alumni, internships and advisors — each modelled as its own content type in WordPress and rendered through a large library of Next.js blocks.
Highlights
- A broad block library: degree heroes, course listings, campus galleries, faculty grids, event listings and speakers, alumni carousels, forms and more.
- Multiple brand themes: a Ducasse theme with burgundy and grey variants plus a Sommet theme, each with its own blocks, switchable from the CMS.
- Rich interaction: Three.js scenes with React Three Fiber, GSAP and Framer Motion animation, parallax and tilt effects, and interactive maps with marker clustering.
- Events that manage themselves: scheduled archiving moves past events out of listings automatically.
Technical details
Design system
Design tokens are pulled from Figma through its API and compiled into typed CSS variables for both brand themes whenever the dev server starts. Components are documented and tested in Storybook.
Rendering and editing
A catch-all route resolves every URL through the Nextpress router endpoint and renders the returned block tree. A dedicated block-preview route lets editors see live-rendered blocks inside the Gutenberg editor.
Stack
- Next.js 15, TypeScript, Tailwind CSS, Sass, React Three Fiber and Drei, GSAP, Framer Motion, Leaflet and Google Maps, next-auth with WordPress JWT, next-intl, VWO, Calendly.
- Headless WordPress with ACF on AWS Lightsail; frontend on Vercel with deploys triggered from WordPress on publish.