Bruno Simon 3D Interactive Portfolio

Overview

This is a benchmark interactive 3D portfolio that transforms traditional web navigation into an immersive game-like environment using Three.js and WebGPU. It is a premier reference for builders looking to clone a seamless integration between a WebGL canvas and a functional HTML user interface layer.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a high-contrast dark-mode foundation (#1a131b base seen in screenshot) to allow 3D objects to pop. Hierarchy is established through a floating HUD (Heads-Up Display) with clear semantic icons and rounded buttons that contrast against the atmospheric depth of the 3D scene.
• Typography System: The site uses a multi-layered font system including 'Nunito' (sans-serif) for general UI, 'Amatic SC' for characterful headings, and 'Pally-Medium' for technical or stylized text. This trio balances readability with a playful, creative aesthetic.
• Page Structure & Section Flow: The entire application is contained within a .game wrapper. Navigation is spatial rather than vertical; users travel through the 3D world to discover sections (Portfolio, About, Socials) which trigger HTML modals (.js-modals) and notifications (.js-notifications).
• Reusable Components: The touch control system (.js-touch-buttons) is a high-value clone target, offering specific logic for 'Interact', 'Unstuck', and directional 'Previous/Next' navigation. These are essential for any mobile-based 3D experience.
• Interaction Design: The site features a hybrid control scheme. A menu trigger (.js-menu-trigger) with a hamburger-to-cross animation manages navigation, while a dedicated map trigger (.js-map-trigger) provides spatial orientation. Actions are signaled via a real-time notification queue (.js-items).
• Implementation Clues: The HTML confirms a heavy reliance on Three.js (r183) and WebGPU for rendering. The UI is decoupled from the 3D logic, using standard DOM buttons and containers overlayed on the .js-canvas for accessibility and ease of styling.

Use Cases

• Who should clone this: Creative developers, game designers, and digital artists wanting to showcase work in a non-linear, exploratory format.
• Effective Remixes: This pattern can be remixed into immersive virtual showrooms for e-commerce, interactive educational exhibits, or gamified onboarding flows for SaaS products.
• Remix Directions: Builders can swap the 3D world assets (the .glb files) while retaining the robust touch-controls and modal system. For a more minimal approach, clone only the notification system and menu triggers for use in standard 2D creative sites.
• Suggested Clone Scope: A full-page clone is recommended for high-impact landing pages where immersion is the priority. However, the UI overlay (buttons and modals) can be cloned as a standalone framework for any canvas-based project.