Corentin Bernadou's WebGL portfolio blends Swiss editorial design with Three.js geometry, Figma-inspired interactive rulers, and pure vanilla JavaScript.

There's a clear distinction between portfolios that document work and portfolios that demonstrate thinking. Corentin Bernadou's personal site belongs to the second category. The French freelance developer rebuilt his WebGL portfolio for the first time in six years — both a client showcase and a creative coding laboratory.

The visual identity draws from the Swiss Style — a palette of orange, white, and black, tight typographic systems, and a grid-forward layout that reads more like a printed design annual than a personal website. Bernadou studied books and poster layouts in bookstores before translating those spatial rhythms into the browser. The result is a 2D editorial surface that feels structured and precise.

Where WebGL Geometry Meets Swiss Editorial Design

The central tension is flat editorial clarity against a layered 3D environment. On the homepage, a WebGL geometry built in Three.js and GLSL incorporates project previews, adding depth without disrupting typographic hierarchy. Balancing both took many iterations.

Motion runs through GSAP. Lenis manages smooth scroll. There are no frameworks — Bernadou chose vanilla JavaScript for full control, paired with SCSS and BEM, and JSON-stored page data instead of a CMS. A PJAX routing system handles animated page transitions throughout.

One of the most considered features in this WebGL portfolio is the interactive grid rulers system. Clicking a central cross activates 1px guide lines framing the page title using getBoundingClientRect(). Users can also place markers directly on the interface — a Figma-inspired touch — and reveal the full layout grid via Option + G. These tools bridge design software and browser experience, giving the WebGL portfolio a distinct identity.

The navigation adds tactility through a dynamic mask that follows the cursor between menu items, resizing fluidly via GSAP interpolation. The full case study on the Codrops feature article goes deeper into the shader structure and animation choreography. Visit corentinbernadou.com to experience the live WebGL portfolio.