Katherine Pihl Design Portfolio Grid

Overview

This Katherine Pihl design portfolio is a masterclass in minimalist visual storytelling, featuring a clean multi-column grid that seamlessly integrates static photography and autoplaying video. It is an excellent clone reference for creatives who want a "luxury-minimalist" aesthetic where the work takes center stage with zero ornamentation. The interaction logic relies on subtle typography shifts and a sophisticated filtering system to organize diverse project types.

Design System

• Color Palette & Visual Hierarchy: The site uses a monochrome foundation of pure black text (text-black) on a crisp white background. Content hierarchy is achieved through opacity rather than color, using text-black/30 for inactive states and text-black/40 for secondary metadata.
• Typography: The system uses a clean Sans-Serif for functional labels (titles, project tags) and a large Serif font in the footer for brand narrative. Titles use a 16px scale with 1.2 line height and 500 weight, while the footer utilizes a larger 32px serif for character.
• Page Structure:
  1. Minimal Header: Persistent left-aligned name and right-aligned contact link.
  2. Category Filter: Horizontal checkbox-driven navigation for sorting content (All, Branding, Web Design).
  3. High-Impact Grid: A responsive 1 to 3 column layout (grid-cols-2 on medium screens, grid-cols-3 on large) featuring fixed aspect ratio containers (aspect-[17/20]).
  4. Detailed Footer: A three-section layout including a bio, services list, and collaborator marquee.
• Reusable Components:
  • Project Card: A robust component including an aspect-ratio-locked media container (supporting both <img> and looped <video>) with a title and metadata row directly underneath.
  • Opacity Filter Nav: A toggle-style filter bar that uses conditional classes for active/inactive text states.
  • Footer Grid: A 12-column grid layout (800:grid-cols-12) that demonstrates how to balance long-form copy with lists.
• Interactions: Subtle CSS transitions (duration-300 ease-in-out-cubic) are applied to titles on hover. Media items utilize an "underline-hover" effect on titles and an invisible link-cover that makes the entire image clickable.
• Technical Implementation: Built using Next.js and Tailwind CSS. It leverages mux.com for high-performance video streaming and Sanity IO for image asset management, evidenced by the lqip (Low-Quality Image Placeholder) strings in the HTML.

Use Cases

• Who should clone this: Independent designers, photographers, or boutique agencies looking for a high-end, gallery-style digital presence.
• Effective Remixes: High-end e-commerce brands could remix the grid for product lookbooks. Architecture firms can use the mixed video/image grid to showcase project site walk-throughs alongside static renders.
• Remix Directions: Swap the monochromatic scheme for a high-contrast dark mode; change the serif footer to a monospace font for a more "dev-focused" or technical aesthetic; or expand the checkbox filter into a more complex tagging system.
• Clone Scope: The grid component and filter bar are the most valuable pieces for a quick section clone. For a full-page clone, the footer's responsive 12-column distribution offers a great template for information-heavy about sections.