Guillaume Tomasi Photography Portfolio Landing

Overview

This website is a sophisticated photography portfolio that utilizes a Three.js canvas to create an immersive, non-linear browsing experience. It combines a minimalist aesthetic with high-end motion design, making it an excellent reference for creators looking to build a "digital gallery" rather than a traditional layout. Builders should clone this to master the integration of WebGL backgrounds with interactive, scroll-triggered DOM elements.

Design System

• Color Palette & Visual Hierarchy: The palette is deeply muted and earthy, using shades of taupe, slate grey, off-white, and charcoal in a modular grid. The hierarchy is unconventional; the imagery and abstract tiles take center stage, while navigation and utility text (like the "1 of 3" counter) are relegated to the corners to maximize negative space.
• Typography: A clean, modern sans-serif is used throughout. Project titles like "A BLOOM IN THE EYE OF THE STORM" are set in all-caps with generous tracking. The HTML reveals a lSplit and cSplitDeep class structure, indicating that titles are programmatically broken into individual characters for precise stagger animations.
• Page Structure & Flow: The site is structured as a single-page application (#app) with a smooth-scroll wrapper. It features a sticky header for the logo and menu, a central display for the current project title, and a background layer (.glwrapper) containing the Three.js engine. The flow is driven by a vertical scroll that triggers transitions between the 3 main project states.
• Reusable Components:
  • The GL Wrapper: A dedicated background canvas for rendering decorative tiles or shaders.
  • Animated Title Link: A modular component that handles character-level animation on hover or entry.
  • Slide Progression Counter: A minimal "1 of 3" indicator with a underlying progress bar (.progression) for visual orientation.
  • Stripe Navigation: A full-screen menu hidden behind a "stripe" transition effect found in the .Navigation div.
• Interactions & Motion: The site relies on scroll-triggered opacity changes and 3D transforms. The data-current attribute on the page section suggests a state-driven navigation logic where scrolling updates the active index, which in turn updates the WebGL background and the foreground text.
• Responsive Behavior: The design is built to be fluid, with vw and vh units likely governing the placement of tiles. The menu and logo are pinned to the viewport edges, ensuring the navigation remains accessible but unobtrusive on various screen sizes.

Use Cases

• Who should clone this: Fine art photographers, architectural studios, and independent film directors who want a portfolio that feels like a curated exhibition.
• Effective Remixes: This pattern works well for high-end fashion lookbooks or boutique brand agencies where the visual mood is as important as the content. The "Inventory" modal in the HTML suggests this minimalist structure can even support a highly stylized e-commerce store (e.g., selling limited edition prints).
• Practical Directions:
  • Partial Clone: Reuse the .AnimatedTitle logic to add character-level scroll effects to any landing page.
  • Full Clone: Replace the Three.js tiles with high-resolution image textures or video fragments to transform the abstract background into a literal project showcase.
  • IA Adaptation: Use the 3-step slide logic for a vertical product features walkthrough instead of a portfolio project list.
• Suggested Scope: Start with a full-page clone to understand the synchronization between the SmoothScroll wrapper and the Three.js canvas, as the value of this design lies in the seamless marriage of DOM and GL layers.