Core One

Sole implementation of a designer-led Next.js and Craft CMS website, from responsive pages to interactive motion and 3D particles.

My role: Sole developer · Full website implementation
Collaboration: I worked directly with the designer and handled the full implementation.
Areas: Creative frontend / Animation / 3D / Responsive implementation / CMS integration

01 / Project context

The project in context.

I implemented the entire Core One website, following the designer’s direction. My work covered the pages, CMS integration, responsive interface and all animation and interaction work, including the opening lines, Beyond the Mission, pointer-lit mountains, merging circles and 3D particle transformations.

The challenge

The project required translating the designer’s direction into a complete working website. I was responsible for implementing both the content experience and the distinctive behaviours: interactive graphics, pointer responses, animated lines and particles that transition between forms.

02 / Contribution

Working inside the project, not around it.

Implemented all pages and frontend components following the designer’s direction.
Implemented the Next.js and Craft CMS integration and responsive website.
Built interactive graphics that respond to user input, including a circular selector linked to content tabs, landscapes that light up under the pointer, and animated lines and merging shapes.
Implemented the 3D particle animation and transitions between particle forms.

Approach

01Translate the designer’s direction into the site’s pages, components and animated behaviours.
02Carry implementation across the complete Next.js and Craft CMS website, including its responsive interface.
03Build the individual interactions as part of the surrounding page experience.

03 / Project sequence

Beyond the Mission

A graphic you can interact with.

3D particles

From one particle form to another.

Core One visual experience adapted for mobile screens

Responsive adaptation

The same experience across screen sizes.

04 / Technical challenges

Connected interaction states

Users can explore content by selecting segments of a circular graphic or using text tabs. Both controls need to stay in sync with the content displayed.

Implemented the connection between the selected circle segment, the active tab and its content. The graphic acts as part of the navigation through the section’s content.

Particle transformations

The particle experience includes movement between different forms as well as a 3D animated state.

Implemented the particle animation and the transitions connecting those forms. The transformation itself becomes a visible part of the experience.

05 / Outcome

A complete Next.js and Craft CMS website implemented by one developer from the designer’s direction. The delivered experience brings together responsive pages, interactive graphics, pointer-driven effects and 3D particle animation. It demonstrates my ability to carry a visual concept through to its working implementation.

Next.js · React · TypeScript · Tailwind CSS · Craft CMS

Next project

NTI →