The digital landscape has long grappled with the distinction between mere documentation of work and the profound demonstration of thought, process, and technical mastery. Corentin Bernadou, a French freelance developer, has emphatically positioned his latest WebGL portfolio within the latter category, unveiling a meticulously crafted online presence that serves not only as a showcase for his client projects but also as a sophisticated laboratory for creative coding and interactive design. This comprehensive rebuild, undertaken after a six-year hiatus, marks a significant evolution in personal portfolio design, merging the timeless principles of Swiss editorial aesthetics with cutting-edge web technologies to forge a truly distinct and immersive user experience.
The Vision Behind the Six-Year Rebuild
Bernadou’s decision to overhaul his portfolio after nearly a decade reflects a commitment to staying at the forefront of web development while simultaneously challenging conventional approaches. The previous iteration, while likely functional, would have predated many of the advancements in browser capabilities and interactive graphics that are now standard. His objective was clear: to transcend the static display of past projects and instead create an environment that actively embodies his design philosophy and technical prowess. This ambition led to a "creative coding laboratory" concept, where the portfolio itself becomes a dynamic exhibit of his capabilities, pushing the boundaries of what a personal website can achieve. The six-year gap allowed for a mature reflection on web design trends, user experience expectations, and the potential of modern web technologies, culminating in a project that is both retrospective in its design influences and forward-looking in its technical execution.
Architectural Foundations: Swiss Style Meets Digital Canvas
At the core of Bernadou’s portfolio lies a profound homage to the Swiss Style, also known as the International Typographic Style. This design movement, which originated in Switzerland in the 1950s, is characterized by its emphasis on cleanliness, readability, and objectivity. Key tenets include the use of sans-serif typography (often Akzidenz-Grotesk or Helvetica), a rigid grid-based layout, asymmetrical compositions, and a commitment to clear visual hierarchy. Bernadou’s adaptation of these principles is evident in the portfolio’s carefully selected palette of orange, white, and black, which provides high contrast and visual clarity. The typographic systems are tight and precise, ensuring optimal legibility and a sense of order.
To achieve this level of structural integrity, Bernadou meticulously studied physical design artifacts—books and poster layouts—in bookstores, translating their spatial rhythms and inherent precision into a browser-native experience. The result is a 2D editorial surface that evokes the structured and deliberate feel of a high-quality printed design annual, rather than a typical, often unstructured, personal website. This commitment to a historically rich design aesthetic provides a robust foundation upon which the more experimental interactive elements are built, ensuring that even with complex animations and 3D graphics, the user experience remains grounded in clarity and organization. This fusion of print-inspired layout with digital interactivity represents a sophisticated approach to information architecture, prioritizing content and user comprehension above mere visual flair.
The Interplay of Dimensions: WebGL, Three.js, and GLSL
The defining characteristic of Bernadou’s portfolio, and indeed its central tension, is the harmonious integration of flat, editorial clarity with a layered 3D environment. This is primarily achieved through the strategic application of WebGL, a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the need for plug-ins. Leveraging WebGL, Bernadou employs Three.js, a popular JavaScript 3D library that simplifies the creation and display of 3D graphics, along with GLSL (OpenGL Shading Language) for custom shaders.
On the homepage, project previews are artfully embedded within a WebGL geometry built using these technologies. This approach introduces a dynamic sense of depth and dimensionality without compromising the established typographic hierarchy or the overall legibility of the Swiss-inspired layout. The challenge of balancing these two seemingly opposing design philosophies—the structured precision of 2D editorial design and the fluid expansiveness of 3D graphics—required numerous iterations and meticulous refinement. The success of this integration lies in the subtle manner in which the 3D elements enhance rather than disrupt the user’s focus on content. For instance, a project preview might subtly rotate or shift in perspective as the user interacts, offering an engaging visual cue without demanding excessive cognitive load. This thoughtful implementation transforms the portfolio from a passive display into an interactive journey, where each interaction reveals a deeper layer of design consideration.
A Framework-Agnostic Approach: The Power of Vanilla JavaScript
In an era dominated by front-end frameworks like React, Vue, and Angular, Bernadou’s decision to build his entire portfolio using pure vanilla JavaScript stands out as a deliberate and principled choice. This approach grants him unparalleled control over every aspect of the site’s performance, animation, and user experience, bypassing the abstractions and potential overhead associated with larger frameworks. While frameworks offer significant advantages in terms of development speed and scalability for large applications, vanilla JavaScript, when expertly wielded, can deliver superior performance and a more bespoke feel for highly customized projects like a creative portfolio.
Complementing his vanilla JavaScript core, Bernadou utilizes a suite of carefully selected tools:
- SCSS (Sassy CSS): A powerful CSS preprocessor that extends CSS with features like variables, nesting, and mixins, enabling more organized and maintainable stylesheets.
- BEM (Block, Element, Modifier): A methodology for writing CSS that helps create reusable and modular UI components, further enhancing the maintainability and scalability of the codebase.
- JSON (JavaScript Object Notation): Instead of relying on a Content Management System (CMS) for page data, Bernadou stores content in JSON files. This choice simplifies data management for a static site, offering direct control and reducing external dependencies, which can often introduce latency or security vulnerabilities.
- GSAP (GreenSock Animation Platform): Recognized as an industry standard for robust, high-performance web animations, GSAP drives the sophisticated motion graphics throughout the site. Its precision and cross-browser compatibility are crucial for delivering the fluid and polished animations that define the portfolio’s interactive elements.
- Lenis: A lightweight JavaScript library for smooth scrolling, Lenis enhances the user experience by providing a more natural and visually appealing scroll interaction, further contributing to the site’s overall polished feel.
- PJAX (PushState AJAX): A routing system that handles animated page transitions by loading new content via AJAX and updating the browser’s URL using the HTML5 History API (pushState). This technique allows for seamless, animated transitions between pages without a full page reload, significantly improving perceived performance and maintaining a continuous user experience.
This meticulous selection of tools and the deliberate avoidance of heavy frameworks underscore Bernadou’s commitment to lean, high-performance web development, ensuring that the site loads quickly and runs smoothly across various devices, a critical factor for an experience-driven portfolio.
Interactive Precision: Figma-Inspired Rulers and Navigation
One of the most innovative and user-centric features of Bernadou’s WebGL portfolio is its interactive grid rulers system, a direct nod to professional design software like Figma. This system bridges the gap between the static design mockups designers work with and the live, dynamic environment of a web browser. By clicking a central cross icon on the interface, users can activate 1-pixel guide lines that precisely frame the page title. This functionality is achieved using getBoundingClientRect(), a native JavaScript method that returns the size of an element and its position relative to the viewport. This subtle yet powerful tool allows users to momentarily "inspect" the underlying grid structure, reinforcing the Swiss Style’s emphasis on precision and order.
Further enhancing this interactive design experience, users have the ability to place custom markers directly on the interface, much like placing guides in Figma. This tactile interaction empowers visitors to actively engage with the layout, understanding its construction on a deeper level. For those who wish to fully immerse themselves in the site’s foundational structure, a simple keyboard shortcut (Option + G) reveals the complete layout grid, making transparent the intricate planning that went into the site’s visual architecture. These features transform the portfolio from a mere viewing experience into an interactive educational tool, demonstrating Bernadou’s commitment to both design fidelity and user empowerment.
The navigation system further exemplifies this blend of tactility and fluid animation. A dynamic mask follows the user’s cursor as it hovers between menu items. This mask resizes fluidly and intelligently via GSAP interpolation, providing a subtle yet engaging visual feedback mechanism. This attention to detail in interactive elements elevates the user experience, making navigation feel intuitive and responsive, reinforcing the impression of a meticulously crafted digital artifact.
The Evolution of the Digital Portfolio
Bernadou’s portfolio arrives at a time when the digital portfolio itself is undergoing a significant transformation. Historically, portfolios were static collections of images and text, primarily serving as a digital resume. However, with the advent of WebGL, advanced animation libraries, and increasingly powerful browsers, the expectation for creative professionals’ portfolios has shifted. They are no longer just repositories of past work but living, breathing demonstrations of current capabilities and future potential.
This trend reflects a broader industry movement towards more immersive and personalized web experiences. Companies and individuals alike are investing in unique digital identities that stand out in a crowded online space. Bernadou’s work aligns perfectly with this trajectory, offering a blueprint for how developers and designers can leverage advanced technologies to create truly memorable and impactful online presentations. His project underscores the idea that a portfolio should not just tell you what a professional can do, but show you, through its very existence and functionality.
Broader Implications for Web Design and Development
The implications of Bernadou’s WebGL portfolio extend beyond personal branding. It serves as a compelling case study for several key aspects of modern web development and design:
- The Renaissance of Vanilla JavaScript: His choice to eschew frameworks highlights the ongoing debate about the necessity of complex libraries versus the benefits of direct control and optimized performance. For projects demanding extreme customization and performance, vanilla JavaScript, coupled with judiciously chosen micro-libraries, proves its enduring value.
- Bridging Design and Development: The Figma-inspired rulers exemplify a growing trend towards blurring the lines between design tools and development environments. As web interfaces become more complex and interactive, the ability to integrate design-centric features directly into the live experience can enhance collaboration and understanding between designers and developers.
- Performance as a Feature: By prioritizing lean code and efficient animation techniques (GSAP), Bernadou demonstrates that highly interactive and visually rich experiences do not have to come at the cost of performance. This sets a high bar for future web projects, emphasizing that aesthetic ambition must be paired with technical optimization.
- The Enduring Power of Classic Design Principles: The successful integration of Swiss Style principles into a dynamic 3D environment proves that timeless design concepts remain highly relevant in cutting-edge digital contexts. It suggests that a strong foundational understanding of design history can inform and elevate even the most technologically advanced projects.
- Inspiring Creative Coding: The portfolio acts as an open invitation for other developers to explore the creative possibilities of WebGL and Three.js. By demonstrating what can be achieved with thoughtful application of these technologies, Bernadou contributes to the ongoing evolution of creative coding as a distinct and respected discipline within web development.
A Benchmark for Creative Coding
Corentin Bernadou’s WebGL portfolio is more than just a personal website; it is a meticulously crafted digital artifact that pushes the boundaries of web design and development. By seamlessly blending the structured elegance of Swiss editorial design with the dynamic capabilities of WebGL and Three.js, and by embracing a framework-agnostic approach with vanilla JavaScript, Bernadou has created an experience that is both visually stunning and intellectually stimulating. The interactive grid rulers and dynamic navigation further underscore a commitment to thoughtful user interaction and a designer’s eye for precision.
This project stands as a testament to the power of deliberate design choices, technical mastery, and a willingness to challenge conventional wisdom. For those interested in a deeper dive into the technical intricacies, including shader structures and animation choreography, a comprehensive case study is available on the Codrops feature article. To experience this groundbreaking WebGL portfolio firsthand, visitors are encouraged to explore corentinbernadou.com, where the blend of art, design, and engineering unfolds in real-time.