Something Else Portfolio Slideshow

Overview

This portfolio for Something Else is a masterclass in minimalist, high-impact design for creative studios. It uses a centered, full-width media slideshow that seamlessly integrates static imagery and auto-playing video to showcase a diverse body of branding and design work. Builders should reference this for its elegant handling of captions and its distinct, airy typography that makes a small amount of content feel like a premium experience.

Design System

• Color Palette & Visual Hierarchy: The site uses a neutral, slightly off-white background that allows the vibrant project content—like the bright orange "Jupiter Nights" logo—to command attention. The visual hierarchy is extremely flat, with the project media being the primary focal point, followed by centered secondary text.
• Typography System: The brand identity uses a high-contrast, modern serif with unique ligatures (seen in the 'SOMETHING ELSE' logo). Body text stays consistent in a clean, small-scale serif, emphasizing readability and a classic editorial feel. Captions are centered beneath images, adding a balanced, symmetrical weight to the layout.
• Page Structure: The layout relies on a sticky header containing the logo and site-wide navigation (Index/Info), a middle ground occupied entirely by a gallery-slideshow component, and a fixed footer containing social links and a mailto contact.
• Reusable Components: The core component to clone is the custom gallery-slideshow which supports media-item slots for both <img> and <video> tags. Each slide includes a nested <figcaption> for contextual project info. The header uses a simple two-column flex layout for the Index/Info links, pushing them to the viewport edges while keeping the logo centered.
• Interaction & Motion: The slideshow utilizes horizontal transitions with a transition-speed of 0.9s and a pause-on-hover attribute. Video elements are set to autoplay, loop, and muted to provide ambient motion without user intervention. Navigation is handled via hidden or low-profile overlay arrows (previous/next buttons).
• Implementation Clues: The HTML structure uses custom elements like <gallery-slideshow>, <column-set>, and <media-item>, suggesting a component-based layout engine (likely Cargo Collective). It utilizes CSS variables for dynamic padding and sizing (e.g., --pin-padding-top).

Use Cases

• Who should clone this: Independent designers, branding agencies, and high-end boutique studios who want their work to speak louder than their UI.
• Effective Remixes: A photographer could remix this by removing the footer links to create a distraction-free digital gallery. An architect could use the video autoplay feature to show site walkthroughs while keeping the minimal text descriptions for technical specs.
• Remix Directions: Swap the serif font for a bold, technical grotesque to shift the vibe from "classic studio" to "digital product house." The gallery-slideshow can be limited to a specific height to allow more scrolling content below for long-form case studies.
• Suggested Clone Scope: A full-page clone is recommended to maintain the specific balance of the sticky header and fixed footer, which frames the central media perfectly.