Enhancing My Portfolio with GSAP: From Shader Uniforms to Clip-Path Wipes

An Insight into My Portfolio's Evolution

I'm Thibault Guignand, and my career spans freelance projects and full-time positions. This dual approach gives me access to a broad spectrum of work, balancing the rigid requirements of corporate assignments with the imaginative freedom of creative endeavors. Ultimately, my ambition is to devote myself solely to the latter, where my true passion lies. My recent portfolio redesign became a personal experiment—a chance to gauge my current standing within the creative web arena. The foundations of this fresh design were already woven into my previous work; I aimed to revisit that theme, refine it, and align it with the wealth of experience I've gained over the years. The process wasn't merely cosmetic; it was a litmus test for my growth as a creator. Daily inspiration comes from a collective of creatives I admire, such as Aristide Benoist, Cathy Dole, and Corentin Bernabou, as well as platforms like Awwwards. I don’t emulate their styles; instead, I use their work as a benchmark for my own aspirations. Crafting this redesign took several weeks. While the initial setup progressed quickly, the polishing required more time. Perfecting the responsiveness across devices—desktop, tablet, mobile, and accommodating reduced motion—was a meticulous endeavor. Each format had to meet my standards before I could consider it complete. For the technical foundation, I started with Three.js, a natural choice for implementing the WebGL layer. However, halfway through the process, I switched to OGL. That decision proved beneficial; the lighter bundle size and simpler API gave me a codebase that felt genuinely under my control at every level.

Tech Choices That Matter

The technology stack I employed is deliberately mainstream. Choosing widely-used tools enables me to showcase mastery of the same essential building blocks that studios implement in their projects. **Vite + React 18 + TypeScript.** These are my go-to choices now. They speed up the development process and provide confidence through strong typing, leaving no surprises for anyone who examines the code. **GSAP.** I've been an advocate of GSAP since its inception. Now that it's free, it’s an obvious selection. I'm particularly fond of the capabilities offered by the SplitText plugin, ScrollTrigger, and the timeline API, which are exceptional for the type of dynamic motion I strive to achieve in my work. **OGL.** As touched upon earlier, the shift was from Three.js to OGL, prioritizing lightweight performance and inviting a deeper exploration of low-level WebGL intricacies. **Lenis.** I found that the native scrolling mechanics struggle with tightly synchronized ScrollTrigger animations. Lenis enhances the scroll experience, delivering smooth transitions while providing a consistent synchronization point with GSAP’s ticker. **SCSS + BEM.** This is more about personal habits and preferences. In the context of writing shaders and designing layouts, a clear naming convention keeps my workflow organized. **i18n (FR/EN).** Given that creative awards feature international juries, fluency in both languages is essential to tap into the broadest audience for site evaluations. For design, I began with Figma, laying out the grid to ensure consistent rhythm and proportions. This layout was then translated into the production CSS. By pressing Cmd/Ctrl + G, you can visualize the grid in action: uniform gutters, rows, and columns track where the actual content is placed. I take care to design typography, motion, and transitions directly in code to minimize handoffs and streamline the feedback loop.

Final Thoughts

This project wasn't just a creative endeavor; it was a meticulous exercise in pushing boundaries and refining skills. The ambition was clear: not only to craft a portfolio but to set an elevated standard for what web experiences can and should deliver. The results speak to the commitment and detail-oriented mindset behind the work—so much so that it raises a question: have we really reached the limits of current web technologies, or are we merely scratching the surface? What stands out here is the deliberate intention behind every design choice. The persistent use of a flowmap pattern, for example, demonstrates an understanding of performance—a key issue for developers today. The decision to treat reduced motion as a parallel design rather than a fallback option reflects evolving attitudes towards accessibility. These aren't just impressive technical feats; they represent a broader shift in how we think about user experience in web design. However, the complexity of managing transitions, particularly with Safari's quirks, shows that even seasoned developers face challenges. The intricacies of browser behavior continue to be an unpredictable landmine. If you’re navigating this landscape, take heed: meticulous testing is non-negotiable. Looking ahead, the integration of tools like OGL hints at a burgeoning simplicity in achieving sophisticated graphics. The next wave of web design will likely lean even more on such foundational technologies, allowing for innovation without getting bogged down in complexity. Embracing frameworks that streamline processes, like Sanity, could make all the difference in future projects, providing clarity where there once was friction. In summary, this journey serves as an invitation for developers to reassess their approaches. Every challenge faced is a testament to the need for continuous learning and adaptability. Have you left your all on the field? If not, now’s the time to rethink your strategies and set your sights on those higher expectations you wish to achieve.