Quentin Hocdé Portfolio Hero Page

Overview

This portfolio landing page is a high-impact example of creative front-end development, utilizing WebGL-driven background visuals blended with sophisticated text animations. It serves as a premier reference for builders looking to implement interactive typography and high-performance immersive backgrounds that don't compromise content legibility.

Design System

• Color Palette & Visual Hierarchy: A high-contrast monochrome scheme (absolute black and white) defines the aesthetic. The visual hierarchy is established through extreme scale variations between the massive, screen-filling hero title and the tiny, utility-focused body text segments.
• Typography: The site features a geometric, sans-serif typeface. The secondary scale uses a consistent small font-size for metadata and navigation, while the primary heading uses an ultra-wide fluid scale that stretches across the viewport margins.
• Structure & Flow: The layout utilizes a 12-column grid. The top navigation is split between branded links on the left and social/external links on the right. The central section is occupied by four distinct columns of professional bio information, followed by an absolute-positioned massive hero title at the bottom corner.
• Reusable Components:
  • c-magic-text: A text-shuffling component that reveals characters with variable opacity and timing.
  • c-title_item: A complex letter-stacking component seen in the HTML that creates a "rolling" or "cascading" vertical animation for large headings.
  • Responsive Navigation: A clean, minimal grid-based header that collapses into an animated mobile overlay.
• Interaction & Motion: Motion is the core of this identity. The HTML evidence points to granular letter control using translate3d and variable opacity. The background uses a WebGL <canvas> for fluid, organic distortion that reacts to movement.
• Implementation Clues: Built with a modular custom component approach (c- prefixed tags like <c-app>, <c-magic-text>). Styling is handled via Tailwind-like utility classes (e.g., lg:col-span-12, gap-x-small), and page transitions are managed via a transition-fade container with a swup-like routing structure.

Use Cases

• Who should clone this: Creative developers, digital artists, and motion designers who want to showcase technical prowess alongside their work.
• Products for Remixing: High-end fashion lookbooks, experimental tech landing pages, and cinematic studio portfolios.
• Practical Remix Directions:
  • Typography Swap: Replace the geometric sans with a high-contrast Serif to shift from "tech/minimal" to "editorial/luxury."
  • WebGL Background: Swap the monochromatic blur for a colorful particle system or interactive 3D mesh while keeping the UI grid layout.
  • Sectional Reuse: Clone only the c-magic-text logic for micro-interactions on buttons or links in a more traditional layout.
• Suggested Scope: A full-page clone is recommended to maintain the relationship between the background canvas and the typography, though the 12-column grid structure alone is a great reusable boilerplate for information-dense bios.