O0 Cloud Design Agency Portfolio

Overview

This website is a premium portfolio for a design agency that prioritizes high-quality motion and visual depth. It stands out as a clone reference for its sophisticated use of background video reels and a complex CMS architecture that handles nested lists for awards and real-time filtering.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast foundation of deep blacks (#000000) and pure whites, accented by project-specific background colors (e.g., olive green #a2ab7c, muted grey-white #e8e9ea). This allows individual project cases to dictate the local mood while maintaining a consistent global frame.
• Typography: The system leans on a bold, high-contrast serif for main headings (heading-size-1) to convey authority, paired with a clean, functional sans-serif for navigation and metadata (paragraph-base). Text is often overlaid directly on video or high-resolution imagery using white or black depending on the container's luminance.
• Page Structure & Flow: The site follows a logical sequence: a full-width immersive video hero, followed by a brand logo carousel, and then a dense, filterable project grid. The grid items use a split-image approach with distinct treatments for standard and 'wide' aspect ratios.
• Reusable Components:
  • Interactive Filter Bar: A multi-category dropdown system that uses radio buttons for filtering by 'Category' (Video, Web, AI) and 'Industry'.
  • CMS Project Cards: Complex cards that nest SVG icons for awards (Red Dot, German Design Award) and project metadata dynamically.
  • Splide-powered Logo Carousel: A seamless, looping marquee for client logos with gradient fade-outs on the edges.
• Interaction & Motion: The site uses 'vimeo-vide' embeds for autoplaying, muted previews on hover. Project cards feature a project-hover__overlay that likely triggers state changes (text color shifts or transform scaling) when the user interacts with the grid.
• Implementation Clues: Built with Webflow, the site utilizes the Finsweet (fs-cmsfilter, fs-cmsnest) attributes for advanced CMS functionality, allowing complex relationship mapping between projects and their respective 'Industry' or 'Award' collections.

Use Cases

• Who should clone this: Creative agencies, high-end production houses, and solo designers who need a 'video-first' portfolio to showcase motion graphics or heavy UI/UX work.
• Effective Remixes: This pattern is ideal for SaaS product landing pages where different 'features' need to be filtered by user type, or for architectural firms to showcase high-res property renders with technical specifications nested in the cards.
• Practical Directions: Builders should reuse the CMS logic for the award badges and filtering. The remix can involve swapping the stark monochromatic UI for a more vibrant brand palette while keeping the high-impact video hero structure.
• Suggested Clone Scope: A full-page clone is recommended to capture the seamless integration between the Finsweet CMS attributes and the custom video wrappers, as the filtering/nesting logic is highly interdependent.