Johanna Jaskowska 3D Portfolio Showcase

Overview

This website is a highly experimental, minimalist portfolio that utilizes a full-screen WebGL 3D background to create an immersive, atmospheric user experience. It serves as an excellent reference for builders looking to implement non-linear navigation and high-end creative interactions where the interface is secondary to the visual environment.

Design System

• Color Palette & Visual Hierarchy: The palette is dominated by muted, earthy neutrals (desaturated rose/taupe), emphasizing a soft, non-intrusive background. Hierarchy is driven by small-scale typography and high-contrast black text, ensuring the 3D model (referenced as johanna35k.glb in the code) remains the focal point.
• Typography System: The design uses a monospace typeface with an all-caps treatment for the primary navigation label ("JOHANNA JASKOWSKA +"). The scale is deliberately small, typical of high-fashion and boutique studio aesthetics, used for UI elements and pills.
• Page Structure & Reusable Components:
  • Floating UI Pill: A rounded, translucent button that follows the cursor, acting as the primary hub for the menu and project expansion.
  • Dynamic Thumbnail Grid: Behind the scenes, the HTML reveals a hidden grid (css-hh4oca) of category thumbnails with specific aspect ratios (ranging from 0.95 to 1.77) that expand upon interaction.
  • 3D Environment Canvas: The entire background is a container for a GLTF model and an environment map (env-1024x512-crop.jpg), creating a sense of depth.
• Interaction & Motion: The site features heavy reliance on cursor tracking (observed via translate3d transforms on the .css-an2xwa container). Motion is fluid, likely utilizing a library like GSAP or Framer Motion to handle the opacity shifts and expansion of the project gallery.
• Implementation Clues: The code uses Chakra UI (indicated by chakra-image and chakra-stack classes) combined with a custom CSS-in-JS solution. The data structure is managed as a JSON object within the #app div, suggesting a headless CMS implementation (Kirby/Laravel based on URL patterns) feeding a React-based frontend.

Use Cases

• Creative Professional Portfolios: Ideal for visual artists, 3D designers, and creative technologists who want to showcase a specific "vibe" or singular masterpiece rather than a standard grid of boxes.
• Brand Lookbooks: High-end fashion brands can remix this to showcase a single 3D-scanned garment, using the floating navigation to reveal detail shots and fabrication info.
• Experimental Landing Pages: Product launches for digital collectibles or luxury goods where the interactive experience is the main conversion driver.
• Remix Strategy: Builders should clone the floating interactive cursor component for immediate impact. The core value lies in the remix of the background; swapping the GLB model and environment map completely transforms the brand identity while maintaining the sophisticated navigation logic.