Charlie Phipps Portfolio Hero Layout

Overview

This portfolio for London-based graphic designer Charlie Phipps is a masterclass in high-impact minimalism and typographic hierarchy. It serves as a strong clone reference for its sophisticated use of horizontal marquee motion, full-bleed media backgrounds, and a high-contrast dark aesthetic that highlights creative work.

Design System

• Color Palette & Visual Hierarchy: The design uses a deep charcoal and black foundation (RGB 16, 16, 17) with off-white/cream text (RGB 235, 232, 228). This creates a stark, sophisticated contrast that allows images and white-space to define the layout boundaries.
• Typography: The system relies on a clean, sans-serif font family. It utilizes extreme scale—specifically a massive <h1> for the marquee header—contrasted against small, uppercase labels (<small>) and detailed body copy to create a clear informational hierarchy.
• Page Structure & Flow: The sequence begins with a giant horizontal scrolling marquee as the hero, followed by a brief bio section. The flow then transitions into large-scale project case studies featuring a mix of grid-based image galleries and full-bleed video backgrounds triggered by scrolling.
• Reusable Components:
  • Horizontal Marquee: A dynamic header that provides immediate movement.
  • Project Grid: A 12-column responsive layout using grid-row and grid-col attributes to align project metadata next to large visuals.
  • Backdrop Video/Image: A fixed-position background element (data-backdrop) that occupies the viewport while text content scrolls over it.
• Interaction & Motion: The site utilizes a horizontal marquee via a custom .marquee_inner class and staggered entry animations for images (scroll-transition-fade). Arrows and external links use specific glyphs (︎︎︎, ︎︎︎) rather than traditional button shapes.
• Implementation Clues: Built on the Cargo platform, the site uses a custom grid system (grid-row, grid-col="x12") and specific data attributes for galleries (data-gallery) and lazy-loading images.

Use Cases

• Who should clone this: Creative professionals in high-end design, fashion, architecture, or digital art who want their work to feel premium and contemporary.
• Effective Remixes: Agencies can adapt this for a "services" page where each service is announced by a high-impact marquee, or luxury brands can use the full-bleed video backdrop to showcase product craftsmanship.
• Remix Directions: Swap the dark background for a high-energy neon or a clean light-mode aesthetic while maintaining the radical typographic scale. The marquee can be repurposed to display client names, skill sets, or dynamic headlines.
• Suggested Clone Scope: Start by cloning the Hero Marquee and the project grid structure for a one-page landing site. The full-bleed background video transition is ideal for a more immersive multi-page experience.