Dul Zorigo Minimalist Portfolio Gallery

Overview

This portfolio follows a minimalist, content-first philosophy, utilizing a wide-span masonry grid to showcase a mix of photography, UI/UX case studies, and short-form writing. It is an excellent clone reference for creatives who need a flexible, multi-column layout that feels orderly despite varying asset aspect ratios. The design prioritizes high-quality imagery and typography over heavy UI decoration, making it a sophisticated choice for visual storytelling.

Design System

• Color Palette & Visual Hierarchy: The site uses a neutral, monochrome palette anchored by a white background and subtle dark-gray text (text-foreground/40 for captions). Hierarchy is achieved through spacing and scale rather than color, with a fixed sidebar providing context while the main content area handles high-contrast visuals.
• Typography: Features a clean, sans-serif font system. Navigational items and titles use a small font scale (around 13-14px), often with a medium weight (font-medium) to maintain readability at smaller sizes.
• Structure & Flow:
  • Sidebar: A fixed left navigation panel (width 72px on desktop) containing the bio, location data, and social links.
  • Content Header: A horizontal filter bar using ghost-style buttons for category switching (Photography, Thoughts, Work, Experiments).
  • Masonry Grid: A multi-column responsive grid (shifting from 1 to 5 columns depending on viewport) utilizing Tailwind CSS gap-8 for generous white space between items.
• Reusable Components:
  • Ghost Buttons: Minimalist category filters with bg-black/5 hover states.
  • Media Cards: Interactive group containers that wrap images or videos, featuring thin borders (border-black/5) and bottom-aligned captions that utilize line-clamp-2 to handle text overflow.
  • Text Blocks: As seen in the "Thoughts" section, markdown-style text previews within the grid use an aspect-square container with a bottom gradient fade (bg-linear-to-t) and a subtle hover-activated blur button.
• Interaction Patterns: The layout uses CSS transitions for hover states. Images and buttons feature subtle opacity shifts or background color changes. The navigation uses a backdrop-blur-sm on mobile headers for a modern, glassmorphism effect.
• Implementation Clues: Built using Next.js and Tailwind CSS. The HTML reveals utility-first styling (e.g., flex-1, shrink-0, gap-[2px]) and optimized image handling via the Next.js Image component.

Use Cases

• Who should clone this: Photographers, product designers, and visual researchers who want a "journal" or "mood board" style portfolio that combines different media types seamlessly.
• Effective Remixes: Perfect for digital agencies showcasing projects, architecture firms displaying build galleries, or personal blogs that prioritize curated imagery over long-form text.
• Remix Directions:
  • E-commerce: Adaptation of the masonry grid into a product catalog where hover states reveal prices or sizes.
  • Architecture: Swapping the wide grid for a 2-column layout to allow for larger, more detailed photography.
  • Branding: Adjusting the bg-black/5 highlights to a brand's signature accent color across all interactive buttons.
• Clone Scope: A full-page clone is recommended to capture the relationship between the fixed sidebar and the responsive grid, but the filter bar and masonry item components are excellent for quick section reuse.