Camille Mormal Interactive Design Portfolio

Overview

This project is a high-end, WebGL-powered interactive portfolio designed for Camille Mormal. It serves as an excellent clone reference for its sophisticated use of canvas-based transitions, minimal layout, and a unique fractional pagination system that anchors a list-based project navigation.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a high-contrast, dark-mode foundation with a deep charcoal/black background and crisp white typography. The hierarchy is extremely focused, prioritizing a single central interaction point (the loader or list) over complex navigation bars.
• Typography: The site features a sophisticated serif font for project titles (.h-title-a) and a clean sans-serif for functional data like percentages and counts. The typography scale is large and elegant, intended to make text the primary visual element.
• Page Structure & Flow: The initial state is a centered loading sequence (#load) featuring a percentage indicator. The main architecture (#main) consists of a project list (#h-title-w) where each item contains a title and an index number. At the bottom, a fractional paginator (#h-pgn) tracks movement through the vertical list.
• Reusable Components:
  • Interactive List: An <ul> based navigation where project titles are paired with individual counters.
  • Fractional Paginator: A three-part footer component (#h-pgn-left, -middle, -right) that provides a persistent status of the user's position.
  • Custom Loader: A simple, centralized <div> based percentage counter that can be easily repurposed for any asset-heavy site.
• Interaction & Motion: The structure suggests a smooth, likely scroll-jacked or momentum-based interaction where the project list moves vertically. The presence of a <canvas id="gl"> indicates that webGL is used for high-performance visual transitions between states.
• Implementation Clues: The HTML structure is minimalist, using specific IDs like #sail (likely a page transition overlay) and #h-cross (an ornamental UI element). The lack of heavy utility classes suggests a custom-authored CSS or a specialized animation library approach.

Use Cases

• Who should clone this: Creative directors, independent designers, and boutique agencies looking to build a "digital gallery" rather than a traditional corporate website.
• Effective Remixes: This pattern works exceptionally well for luxury brand lookbooks, photography portfolios, or architecture firm showcases where imagery and smooth transitions take precedence over text-heavy content.
• Remix Directions: Replace the black background with a muted earth-tone palette for a brand-led feel, or swap the serif font for a modern monospaced typeface to achieve a more technical, developer-centric aesthetic.
• Suggested Clone Scope: For a fast win, clone the Fractional Paginator and centered loader design. For a more intensive build, replicate the full WebGL list navigation to master high-end page transition logic.