Martin Laxenaire Gamified WebGPU Portfolio

Overview

This portfolio is a benchmark for high-performance creative development, blending a gamified progression system with cutting-edge WebGPU/WebGL rendering. It serves as an excellent reference for builders looking to implement non-linear navigation, advanced data visualization, and immersive browser-based spatial experiences.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast base with a primary lime green (rgb(102, 230, 148)) often seen in animated characters. The visual hierarchy is heavily driven by central focal points, such as the white radial 'sunburst' effect, surrounded by segmented geometric shapes in greens, browns, and ochre.
• Typography System: The design utilizes a bold, wide sans-serif for headlines (seen in the 'MARTIN LAXENAIRE' logo and 'Crafting playful...' headings). Body text is a clean, readable sans-serif managed through line-masks for reveal animations. A distinct 'monospaced' or technical look is used for the progress percentage (0%) and section counters (e.g., '1.').
• Page Structure & Flow: The sequence is structured as 'Levels':
  1. Hero: Progress-locked landing page with a 'Slide to begin' input range.
  2. Intro/Bio: Narrative text with character-level letter animations.
  3. Project Gallery: A list of links with vertical stacking and index-based styling.
  4. Data Experiments: Interactive sections for 'Invoices' and 'GitHub Statistics' using procedural canvas elements.
• Reusable Components:
  • Slider Range Input: A custom styled <input type="range"> used as a gatekeeper for site entry.
  • Section Counters: Minimalist numbered markers (.count_1vwkd_17) that provide a sense of progression.
  • Animated Character Spans: A robust system for splitting text into words and chars for GSAP-style transforms and rotations.
• Interaction & Motion:
  • Gamified Lock: Sections are marked as inert and only unlocked via user interaction (sliding, dragging, or holding).
  • WebGL/WebGPU Canvases: Heavy use of <canvas> for background separators and interactive data 'spheres' or 'confetti'.
  • Hover States: Links include a data-hover-title attribute that triggers text changes to "Click!".
• Implementation Clues: The HTML confirms a Nuxt.js framework using CSS Modules (classes like _root_h7wh0_4). It utilizes the author's own gpu-curtains library for 3D rendering and relies on clip-path for some canvas framing.

Use Cases

• Who should clone this: Creative developers, data scientists wanting interactive portfolios, or agencies building 'experience-first' micro-sites.
• Effective Remixes:
  • Product Launch: Replace 'Levels' with product feature milestones, requiring users to 'build' the product by scrolling/interacting.
  • Educational Tools: Adapt the 'Invoices' sphere viz to represent data points in a lesson, making learning tactile.
  • B2B SaaS: Reuse the letter-reveal animations and high-performance scroll transitions to modernize a standard landing page.
• Remix Directions: Swap the gaming theme for a professional 'industrial' aesthetic by moving to a monochrome palette while keeping the WebGPU-powered backgrounds. Use the 'Unlock everything' button pattern for users who prefer skipping high-interaction paths.
• Suggested Clone Scope: Start by cloning the input-range hero gate and the section-counter shell to establish a linear, narrated flow.