CLOU Architects Design Studio Portfolio

Overview

This website is a premium architectural portfolio for CLOU Architects, characterized by a sophisticated "Swiss-style" minimal aesthetic. It is an excellent clone reference for high-end service businesses or creative studios that need to showcase a large volume of visual work through a structured, data-driven filtering system without sacrificing design elegance.

Design System

• Color Palette & Visual Hierarchy: The site uses a strict monochrome (Black & White) palette (#000000 and #FFFFFF). Visual hierarchy is established through extreme contrast and massive scale shifts rather than color, using heavy black blocks for buttons and thin 2px borders for section dividers.
• Typography System: A bold sans-serif typeface (likely a customized Arimo or similar grotesque) is used with heavy weights. Key features include "Jumbo" headers for impact, tight letter-pacing (t-ls-7), and a specific numerical index system (e.g., (01) Our work) to organize the narrative flow.
• Page Structure & Flow: The landing page follows a long-scroll storytelling format: 1. Hero impact statement -> 2. Parallax masonry gallery -> 3. Service list -> 4. Interactive office accordions -> 5. Client logo grid -> 6. Award statistics and recent project cards.
• Reusable Components:
  • Animated Buttons: Links featuring a "wipe" effect where a black block slides over the text on hover.
  • Office Accordions: A unique horizontal/vertical hybrid accordion (js-office-accordion) that reveals large images and contact cards.
  • Project Filter System: A robust sidebar/overlay menu categorized by Sector, Scope, Status, and Scale, using custom checkboxes.
  • Image Containers: Figures with CSS-variable defined aspect ratios (--aspect) ensuring layout stability during lazy loading.
• Interaction & Motion: The site utilizes asscroll for smooth scrolling and GSAP/ScrollTrigger for advanced reveal animations, including text clipping (masking) and image parallax. A custom cursor (data-cursor="link") changes state based on the hovered element.
• Implementation Clues: The HTML reveals a utility-first CSS approach (e.g., w-1/1, mb-2@sm) similar to Tailwind, integrated with a "Taxi" PJAX transition system for seamless page loads and a Three.js (gl-canvas) layer for high-performance visual effects.

Use Cases

• Who should clone this: Architectural firms, interior design studios, and high-end real estate agencies looking for a "gallery-first" web presence.
• Effective Remixes: Industrial design portfolios could swap the B&W for a deep navy or forest green while keeping the grid; luxury fashion brands could reuse the parallax gallery and the massive typography for lookbooks.
• Practical Remix Directions: The project filter system is highly modular—it can be adapted into a product catalog by swapping "Sector/Scope" for "Category/Price Range." The office accordion is a perfect reusable pattern for "Team" or "Location" pages.
• Suggested Clone Scope: For a quick build, clone the Office Accordion and the Animated Buttons. For a full-scale redesign, clone the Three.js + GSAP scroll framework to achieve the same smooth, high-end feel.