The landscape of modern web development is increasingly defined by the intersection of high-performance engineering and experimental creative design. Thibault Guignand, a developer operating in the unique dual capacity of a freelancer and a full-time employee, recently unveiled a comprehensive redesign of his professional portfolio. This project serves not merely as a digital resume but as a sophisticated laboratory for measuring the current limits of creative web technologies. Guignand’s strategic objective is a complete transition into high-level creative work, and this redesign functions as a technical manifesto, demonstrating a mastery of motion, performance, and WebGL architecture.
The project represents the culmination of years of experience, drawing inspiration from industry leaders such as Aristide Benoist, Cathy Dole, and Corentin Bernabou. By benchmarking his work against platforms like Awwwards, Guignand has developed a site that emphasizes technical precision and aesthetic cohesion. The development cycle spanned several weeks, with the core architecture assembled rapidly, followed by an extensive period of refinement to ensure seamless behavior across desktop, tablet, and mobile platforms, as well as adherence to accessibility standards for reduced motion.
Technical Infrastructure and Strategic Tooling
The selection of a technology stack was a deliberate exercise in balancing industry-standard reliability with experimental efficiency. Guignand utilized Vite, React 18, and TypeScript as the foundational layer. This combination provides a rapid development loop and a type-safe environment that ensures code maintainability—a critical factor for projects intended to be audited by technical directors at creative studios.
A pivotal moment in the project’s chronology occurred during the development of the WebGL layer. Initially, Guignand employed Three.js, the most widely used 3D library in the browser ecosystem. However, halfway through the build, he opted for a complete rewrite using OGL. This decision was driven by a desire for a lighter bundle size and a leaner API. OGL allows for a more granular, line-by-line understanding of the codebase, offering a lower-level approach to WebGL that maximizes performance by removing the overhead often associated with more comprehensive frameworks.
To manage the complex motion requirements of the site, Guignand integrated the GreenSock Animation Platform (GSAP). Specifically, the site leverages GSAP’s SplitText for typography manipulation, ScrollTrigger for scroll-bound animations, and the core Timeline API for sequencing. Complementing this is Lenis, a smooth-scrolling library that addresses the inherent brittleness of native scrolling when coupled with high-precision animations. By syncing Lenis with GSAP’s ticker, the developer established a single source of truth for all motion-related data.
Advanced Feature Breakdown: The Video Carousel and Flowmap
One of the most visually striking elements of the portfolio is the homepage’s full-screen video carousel. This feature utilizes a block-reveal pattern distorted by noise and chromatic aberration. Technically, this is achieved through a fragment shader running on a full-screen triangle in Normalized Device Coordinate (NDC) space. The transition is governed by a single "progress" uniform—a bridge between the JavaScript logic and the GPU.
Guignand’s implementation of this uniform is a masterclass in efficiency. Rather than managing complex state within the shader, the entire choreography is driven by a GSAP timeline in the JavaScript layer. As the timeline tweens the progress value from 0 to 1, the value is copied to the OGL uniform every frame. This allows for the use of custom eases and chained timelines without modifying the GLSL code. Furthermore, to optimize GPU memory, video textures are flagged for updates only during active transitions, reverting to native HTML5 video playback during idle states to minimize GPU uploads.
Beyond the carousel, the site features a fluid text distortion effect driven by cursor velocity. Utilizing OGL’s Flowmap helper, the system records cursor movement into an off-screen texture, creating a fading "brush stroke" of motion data. The shader then samples this flowmap to distort text UV coordinates while applying directional chromatic aberration. To prevent the performance degradation typically associated with mounting multiple WebGL contexts, Guignand engineered a single, persistent FlowmapEffect at the application level. This context survives route changes, merely swapping image textures as needed, and includes an "idle guard" that halts the requestAnimationFrame loop after 90 frames of cursor inactivity.
Engineering for Performance: The Scroll Morph and Page Transitions
At the conclusion of each project page, Guignand implemented a "Next Project" scroll morph that serves as a seamless navigational bridge. As the user scrolls, a background image unclips and scales while an SVG progress circle completes a circuit. Reaching 100% progress triggers an automatic navigation to the subsequent project.
From an engineering perspective, this feature prioritizes performance by bypassing React’s reconciliation engine. Using a ScrollTrigger with a scrub value of 1, the onUpdate callback writes directly to the DOM’s style properties. By manipulating element.style.transform and element.style.clipPath directly, the site avoids the overhead of a full React render tree update on every frame—a crucial optimization for maintaining a 120Hz refresh rate on high-end displays.
The navigation logic is further stabilized by a three-state machine (idle, triggered, navigating). This prevents "phantom navigations" caused by erratic scrolling behavior or rapid flick-scrolling. The system includes guards for scroll velocity and a requirement that the user must have viewed the top of the section before the auto-navigation can engage.
Page transitions are handled through a sophisticated interplay between GSAP and the browser’s native View Transition API. When a link is activated, the site initiates a visual fadeout of WebGL elements and the UI grid while simultaneously preloading the data and assets for the next route. The use of React Router’s navigate function is wrapped in flushSync, ensuring that the DOM mutation occurs synchronously within the View Transition callback. This precision allows the API to capture the correct states for the final clip-path morph.
Accessibility and Professional Design Philosophy
While the portfolio is a showcase of high-fidelity effects, Guignand has made significant concessions to accessibility and professional standards. A critical component of this is the handling of the prefers-reduced-motion media query. Rather than simply disabling animations, the developer treated reduced motion as a parallel design challenge. The result is a version of the site that conveys the same creative intent and technical sophistication without the vestibular triggers associated with high-velocity motion.
The visual language of the site is described by Guignand as a "technical handshake" for the web development community. Design elements such as the visible layout grid—which can be toggled via a keyboard shortcut—and the use of technical shaders are intentional signals to creative directors and technical leads. This transparency demonstrates that the visual effects are not merely superficial additions but are deeply integrated into the site’s CSS and logic.
Chronology of Development and Future Implications
The development of the portfolio followed a structured timeline:
- Conceptualization and Grid Design: Initial layouts were sketched in Figma to establish rhythm and proportions.
- Core Build: Implementation of Vite, React, and the initial Three.js WebGL layer.
- The OGL Pivot: A mid-project decision to rewrite the WebGL architecture for better performance and control.
- Feature Polishing: Extensive refinement of the GSAP-driven transitions and the scroll-bound state machines.
- Optimization and Accessibility: Final passes on performance bottlenecks and the implementation of the reduced motion alternative.
Looking forward, the project highlights a growing trend in the creative web: the shift toward lightweight, modular libraries like OGL and the increasing importance of the View Transition API. Guignand noted that while the current content layer relies on static JSON and typed files, future iterations would likely benefit from a headless CMS like Sanity to streamline asset management and internationalization.
In conclusion, Thibault Guignand’s portfolio redesign stands as a significant contribution to the field of creative front-end development. By prioritizing performance through direct DOM manipulation, leveraging the power of GSAP for unified motion control, and adopting a leaner WebGL stack, the project provides a blueprint for modern, high-impact web design. It serves as a reminder that in the creative web game, the most successful projects are those where the developer "leaves it all on the field," pushing both the technology and their own technical boundaries to their absolute limits.
