Yinka Ilori Portfolio Mosaic Grid

Overview

This portfolio for artist Yinka Ilori is a masterclass in high-impact visual storytelling, centered around a bold, patterned hero section and a sophisticated mosaic grid. It serves as an excellent reference for builders wanting to balance loud, maximalist aesthetics with a clean, functional navigation and layout system. Its strength lies in using asymmetrical grids to create rhythm and interest in a project gallery without sacrificing readability.

Design System

• Color Palette & Visual Hierarchy: The site uses a vibrant, high-contrast palette of pink, orange, magenta, and green, primarily driven by a decorative SVG background motif (ripples-of-stiffness.svg). Text is strictly white or black to maintain legibility against complex backgrounds, while the white, blocky logo dominates the visual hierarchy of the hero section.
• Typography System: The brand uses a heavyweight, rounded Slab-Serif/Display font for main headings (visible in the "YINKA ILORI" logo) and a clean, utilitarian Sans-Serif for navigation and project meta-data. Project titles use h4 tags followed by p tags for client/description text, prioritizing a clear 1-2 punch of information.
• Page Structure & Section Flow: The layout begins with a full-height header-image acting as a parallax hero. This is followed by a main content area containing a grid-mosaic. The grid is meticulously structured into rows where project links alternate between wide bleed-aligned images and smaller, vertically centered text blocks.
• Reusable Components:
  • Mosaic Grid: A flexible 9-column system (grid-desktop-9) that uses col-span classes to create intentional white space and asymmetry.
  • Image Hover Containers: Links wrapped in image-hover classes that likely handle opacity or scaling effects.
  • Fader Wrapper: A utility class (fader hidden) applied to grid items to handle scroll-triggered entry animations.
• Interaction & Motion: The hero section uses rellax for parallax scrolling effects. Portfolio items utilize a fade-in-on-scroll pattern. The arrow at the bottom of the hero indicates a transition to the content-heavy grid below.
• Responsive Behavior: The HTML reveals a mobile-first column shift, moving from 9 columns to 6 (grid-mobile-6). It uses mobile-order classes (e.g., mobile-order-11, mobile-order-13) to re-sequence the layout, ensuring that text labels appear correctly relative to images on smaller screens.

Use Cases

• Who should clone this: Artists, design studios, and luxury brands that need a portfolio that feels as curated and high-energy as the physical work they produce.
• Effective Remixes: Creative agencies can swap the loud floral/geometric patterns for minimalist textures or architectural photography while keeping the staggered grid logic for a "boutique" feel.
• Remix Directions:
  • E-commerce: Adapt the mosaic grid for a "Lookbook" page where images link to product categories.
  • Editorial: Use the asymmetrical layout for a digital magazine feature where pull-quotes and photography overlap or stagger.
• Suggested Clone Scope: The grid-mosaic is the most valuable section to clone for its responsive ordering logic and white-space management. The hero section is ideal for those needing a high-fidelity visual entry point for a single-page landing site.