Dylan Brouwer Portfolio Landing Page

Overview

This high-end portfolio landing page serves as an exceptional reference for creating a modern, motion-heavy digital presence. It stands out through its use of massive typographic scales, high-fidelity video previews hosted on Bunny.net, and interactive 3D Spline elements that elevate a standard service layout into an immersive experience.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a sophisticated dark mode aesthetic with a deep gray-to-black gradient background. Visual hierarchy is established through extreme contrast in typography and localized "glow" effects that guide the eye toward interactive elements.
• Typography System: The hero section features ultra-bold, condensed sans-serif display type ("SITES THAT MOVE") that utilizes opacity gradients. Body copy and secondary headers use a cleaner, geometric sans-serif (appearing to be a variable font) with generous letter spacing for maximum readability against the dark backdrop.
• Page Structure: The layout follows a classic high-conversion flow: a typography-heavy Hero section, a CMS-driven project grid with large video cards, a horizontal logo marquee for social proof, and a 3D-enhanced Services section.
• Reusable Components:
  • Interactive Cursor: A custom follower cursor that morphs and displays context-sensitive text like "Show Work."
  • Project Video Cards: Containers featuring auto-playing loop videos with placeholder image fallbacks and custom hover states.
  • Service Cards: Framed blocks containing interactive Spline 3D scenes ($canvas elements) that react to scroll and hover.
  • Color-Swoosh Buttons: Action links that use a multi-layered background transition on hover.
• Interaction & Motion Patterns: The site employs GSAP-style scroll-triggered animations, including text splitting and blurring reveals. A signature "vertical grid line" overlay provides a constant structural rhythm across all sections.
• Implementation Clues: The HTML reveals a robust Webflow build utilizing a global style system for adaptive scaling, text-clamping, and custom scrollbar styling. Video content is professionally integrated via Bunny.net's API for high-performance delivery.

Use Cases

• Who should clone this: Digital agencies, motion designers, and high-end freelancers looking to position themselves as premium service providers through a "motion-first" brand identity.
• Remix Directions: Replace the 3D Spline objects with 2D Lottie animations for a lighter performance footprint, or swap the oversized hero text for high-impact photography while maintaining the grid-line overlay for structure.
• Practical Application: Individual sections, like the video-based project grid or the logo marquee, can be cloned independently as modular additions to existing sites needing a professional polish.
• Suggested Scope: A full-page clone is recommended for those wanting to master the synergy between Webflow CMS and external assets like Spline and Bunny Video.