Ana Cuna Minimalist Illustration Portfolio

Overview

This is a minimalist, high-impact illustration portfolio for artist Ana Cuna. It stands out as a clone reference for its sophisticated use of white space, playful pill-shaped UI components, and a data-driven background transition system that adapts the site's aesthetic based on the active project.

Design System

• Color Palette & Visual Hierarchy: The base is a clean, stark white background. Primary UI elements like the brand logo are highlighted with a soft peach/pink (#FFC4E3). A dynamic logic is present where every project entry includes a data-color attribute (e.g., #ffc4e3, #ac76e2, #0f66b1) that shifts the background color during interaction or page transitions.
• Typography: Features a clean, modern sans-serif. The hierarchy is extremely flat; navigation labels and logo text share similar sizing, using uppercase for secondary actions (PLAY, ABOUT) and a mix for headings. There is a specific "peque" (small) class for client metadata under project titles.
• Page Structure: A persistent top navigation bar with rounded pill-shaped containers. The main content area (main__container) holds a list of projects (list-projects). A sticky footer provides copyright and legal links with minimal weight.
• Reusable Components:
  • Pill Buttons: The most distinct element—rounded, outlined containers for navigation and the logo.
  • Project Cards: A horizontal list layout where each item consists of a text content block (Title + Client) and a flexible-width image container.
  • Custom Loader: The loader-web div contains floating brand text and a striking horizontal line that serves as a visual bridge during asset loading.
• Interaction & Motion: The site uses the Barba.js library (data-barba="container") for seamless, AJAX-based page transitions. Hovering over project links likely triggers the background color shifts defined in the HTML data-color attributes.
• Implementation Clues: The HTML reveals a WordPress-based backend using custom themes. It utilizes lazyload for images and attributes specific widths to content-img containers via inline styles to maintain a strict, curated layout grid.

Use Cases

• Who should clone this: Independent creators, illustrators, and design agencies who want a "gallery-first" website that feels premium and curated rather than templated.
• Effective Remixes: This pattern works exceptionally well for high-end boutique brands or editorial lookbooks where each collection has its own distinct color identity.
• Remix Directions:
  • Interactive Backgrounds: Reuse the data-color attribute logic to change the site theme dynamically as the user scrolls through a product list.
  • Navigation Style: Extract the pill-shaped button components for a modern SaaS app's "Lite" or "Pro" toggle system.
  • Architecture Adaptation: Convert the list-based project grid into a wider masonry layout while keeping the minimalist typography and white space.
• Clone Scope: A quick section clone of the navigation bar and the footer is ideal for adding a modern touch to an existing site. A full-page clone is best for those needing a complete, motion-heavy portfolio experience.