Julien Renau WebGL Portfolio Portfolio

Overview

This high-performance portfolio by Julien Renau is a masterclass in integrating WebGL and smooth GSAP animations within a Nuxt.js framework. It serves as an excellent reference for builders looking to implement complex, award-winning project grids that maintain extreme performance and clean typography.

Design System

• Color Palette & Visual Hierarchy: The site utilizes a high-contrast monochromatic scheme with a stark white background and black text. Deep gray is used sparingly (.intro-line.grey) for secondary information, while the focus remains on the vibrant, colorful media within the project carousel.
• Typography: The system uses a clean, modern sans-serif. Visual hierarchy is achieved through scale and weight: a large, bold logo (.logo) followed by medium-weight descriptions and uppercase labels for project categories and "Selected Works."
• Page Structure: The layout follows a linear vertical flow starting with a minimal hero/intro section, leading directly into a dense, interactive project grid (.projects-grid).
• Reusable Components:
  • Project Row: A complex assembly containing a title with background hover animations, a horizontally scrolling ticker for awards and technologies (.awards-container-anim), and a multi-video preview carousel.
  • Marquee Tickers: The continuous horizontal text scrolls used for displaying accolades and tech stacks are highly portable for any professional showcase.
  • Animated Lettering: The title transitions use split-span animations (.intro-logo-span) controlled by GSAP for a refined entry feel.
• Interaction & Motion: The site features "sticky" scroll behaviors where project titles remain visible while previews slide. Links include custom underline animations (.intro-lineAnimationBottom). Project rows utilize high-quality video previews that trigger automatically, creating a dynamic "living" grid.
• Implementation Clues: The HTML confirms the use of Nuxt.js for the architecture, GSAP for state-based animations, and a dedicated Three.js/WebGL wrapper (.canvasWrapper) for background effects.

Use Cases

• Creative Professional Portfolios: Ideal for developers, motion designers, or digital artists who need to showcase video-heavy case studies without sacrificing site speed.
• Agency Landing Pages: The dense project grid and scrolling award tickers can be remixed to handle a high volume of client work while maintaining a premium, boutique feel.
• Tech Product Showcases: The interactive grid can be adapted into a feature highlight section, where each "project" row represents a different product capability with its own looping video demo.
• Remix Directions: Builders should clone the .projects-grid-row structure to leverage the automated video handling and ticker system. For a quick remix, swap the monochromatic theme for a brand-specific accent color while keeping the GSAP-driven text animations for a high-end feel.