Chelsea Creative Production Agency Portfolio

Overview

This website for Chelsea is a high-impact creative agency portfolio that utilizes an immersive full-screen video background to establish brand mood instantly. It’s an excellent clone reference for its minimalist navigation, clean typography-driven layout, and effective use of negative space to showcase a curated roster of talent.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast foundation of Black (#000000) and White, accented by a specific 'Chelsea Blue' (#4482FF) and 'Ecru' (beige/off-white). The hierarchy is flat and minimalist, using a 'whitify' logo filter and blue text for secondary navigation elements to ensure visibility over video media.
• Typography System: The design relies on a bold, sans-serif headline system. The logo and roster list use a thick, blocky typeface with tight kerning. Smaller text snippets are set in all-caps across the hero section with variable positioning to create a rhythmic, editorial feel.
• Page Structure & Flow: The site begins with a splash-container featuring an autoplaying Vimeo background and a bottom-left anchored logo. It then transitions into a talent-block (bg-black), which uses a horizontal split: sticky location filters (US/UK) on the left and a dense, inline-wrapped list of directors on the right.
• Reusable Components:
  • Video Hero: A video-container scaled to w-screen with overlaid absolute-positioned text snippets.
  • Talent Roster: A filterable list component that uses opacity-50 for inactive states and hover:opacity-100 for interaction.
  • Side Drawer: A hidden drawer-container for the "Studio Brief" that slides in from the right to provide long-form text without cluttering the main gallery.
• Interactions & Motion: Hover states are primary, with director names changing from Blue to Ecru. The hero features subtle text-snippet-appear animations with staggered animation-delay (200ms to 1400ms) to introduce brand messaging.
• Implementation Clues: Built using Nuxt.js (Vue framework), utilizing Tailwind CSS for layout utilities (e.g., md:flex, z-50, absolute). Content is served via Vimeo's progressive redirect for high-performance video streaming.

Use Cases

• Who should clone this: Production houses, independent film directors, high-end photography studios, and design agencies with strong video showreels.
• Effective Remixes:
  • Fashion Lookbooks: Swap the video hero for silent, looping runway clips and the roster for seasonal collections.
  • Architecture Portfolios: Use the side drawer for technical specs and project narratives while keeping the main UI focused on full-bleed imagery.
• Remix Directions: Replace the text-based talent roster with a hover-to-reveal image grid to show visual work samples immediately. The side drawer can be repurposed for contact forms or detailed "About" bios.
• Clone Scope: A full-page clone is ideal for users wanting a cinematic entry point. For a quicker remix, clone the sticky filtering system and the responsive typography-driven list for any directory-style page.