Public Image Minimalist Portfolio Carousel

Overview

This website is a high-end portfolio for a creative agency, featuring a bold, fullscreen media carousel that prioritizes visual impact and brand prestige. It serves as an excellent reference for builders looking to implement a minimalist, high-contrast imagery display with seamless, synchronized navigation.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a high-contrast monochromatic base (white text on dark backgrounds or vice-versa) to ensure brand messaging and media remain the focal point. Visual hierarchy is flat, with the media occupying 100% of the viewport and text overlays acting as secondary metadata.
• Typography: The system uses a clean, sans-serif typeface (likely a derivative of Helvetica or a similar Swiss style) in all-caps for primary labels. Text is categorized into ultra-large display types for project titles and small, italicized serif/sans-serif hybrids for the agency info block.
• Structure & Flow: The site is a single-page immersive experience. The primary content is held within a main-carousel using the Flickity library. Directly beneath (or overlapping) is a nav-carousel consisting of small thumbnail previews, allowing for non-linear navigation.
• Reusable Components:
  • Fading Flickity Carousel: Features an is-fade transition class rather than a standard slide, creating a more cinematic feel.
  • Dynamic Header/Info Block: The .site-intro block contains condensed contact info and a client list, positioned to not interfere with the central visuals.
  • Integrated Thumbnail Bar: A synchronized nav-carousel where selecting a thumbnail updates the main view.
• Interactions & Motion: The primary interaction is the fade transition between carousel-cell elements. The logic includes is-white-text classes applied to specific cells to dynamically flip text color based on the underlying media contrast.
• Responsive Behavior: The HTML reveals specific image-mobile (is-cover) and image-desktop (is-contain/is-cover) classes, indicating a custom-tailored crop and aspect ratio strategy for different breakpoints. The agency info text uses is-portrait-only and is-landscape-only classes to reformat contact details for mobile vs. desktop viewing.

Use Cases

• Who Should Clone This: Photographers, fashion designers, creative directors, and luxury brand agencies who want a "lookbook" style landing page that emphasizes visuals over lengthy copy.
• Remix Directions:
  • E-commerce: Replace project slides with high-resolution product hero shots and link the project titles directly to a checkout experience.
  • Cinematography Portfolio: Utilize the carousel-video structure seen in the HTML to create an auto-playing reel of silent video loops as the primary background.
  • Adaptation: Builders can extract just the synchronized thumbnail navigation bar (nav-carousel) to enhance any standard image gallery.
• Clone Scope: For maximum impact, a full-page clone is recommended to maintain the immersive fullscreen aspect ratios and synchronized transitons.