Victor Cango Brutalist Portfolio Hero

Overview

This hero section belongs to the portfolio of Victor Cango, showcasing a refined brutalist aesthetic that merges experimental typography with interactive web elements. It is an excellent clone reference for developers looking to implement full-screen canvas interactions, localized time displays, and minimal yet bold typographic layouts.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic scheme (typically off-white or light grey backgrounds with black text). Hierarchy is established through font weight variations and specialized spans (e.g., fg-text for bolding and it-text for italics) to emphasize key professional attributes.
• Typography System: The design leans heavily on serif and sans-serif pairings inspired by print media. The navigation uses wide, all-caps styling (INDEX, JOURNAL), while the main body text uses a large-scale font size to create a narrative-heavy visual impact.
• Page Structure: The layout is intentionally sparse. A top navigation bar contains three distinct areas: navigation links on the left, a localized digital clock in the center, and supplemental links on the right. The center is dominated by a brief, multi-line professional summary followed by a simple text-based call to action.
• Reusable Components:
  • Navigation Bar: A three-column header with specific attention to spacing and alignment.
  • Interactive Canvas Section: A <canvas> layer that utilizes an invisible <video> element (src: showreel.mp4) as a texture source for interactive visual effects.
  • Minimal Text Link: An underlined text link (Lire la suite) with a trailing arrow icon, serving as a clean alternative to traditional buttons.
• Interaction & Motion: The presence of a Playground section and a canvas suggests that cursor movement likely distorts or reveals the video texture underneath. The navigation links feature underlines and parenthetical asides (like (À VENIR)) that indicate state and availability.
• Implementation Clues: The site is built using the Nuxt.js framework, evidenced by the # __nuxt and # __layout wrappers. It uses semantic HTML tags like <main>, <section>, and <video> for a clean document structure.

Use Cases

• Who should clone this: Creative developers, UX designers, and digital artists who want a high-impact, low-clutter landing page that emphasizes their personality and technical skill.
• Effective Remixes: This pattern works perfectly for agency landing pages, digital resumes, or landing pages for boutique creative studios.
• Practical Remix Directions:
  • Visual Swap: Replace the background video texture with a WebGL shader or a high-resolution image to change the mood while keeping the layout.
  • Info Architecture: Adapt the top-center clock to display a ticker of current projects or site availability statuses.
  • Styling: Shift from monochromatic to brand-specific colors while maintaining the bold typographic scale.
• Suggested Clone Scope: Start by cloning the SplashScreen section to capture the typography and header layout. The Playground section is ideal for those specifically needing to integrate a video-textured canvas into their project.