Bruno Simon's Portfolio

Overview

Bruno Simon's portfolio is an immersive, game-like 3D exploration experience built with Three.js, embodying the aesthetic of 'Interactive Brutalism'—a fusion of austere dark surfaces with vibrant, playful accent colors that reward discovery. The brand serves creative developers and designers seeking inspiration through interactive storytelling, evoking a sense of curiosity and technical mastery. The visual language combines a near-black radial gradient background (#1d1721 to #251f2b) with strategic pops of coral-red (#ff6a7c), lime-green (#d5ff95), and warm amber (#ffc67b), creating a high-contrast, energetic interface that feels both sophisticated and approachable. The emotional response is one of playful exploration—users feel invited to 'drive around' and uncover secrets, transforming a portfolio into an adventure.

The brand voice is conversational, encouraging, and slightly irreverent. Vocabulary patterns favor imperative action verbs ('drive', 'explore', 'discover', 'interact') and casual phrasing ('don't break anything', 'I'm stuck!'). The tone avoids corporate polish in favor of personality—Bruno speaks as a peer, not a vendor. Typography reinforces this: Amatic SC (a hand-drawn, playful serif) headlines contrast sharply with Nunito's clean, modern body text, signaling that technical precision coexists with creative spontaneity. Example sentence in brand voice: 'Drive around to find the secrets—and yes, you can break things.'

Colors

The color system operates on a principle of 'Dark Canvas with Vibrant Accents,' where the deep, almost-black surface (#1d1721) serves as a neutral stage, allowing three distinct accent colors to command attention. Primary (#ff6a7c, a coral-red) is reserved for the most critical interactive elements—the menu trigger button uses a radial gradient from #c21515 to #46123b, and hover states brighten to pure white (#fff) with a 1px border at rgba(255, 255, 255, 0.8). Secondary (#d5ff95, a lime-green) marks success states and positive feedback; tertiary (#ffc67b, warm amber) provides a third accent for supplementary highlights. The surface stack is minimal but deliberate: surface-container-lowest (#0f0b13) for the deepest backgrounds, surface-container (#1d1721) for standard cards and panels, and

Typography

The type system pairs two distinct families to reinforce the brand's dual nature: Amatic SC (hand-drawn, 700 weight only) for all display and headline levels (display at 60px, headline-lg at 50px, headline-md at 40px), creating an immediate sense of personality and warmth; Nunito (clean, geometric, available in 400/700/900) for all body, label, and UI text. This pairing communicates that technical content (body-md at 16px, 400 weight) is grounded and accessible, while creative messaging (headlines) celebrates individuality. The display level uses -0.04em letter-spacing to tighten the playful letterforms, while body text maintains 0em spacing for legibility. All interactive labels (buttons, inputs) use label-md (14px, 600 weight, 0.01em tracking) to ensure crisp, scannable UI. On small labe

Layout

The layout follows a 12-column grid model with a max-width of 1100px, accommodating both desktop (landscape) and mobile (portrait) orientations through CSS media queries. The primary spacing philosophy uses semantic tokens: gutter (24px) for section separation, md (24px) for card padding and button spacing, lg (40px) for major section breaks, and xl (64px) for hero-level spacing. The menu system demonstrates this: the inner container uses min(1000px, calc(100% - 120px)) to maintain breathing room on desktop while collapsing gracefully on mobile, with the content-inner padding shifting from 25px 40px 40px on desktop to 10px 15px 15px on screens below 440px. The radial gradient background (radial-gradient(ellipse at top left, #251f2b, #1d1721)) extends to the viewport edges, eliminating trad

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle border treatments rather than dramatic drop shadows. Level 1 (Base) uses the radial gradient background with no additional shadow. Level 2 (Standard Cards) applies box-shadow: 0 0 4px rgba(37, 31, 43, 0.47) (a very soft, near-invisible shadow) combined with a 1px solid border at rgba(255, 255, 255, 0.2), creating definition through outline rather than depth. Level 3 (Elevated/Modals) increases the shadow to 0 0 8px rgba(0, 0, 0, 0.28) and brightens the border to rgba(255, 255, 255, 0.35), signaling a modal or overlay state. Intera

Shapes

The shape philosophy is 'Geometric Precision with Playful Softness'—a balance between technical sharpness and approachable warmth. Buttons and interactive elements use rounded: md (8px) as the standard radius, providing enough softness to feel modern without sacrificing the technical aesthetic. Cards and larger containers use rounded: lg (15px), creating a subtle visual distinction between primary UI and secondary surfaces. Input fields use rounded: DEFAULT (6px), maintaining a tighter, more utilitarian feel that signals 'functional form.' The menu trigger and navigation items use rounded: DEF

Components

Action Elements Buttons form the primary interaction layer. The button-primary component uses background: {colors.primary} (#ff6a7c), padding: 0 16px, height: 58px, and rounded: {rounded.md} (8px), with a 1px border at rgba(255, 255, 255, 0.8). On hover (button-primary-hover), the background shifts to {colors.primary-fixed-dim} (#c21515) and the border becomes solid white, creating a tactile feedback loop. The button-secondary variant uses a transparent background with the same border, allowing the surface gradient to show through; on hover, it fills with {colors.surface-container-high} (#251f2b). All button text uses {typography.label-md} (14px, 600 weight, Nunito) for crisp, scannable labels. Disabled buttons (button-disabled) use a dashed border and {colors.outline-variant} (#555555

Do's and Don'ts

**Do**

• Do use the primary accent (#ff6a7c) exclusively for the most critical CTAs and interactive states—menu triggers, active navigation items, and primary button hovers.
• Do pair Amatic SC headlines with Nunito body text to maintain the brand's balance between playful personality and technical credibility.
• Do apply the 1px border at rgba(255, 255, 255, 0.2) to all card and surface elements to create subtle definition against the dark background without relying on shadows.
• Do use the radial gradient background (ellipse at top left, #251f2b, #1d1721) consistently across all panels and modals to reinforce the immersive, game-like aesthetic.
• Do animate hover states with transform: translate() at 150ms duration to create tactile feedback that feels responsive and intentional.

**Don't**

• Don't use secondary (#d5ff95) or tertiary (#ffc67b) accents for primary CTAs—reserve them for success states, badges, and supplementary highlights only.
• Don't apply drop shadows (box-shadow with blur) to standard UI elements; instead, use subtle borders and the radial gradient background for depth.
• Don't exceed rounded: lg (15px) on buttons or inputs—the interface should feel precise and technical, not soft or organic.
• Don't mix Amatic SC and Nunito weights within the same line of text; use Amatic SC exclusively for headlines and Nunito for all body and label content.
• Don't disable hover effects on desktop or use generic system-ui fonts—the brand relies on intentional, crafted interactions and distinctive typography to communicate personality.