Evoke Creative Studio Portfolio Grid

Overview

This website features a high-impact, minimalist portfolio layout designed for creative studios. It centers on a horizontal project carousel that balances colorful visual assets with massive, fixed display typography, making it an excellent reference for builders wanting to showcase a visual narrative with bold editorial flair.

Design System

• Color Palette & Visual Hierarchy: The primary background is white, allowing various project-specific colors to pop. Visual hierarchy is split between the massive black brand name and the vibrant, square project cards that act as the primary focal points.
• Typography: The system utilizes a heavy sans-serif typeface (likely a variant of Franklin Gothic or similar grotesque). The title "EVOKE" is set in a fixed, oversized scale that dominates the lower third of the viewport, creating a literal foundation for the imagery above.
• Page Structure: The layout consists of a fixed or sticky bottom section containing the brand name, while the space above features a swiper-horizontal image carousel. The carousel items are organized into three distinct cards visible at once in the desktop view.
• Reusable Components:
  • Project Overlay Card: A square container with an image/video background and a hover-overlay div that triggers a color-coded state change.
  • Swiper Carousel: A horizontal navigation block with minimal arrow icons (swiper-nav).
  • Logo/Title Section: An oversized, responsive text block designed to sit at the bottom of the viewport.
• Interactions:
  • Dynamic Hover: Each card has a hover-overlay with a specific background-color (e.g., #ff5a46, #005f73). On hover, a "VIEW" prompt appears.
  • Media Integration: The grid seamlessly mixes static images (img) with looping mp4 videos (video) using lazy loading.
• Responsive Behavior: The HTML indicates distinct desktop (outer-image-carousel-wrap) and mobile (mobile-images-wrap) structures. On smaller screens, the horizontal carousel likely stacks vertically or maintains a single-column swipe to accommodate the square aspect ratios.

Use Cases

• Who should clone this: Independent designers, creative agencies, and illustrators with high-quality visual assets who want a "gallery-first" landing page.
• Product Remixing: Photography portfolios can swap the bold black text for thin serifs for a more luxury feel; fashion brands can replace square cards with portrait-oriented cards.
• Remix Directions: Reuse the hover-overlay logic to create interactive mood boards, or adapt the oversized text bottom bar to display a scrolling news ticker or alternating project titles.
• Clone Scope: A full-page clone is ideal to capture the unique interplay between the fixed typography and the carousel. However, the interactive square card component with color-matched overlays can be easily exported for standard grid layouts.