Maximilian Berndt Portfolio Site

Overview

Maximilian Berndt's portfolio is a masterclass in minimalist "brutalist-light" web design, utilizing a stark white canvas and a precise grid system. It is a strong clone reference for its sophisticated use of CSS sticky positioning and hover-triggered micro-interactions that create a sense of depth and activity without visual clutter.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic scheme—primary white (bg-background) with black text (text-foreground) and slate grey (text-grey) for secondary information. Hierarchy is established through generous whitespace rather than font weight or color pops.
• Typography: A clean, neutral sans-serif (resembling Inter or Helvetica) is used throughout. The scale is relatively uniform, with small, uppercase-style labels for sections like "Work," "Skills," and "Clients," ensuring equal visual weight across disparate types of content.
• Page Structure: The layout relies on a three-column grid (md:grid-cols-[120px_280px_1fr]). Section headers (e.g., "Work") are placed in the narrow left column, list items in the center, and the right column serves as a dynamic space for hover-revealed content.
• Reusable Components:
  • Sticky Sidebars: The section labels use sticky top-64, keeping context visible while browsing long lists.
  • Interactive List Items: Links feature a custom transition (-translate-x-14 hover:translate-x-0) that reveals a hidden arrow icon and secondary metadata (like agency names) on hover.
• Interaction & Motion: The site uses ease-quart-in-out transitions. The primary motion pattern is a horizontal "slide-in" effect for links and a fade-in/scale effect for decorative icons (↗).
• Responsive Behavior: On mobile, the grid collapses to a single column, but the header labels (h3) remain sticky at 40svh to maintain the "sliding" navigation feel as the user scrolls through the full-width lists.
• Implementation Clues: The site is built using Svelte (indicated by the svelte-announcer ID) and Tailwind CSS, leveraging utility classes like group-hover, gap-x-grid-x, and transition-transform for its complex animation logic.

Use Cases

• Who should clone this: Creative developers, UI/UX designers, and architects who want a high-end, gallery-like portfolio that prioritizes typography and list-based navigation over large image blocks.
• Effective Remixes: This pattern works well for agency "Services" pages, digital bookshelves, or documentation sites where users need to scan many text items quickly while maintaining visual interest.
• Practical Directions:
  • Information Architecture: Swap the "Work" list for a "Product Inventory" or "Press Archive."
  • Brand Style: Keep the layout but introduce a dark mode or a single accent color for the hover-reveal metadata.
  • Interaction: Reuse the group-hover logic to show project thumbnails in the empty right column instead of just text metadata.
• Clone Scope: A quick section clone of the interactive list is highly valuable for any navigation component; a full-page clone is best for those seeking a complete "Developer Resume" template with a distinct aesthetic.