Doug Alves Visual Design Portfolio

Overview

This portfolio for visual designer Doug Alves is a masterclass in brutalist minimalism and typographic hierarchy. It serves as an excellent reference for builders because of its unconventional layout, specifically its use of a persistent four-column grid footer and a scroll-triggered slide-show for project discovery. The site prioritizes high-contrast aesthetics and motion to create a premium, editorial feel with very few assets.

Design System

• Color Palette & Visual Hierarchy: The primary theme uses a deep obsidian-brown background (#1d1610) paired with off-white text (rgba(255, 251, 249, 0.85)). This creates a high-contrast, sophisticated look that avoids the harshness of pure black and white. The hierarchy is dominated by oversized headers that dwarf all other content, drawing immediate attention to the brand/artist name.
• Typography: The system relies on a bespoke or highly stylized sans-serif (wtqc family in the HTML) with ultra-tight letter spacing (-0.6px to -6px). The scale is extreme: hero text at 197px contrasts with functional UI text at a consistent 12px size/16px line-height, emphasizing data over decoration.
• Page Structure: The site utilizes a vertical "sticky" slide architecture (viewer-type-vertical-sticky). The landing view features a massive title followed by a clean horizontal rule and a two-row, four-column informational grid. Subsequent "pages" reveal project slides or oversized marquee text that scrolls horizontally while the user scrolls vertically.
• Reusable Components:
  • The 4-Column Footer: A rigid, absolute-positioned grid that organizes contact, location, and bio data into neat, digestible segments.
  • Project Slideshow: A central widget-slideshow component designed for high-resolution imagery with hidden navigation controls, allowing the work to be the primary focus.
  • Dividing Rules: Thin lines across the full width of the container are used to separate logical sections without adding visual weight.
• Interaction & Motion: The UI uses "scroll-triggered transitions" where elements fade in or out based on the active slide. The HTML reveals a fixed-position-container that keeps navigation icons persistent while the background content slides beneath.

Use Cases

• Who should clone this: Creative directors, visual designers, and architects who need a high-impact, low-text portfolio that feels like a premium digital lookbook.
• Effective Remixes: This pattern can be effectively remixed for luxury fashion brand lookbooks, high-end real estate listings, or boutique agency sites where visual work carries more weight than copy.
• Remix Directions: Replace the dark theme with a vibrant brand color to shift the mood from "sophisticated" to "playful." The four-column footer can be repurposed as a pricing table or a service list while maintaining the rigid minimalist layout.
• Clone Scope: For a fast win, clone the 4-column info grid section to use as a unique footer or contact area. For a complete transformation, clone the full-page vertical-slide framework to create a narrative-driven presentation.