Ben Powell Minimalist Portfolio Showcase

Overview

Ben Powell’s portfolio is an exceptional study in minimalist, high-contrast design that leverages large-scale typography as the primary navigation. It serves as a strong reference for creators seeking to build a brand-first portfolio where motion and interaction design take center stage over traditional layouts.

Design System

• Color Palette & Visual Hierarchy: The site uses a neutral off-white or light gray foundation with high-contrast sharp black text (#000000). Dynamic background colors (e.g., rgb(232, 232, 221) or rgb(93, 93, 131)) transition smoothly based on project hovers, creating a mood shift for each project without leaving the index.
• Typography: The system relies on a bold, sans-serif Grotesk typeface. The project titles use a massive scale (h1) with tight letter spacing, while the navigation and metadata in the four-column header use a significantly smaller, functional scale to create clear horizontal hierarchy.
• Page Structure: The site follows a vertical flow divided into two main categories: Design and Film. A fixed 4-column utility header provides contact info and availability. The body contains a project list followed by a hidden-until-transition details section for professional experience and a bio.
• Reusable Components: The link-block component is the core asset, containing project text, hidden Lottie animations for arrows, and multi-layered images designed for hover reveals.
• Interaction & Motion: This is a Webflow-based build utilizing detailed IX2 animations. Project links feature translate3d and opacity transitions. On hover, images specifically categorized as top-right, bottom-right, or image slide into view from varying directions (e.g., 30vw), creating a layered depth effect.
• Implementation Clues: The HTML reveals a grid-based system (col-3, col-9) and a reliance on Lottie for iconography. Dynamic project data is pulled via w-dyn-list, making it easy to scale content once the interaction logic is established.

Use Cases

• Who should clone this: Product designers, art directors, and filmmakers who want to emphasize a selected few "best-in-class" works rather than a dense gallery.
• Effective Remixes: Agencies can adapt this for talent rosters; a studio could use the typography-list approach to showcase services where each hover reveals a case study snapshot.
• Practical Remix Directions: Retain the four-column header structure but swap the project list for a more standard grid if high-resolution horizontal photography is the primary focus. The transition div can be repurposed as a global overlay for contact forms or about pages.
• Suggested Clone Scope: Start with the projects-block and its associated hover interactions. The sheer scale of the typography and the CSS transform-style: preserve-3d animations are the most valuable parts to clone for immediate visual impact.