Ángel Valiente Design Portfolio

Overview

This portfolio for industrial designer Ángel Valiente is a premier example of high-end minimalist Brutalism. It balances massive, full-bleed imagery with a rigid grid system and playful CSS transformations, providing an ideal template for creators whose work serves as the primary visual driver.

Design System

• Color Palette & Visual Hierarchy: The site uses a neutral, clay-like background (#E6DCC9) which allows high-contrast product photography—like the deep blue sideboard in the hero—to pop. The hierarchy is extremely flat; text is secondary to the object.
• Typography System: A clean, all-caps sans-serif (resembling Helvetica or similar grotesque faces) is used for all navigation and headers. It utilizes a mono-spaced aesthetic for metadata (e.g., 'INFO' and 'STUDIO FOR DESIGN') to reinforce the industrial theme.
• Page Structure:
  1. Full-Bleed Hero Slider: A slick-slider implementation that centers large-scale product photography.
  2. Bento Grid Gallery: A multi-column image grid featuring 'jumbled' layout logic.
  3. Contact/About Footer: A two-column split using large H1 headers for categories and H2 for body details.
• Reusable Components:
  • The Rotating Card: Each .gallery_card in the grid uses inline styles (e.g., transform: rotate(2.5deg);) to create a physical "scattered print" effect.
  • Pinned Navigation: A minimal header with a logo/name on the left and 'INFO' (which scrolls to the footer) on the right.
• Interaction & Motion: The gallery uses randomized rotations (alternating between 2.5deg and -2.5deg) to break the digital rigidity. The hero slider uses a 0.5s ease-in-out opacity transition for smooth image cycling.
• Implementation Clues: Built on the Cargo Collective engine, the site utilizes a main_container wrap with a content_padding class that ensures the rigid grid maintains its margins even on mobile, where the grid automatically stacks to simplified columns (mobile_data with columns: 2 in the JSON-LD attributes).

Use Cases

• Who should clone this: Photographers, furniture designers, architects, or fashion labels who have high-fidelity project images and want a site that feels curated rather than templated.
• What to remix: The 'jumbled' grid is the most unique asset; swapping the rigid 2.5-degree rotation for more organic or less aggressive angles can change the mood from 'playful' to 'clinical.'
• Practical Directions: Reuse the Footer layout for simple service-based businesses. The two-column layout under the grid-row handles text density well while maintaining whitespace.
• Clone Scope: A quick section clone of the rotating grid is highly effective for any landing page; a full-page clone is best for those needing a comprehensive single-page portfolio with a high-impact arrival experience.