Kaleido Grafik Horizontal Portfolio

Overview

This website is a sophisticated horizontal-scrolling portfolio designed for creative agencies and studios. It represents a strong clone/remix reference because it balances a minimalist, high-end aesthetic with a dynamic grid that accommodates mixed media types like high-resolution video thumbnails and image carousels.

Design System

• Color Palette & Visual Hierarchy: The site uses a neutral "off-white" or light beige background (#f0ede9 approximate) to let its high-contrast project media stand out. Hierarchy is established through a subdued, fixed header and a massive, low-opacity watermark logo (.fixed-background-logo) that remains static while content scrolls over it.
• Typography: The system relies on a clean, sans-serif font. The header uses small, spaced-out links for "Work," "Studio," and "Play," while project titles use a bolder weight. Contact details in the header use a light-weight monochrome style.
• Structure & Flow: The layout is a horizontal flexbox (.inner-page-content) where "page blocks" are arranged side-by-side. Blocks vary in aspect ratio (notably sixteen-nine, one-one, and four-three) and vertical alignment (top-align vs. bottom-align), creating a rhythmic zigzag effect as the user scrolls horizontally.
• Reusable Components:
  • Video Wrap: An auto-playing, muted video container with a lazy-loaded poster image.
  • Image Carousel: A fade-transition carousel (.flickity-enabled .is-fade) for static project images.
  • Fixed Header: A three-column utility bar providing quick access to menu and contact links.
  • Inverted Watermark: A massive background SVG that provides brand identity without interfering with readability.
• Motion Patterns: The primary interaction is the horizontal scroll, which is often implemented with a smooth-scroll library. Hovering over a project block (.work-project-hover) triggers an custom cursor effect using a .cursor-dot that follows the mouse.
• Implementation Clues: The HTML reveals the use of Tailwind CSS (classes like flex, justify-between, whitespace-no-wrap) for layout and Flickity for carousels. It uses a B-Lazy script for performance-focused image and video loading.

Use Cases

• Who should clone this: Independent designers, architectural firms, and high-fashion agencies looking to emphasize visual impact over heavy text content.
• Effective Remixing:
  • Photography Portfolios: Swap out the studio videos for cinematic high-res stills using the varied aspect ratios to mimic a magazine spread.
  • B2B Creative Services: Remix the grid to include small text cards between images to provide context or testimonials without breaking the horizontal flow.
• Practical Remix Directions: Adapt the information architecture by unhiding the .project-info section on click—currently, the HTML shows these as hidden elements, implying they are meant to be revealed via a modal or slide-over.
• Scope: A quick section clone of the page-block flex containers is ideal for landing pages, while the full-page clone is best suited for immersive desktop experiences.