Antonio Luvé Portfolio Image Grid

Overview

This portfolio belongs to illustrator Antonio Luvé and serves as a masterclass in minimalist, high-impact grid design. It uses a bold primary yellow background and a dynamic, multi-column image grid that prioritizes visual content over text. It is a strong reference for builders looking to implement custom cursor interactions and color-coordinated hover states to create a playful, tactile user experience.

Design System

• Color Palette & Visual Hierarchy: The dominant background is a vibrant yellow (#FFC900). Interactive elements use a specific "hover-state" color strategy where each grid item is assigned a unique background color—such as purple (#9966FF), orange (#FF5E00), and green (#019273)—visible only when the mouse interacts with the image. The logo and navigation text are black, providing high contrast against the bright background.
• Typography: The site uses a clean, modern sans-serif typeface (likely a variant of Poppins or similar) with generous letter spacing. The hierarchy is extremely flat; navigation links ("Info", "Projects") and project titles (H3) share similar weights, allowing the artwork to lead the visual hierarchy.
• Page Structure: The layout features a persistent top navigation bar with the logo centered between two utility links. Below this, a large-text lead-in section ("Illustrations & silly animations") transitions into a dense, alternating grid of images and GIFs.
• Reusable Components:
  • Dynamic Grid Cards: Components (div.box) containing an image and a hidden a.box_hover overlay that appears on hover.
  • Top Navigation: A minimalist header with a central animated SVG/GIF logo and corner-aligned text links.
  • Mouse Follower: A custom cursor element (div.mouse) that tracks movement and likely scales or changes color upon entering grid items.
• Interactions & Motion: The primary interaction is the hover state on grid items. When a user hovers, the image is replaced or overlaid by a solid color block containing the project title. The HTML class mouseFollow indicates that the cursor logic is tied to individual grid containers to handle scale and proximity effects.
• Responsive Behavior: The HTML structure uses a flexible column-based system (div.col and div.b), suggesting the grid reflows from a multi-column desktop layout to a single or double-column mobile view while maintaining the aspect ratio of the images.

Use Cases

• Who should clone this: Illustrators, graphic designers, and photographers who want their work to be the primary focus without the distraction of heavy UI elements or complex navigation.
• Effective Remixes: Creative agencies can adapt this grid for Case Studies, or e-commerce brands could use this layout for a "Lookbook" feature where hover states reveal product names and prices.
• Practical Remix Directions:
  • Brand Swap: Replace the yellow background with a dark mode or neutral palette while keeping the vibrant hover colors.
  • Architecture: Use the top-corner navigation style for one-page scrolling sites.
  • Sectional Reuse: Clone only the mouseFollow grid logic to display a gallery within a more traditional corporate site.
• Suggested Clone Scope: A full-page clone is recommended to capture the relationship between the custom cursor, the background-color transitions, and the minimalist header.