Garden Eight Portfolio Landing Page

Overview

Garden Eight's portfolio site is a masterclass in minimalist digital design, prioritizing atmospheric motion and unconventional typography over standard grid layouts. It is a premier clone reference for developers looking to implement complex scroll-driven animations (GSAP/Locomotive-style) and unique horizontal marquee transitions within a high-end agency context.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast "Dark Mode" aesthetic with a near-black background (data-bg="black") and crisp white typography. The hierarchy is driven by scale rather than color, using massive serif headlines to anchor the viewport.
• Typography: A sophisticated mix of a modern sans-serif for functional metadata (IG, TW, LinkedIn links) and a decorative, high-contrast serif (class="serif words") for case study titles. Large-scale headings like "What can we make next" use clip-y masks for reveal animations.
• Page Structure: The layout follows a linear vertical flow that transitions into immersive sections. It begins with a minimalist logo splash, followed by a "lead" description, and moves into a dynamic "Pickup" section where case studies are presented as horizontally scrolling marquees (class="mq-anim").
• Reusable Components:
  • Dynamic Case Study Marquee: A unique component where project titles loop horizontally on scroll, embedding video/image thumbnails directly within the text spans (class="thumb bg-img").
  • Custom Global Cursor: A situational cursor (class="ui-cursor") that changes appearance based on interaction (e.g., displaying "View").
  • Animated Social Footer: A clean grid of social links and email copy-to-clipboard functionality with subtle underline transitions.
• Interaction & Motion: The site relies heavily on scroll-triggered reveals (js-iv for in-view triggers) and "clip-y" masks where text slides up from an invisible container. The case study previews use lazy-loaded MP4 videos that play on scroll proximity.
• Implementation Clues: Built using Nuxt.js (evident from #__nuxt and nuxt-link), utilizing a custom smooth scrolling wrapper (s-scroller). It uses a <canvas> layer (id="js-back") likely for WebGL background effects or cursor trails.

Use Cases

• Who should clone this: Creative directors, independent designers, and boutique digital agencies wanting a portfolio that feels like a premium gallery experience.
• Effective Remixes: This pattern works exceptionally well for luxury brand sites, architecture portfolios, or fashion lookbooks where imagery and bold type must coexist.
• Practical Directions:
  • Typography Swap: Replace the serif with an edgy brutalist font for a more industrial feel.
  • Component Extraction: Clone specifically the mq-anim marquee logic to create high-impact project sections without needing the full-page infrastructure.
  • Information Architecture: Adapt the "About Us" footer section to serve as a contact page, utilizing the existing clean layout for social and email links.
• Suggested Scope: A full-page clone is recommended to maintain the specific timing and rhythm of the scroll-linked animations, as the components are tightly integrated with the s-container scroller.