Maëlan Graphic Design Portfolio Boutique

Overview

This website is an artisan-style graphic design portfolio that prioritizes typography and sophisticated scroll choreography. It serves as an excellent clone reference for creatives who want to showcase work through a high-performance, non-linear experience that uses large-scale type as a structural element rather than just a decorative one.

Design System

• Color Palette & Visual Hierarchy: The site uses a minimalist "bone" or cream background (#F5F5DC style) with high-contrast black typography. This creates a tactile, paper-like feel that emphasizes the designer's "artisan" positioning. Visual hierarchy is driven by extreme scale differences between tiny labels (u-text-label) and massive headings (u-text-huge).
• Typography: The system relies on a combination of a clean, structured sans-serif for functional text and a high-impact, wide serif/display face for headers. The use of uppercase formatting for project titles in the accordion list adds a sense of architectural structure.
• Page Structure: The flow begins with a dramatic loading sequence ("Enchanté"), followed by a dynamic header section with overlaid text and images. It transitions into a multi-row marquee section for qualitative statements and finally into a robust accordion-based project list.
• Reusable Components:
  • The Project Accordion: A sophisticated row-based component (c-accordion_item) that expands to reveal a swiper-wrapper image slider and detailed meta-data.
  • Marquee Rails: The c-rail component used for rotating headings like "Réalisations."
  • Interactive Shape Grid: A decorative module (c-shapes) that uses CSS-driven geometric shapes to fill white space.
• Interaction & Motion: The site is built for heavy scroll interaction using a timeline-based animation engine (likely GSAP or similar, evidenced by data-module-timeline). Elements use data-timeline-from and data-timeline-to attributes to define parallax offsets and opacity shifts based on scroll progress.
• Implementation Clues: The HTML uses a modular BEM-like naming convention (c- for components, o- for objects, u- for utilities). It leverages the Swiper library for image carousels and a custom attributes-based system to trigger scroll-linked animations.

Use Cases

• Who should clone this: Independent designers, boutique architecture firms, or luxury craft brands who need their portfolio to feel "custom-built" and high-end.
• Remix Directions:
  • Architecture Portfolios: Swap the graphic design images for massive architectural photography; the accordion layout is perfect for displaying floor plans alongside finished shots.
  • Concept Stores: Use the marquee rails for promotional announcements and the vertical accordion list for product categories.
  • Studio Websites: Repurpose the "Savoir-faire" list section to present services or team specialties with the same staggered scroll entrance.
• Suggested Clone Scope: For a fast win, clone the Project Accordion system only, as it provides a compact way to hold a massive amount of visual content without cluttering the initial page load. A full-page clone is recommended only if you have the high-resolution imagery and animation skills to maintain the site's characteristic "flow."