Ingmar Coenen Digital Design Portfolio

Overview

This website is a sophisticated, dark-themed digital design portfolio characterized by a high-contrast minimalist aesthetic. It serves as an excellent reference for builders looking to implement complex Framer-based motion sequences, specifically its multi-stage hero intro and a seamless toggle between different layout densities (grid vs. list).

Design System

• Color Palette & Visual Hierarchy: The site uses a deep black background (rgb(0, 0, 0)) as the primary canvas, creating a high-contrast environment for white typography and vibrant, image-heavy project cards. Hierarchy is established through scale and motion rather than color variation.
• Typography: The system relies on a clean, sans-serif typeface. Large, bold headings used in the animated hero (e.g., "Portfolio Ingmar Coenen") transition into a smaller, highly readable scale for the body intro and navigation elements.
• Page Structure & Flow: The flow begins with a custom animated intro, followed by a fixed-position navigation bar. Below the intro text, a project gallery occupies the bulk of the page, concluding with an auto-scrolling client logo ticker and a structured footer with social links.
• Reusable Components:
  • Interactive Navigation: Capsule-shaped buttons for "Work", "About", and "Capabilities" that use pill-shaped active state indicators.
  • Layout Switcher: A dedicated toggle component for switching the gallery view between 'Grid' and 'List' modes.
  • Project Cards: Image and video containers featuring rounded corners (border-radius: 12px) and custom cursor interactions.
  • Logo Ticker: A horizontal auto-scrolling <ul> list containing SVG brand logos.
• Interaction & Motion: The site uses extensive entry animations (translateY(80px) and opacity fades). The HTML reveals usage of data-framer-appear-id for coordinated reveal effects as the user scrolls. Hover states on project cards trigger specific cursor types, and projects still in progress are tagged with a "Coming Soon" overlay.
• Implementation Clues: Built using Framer, utilizing SSR (Server-Side Rendering) for performance. The layout is highly responsive, with specific breakpoints defined at 1440px and 810px to adjust the project grid and navigation visibility.

Use Cases

• Who should clone this: Independent creative directors, high-end design agencies, or developers who want a portfolio that feels like a premium digital experience rather than a static template.
• Effective Remixes: This pattern works exceptionally well for architectural portfolios, fashion lookbooks, or luxury brand showcases where visual impact and smooth transitions are prioritized over information density.
• Practical Remix Directions: Swap the black background for a deep navy or forest green to shift the brand mood; replace the project videos with high-resolution stills; or adapt the 'Start a project' CTA into a lead generation form.
• Suggested Clone Scope: A full-page clone is recommended to capture the integrated feel of the intro-to-gallery transition, though the logo ticker and the capsule navigation are excellent candidates for individual section reuse.