Hugo Ferradás Portfolio Site

Overview

Hugo Ferradás’s portfolio is a sophisticated example of a dark-themed, grid-heavy layout designed for high-end creative direction and brand design showcases. It is an excellent clone reference for its masterclass in asymmetric layouts, sticky contextual navigation, and elegant hover states that prioritize visual storytelling over text density.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic scheme with a deep black background (#000000) and stark white text. This creates a gallery-like atmosphere where colorful project thumbnails and motion reels serve as the primary focal points.
• Typography: Features a clean, Swiss-style sans-serif (resembling Helvetica or Inter) used with significant scale variation. Project titles are small and prefixed with dots, while the hero bio uses a large font-weight to establish immediate identity.
• Page Structure:
  • Header: Minimalist navigation with contact links and current role.
  • Intro: Split layout with a sticky sidebar on the left indicating "Selected Work" and a large typographic bio on the right.
  • Hero Reel: A full-bleed video section for immediate visual impact.
  • Project Grid: An unconventional asymmetric grid using a multi-column system (ranging from col-4 to col-8) that mixes single large cards with stacked smaller cards to create visual rhythm.
• Reusable Components:
  • Work Cards: Sophisticated components featuring a base image/GIF and a .work-hover-content layer that reveals metadata and a secondary .hover-image on interaction.
  • Sticky Sidebar: A sticky-parent container that keeps regional labels fixed while project content scrolls by.
• Interaction & Motion: The site uses CSS variables (e.g., --animIndx) to stagger entrance animations. Hover states on project cards are triggered through CSS transitions, likely swapping image opacity or z-index to reveal secondary project details.
• Implementation Clues: The HTML reveals a custom grid system (col, push, medium-col) and the use of the has-been-seen class, suggesting an Intersection Observer implementation for scroll-triggered entrance animations.

Use Cases

• Who should clone this: Individual designers, creative directors, and boutique agencies wanting a "high-fashion" digital presence that feels curated rather than templated.
• Effective Remixes: This pattern works exceptionally well for photography portfolios, architectural firms, or video production houses where the work is highly visual and needs varying aspect ratios.
• Remix Directions:
  • Layout: Swap the black background for a warm off-white or deep navy to shift the brand mood.
  • Info Architecture: Repurpose the work-card logic for a blog index or a product catalogue that requires "quick-look" secondary information on hover.
  • Sections: Isolate and clone the sticky-parent logic to provide helpful context during long vertical scolls.
• Clone Scope: A full-page clone is ideal for those needing a complete professional rebrand, but the asymmetric grid logic (col-8 paired with two col-4 stacks) is the most valuable individual pattern to extract.