Andreas Antonsson Immersive Portfolio Gallery

Overview

This portfolio is a masterclass in immersive creative development, using Three.js to create a curved 3D project gallery that feels tactile and cinematic. It is an excellent reference for builders looking to bridge the gap between traditional web layouts and high-end WebGL experiences by synchronizing 2D typography with 3D environment transformations.

Design System

• Color Palette & Visual Hierarchy: The design employs a high-contrast, dark-mode aesthetic. The background is dynamic, featuring full-screen project imagery rendered via a Three.js canvas with subtle 3D curvature and vignette gradients. Text is primarily stark white to maintain legibility against complex photographic backgrounds.
• Typography: The system uses a sophisticated serif for display headings (likely for a "boutique" feel) and a clean sans-serif for functional metadata and navigation. Headings use large scales and generous letter-spacing, often broken into individual span elements to allow for character-level entrance animations.
• Page Structure: The site follows a vertical scroll-snapping flow where each scroll event triggers a transition between project states. Fixed elements include the site header (top-left/right), a vertical scroll indicator (bottom-right), and a dynamic "Available for work" CTA (bottom-left).
• Reusable Components:
  • 3D Cylinder Carousel: The canvas-based image transition system is the core component to clone for high-impact visual storytelling.
  • Scroll Indicator: A minimalist vertical stack of rounded rectangles that visually tracks the active section index.
  • Interactive CTA: A clever hover-state button at the bottom-left that toggles between availability status and a "Copy to clipboard" email action.
• Interaction & Motion: The layout uses scroll-synchronized transitions where images curve and titles animate in with a 3D Z-axis translation (translateZ(1em)). Hovering over the central arrow trigger uses scale and opacity transitions to signify interactivity.
• Implementation Clues: The HTML confirms the use of Three.js (r139) for the 3D rendering and Tailwind CSS for layout utilities (e.g., fixed, z-20, flex-col). The presence of __nuxt and vue-portal-target indicates a Nuxt.js/Vue framework architecture.

Use Cases

• Who should clone this: Creative developers, interaction designers, and boutique digital agencies wanting to showcase work with a high degree of polish and spatial depth.
• Product Remixes: This pattern is effective for luxury brand lookbooks, film production portfolios, or high-end architectural visualization sites where the visual asset is as important as the content.
• Remix Directions:
  • Brand Swap: Replace the serif display font with a bold grotesque sans-serif for a more modern, tech-focused aesthetic.
  • Architecture: Adapt the 3D cylinder to rotate horizontally instead of vertically for a different spatial feel.
  • Granular Reuse: Clone only the fixed navigation and the animated "Available for work" component for a standard 2D portfolio to add subtle interactive depth.
• Clone Scope: A full-page clone is recommended to preserve the synchronization between the WebGL background and the 2D UI layers, as the impact relies on the harmony between both systems.