Joséphine Löchen Minimal Portfolio Gallery

Overview

This minimalist photography portfolio is a masterclass in high-end, Swiss-style editorial design. It utilizes a dual-slider system where a full-screen image gallery is synchronized with a bottom-docked thumbnail navigation bar, allowing for seamless visual exploration. It serves as an excellent reference for builders looking to create image-centric portfolios where content takes precedence over complex navigation.

Design System

• Color Palette & Visual Hierarchy: The site uses a monochrome aesthetic, primarily pure white backgrounds with black text and subtle gray accents (class="gray") for metadata. The visual hierarchy is extremely flat, relying on scale and the images themselves to guide the eye.
• Typography: The system uses SwissRail (a custom neo-grotesque like Helvetica), prioritizing legibility and a mid-century modern feel. Headers like [ Contact ] and [ Print ] are wrapped in square brackets, a common editorial trope to denote categories.
• Page Structure:
  1. Fixed Header: Minimal project title and "Information" link.
  2. Main Canvas: A prominent, responsive image slider occupying the majority of the viewport.
  3. Thumbnail Navigation: A horizontal micro-gallery at the bottom featuring project titles and index numbers (e.g., "01/08").
  4. Hidden/Overlay Sections: An "About" section structured into a four-column grid (Description, Contact, Infos, Credits).
• Reusable Components: The flickity-slider implementation for both the main view and the thumbnails is highly reusable for any media gallery. The multi-column .about--wrapper demonstrates a clean way to organize professional credits and client lists.
• Interaction & Motion: The site uses the Flickity library for smooth, touch-responsive sliding. Images use lazy loading (class="lazyloaded") with SVG placeholders to ensure fast initial page weight. A unique "placeholder" div maintains aspect ratios during load.
• Implementation Clues: The HTML reveals a custom-built environment (HTTB.EU) using g-component attributes, suggesting a modular JavaScript architecture. It uses data-ratio and data-orientation attributes to dynamically adjust image containers to portrait or landscape orientations.

Use Cases

• Who should clone this: Photographers, fashion designers, and architects needing a high-impact, low-friction showcase.
• Remix directions:
  • E-commerce: Adapt the main slider for product hero sections and the thumbnail bar for variant selection.
  • Brand Agency: Swap the white background for a dark mode or brand-specific color while maintaining the strict 4-column info footer.
  • Minimalist Blog: Reuse the slider logic for featured stories, turning the thumbnails into post previews.
• Suggested Scope: A full-page clone is best to capture the synchronized slider behavior, which is the site's most distinctive UX feature.