Arthur Simonini Portfolio Layout

Overview

This website is a sophisticated, minimalist portfolio for composer Arthur Simonini, designed with a heavy emphasis on typography and horizontal scrolling motion. It serves as an excellent reference for creatives who need to showcase a high volume of multimedia content (audio, video, and credits) within a single-page, fluid interface.

Design System

• Color Palette & Visual Hierarchy: The system uses a high-contrast monochromatic base (black background, white text) that creates a cinematic, editorial feel. Visual interest is driven by large-scale serif typography and full-bleed imagery that appears on hover/interaction.
• Typography: The design features a prominent, custom serif typeface with decorative ligatures (seen in "ARTHUR SIMONINI" and section headers). A secondary, cleaner sans-serif is used for functional metadata (e.g., "B.O.", "DISQUES") and body copy within expandable sections to maintain readability.
• Page Structure: The layout is organized into distinct horizontal bands:
  1. Header/Navigation: Large brand name and category links.
  2. Marquee Intro: Infinite scrolling text lines that preview projects.
  3. Audio Player: A wide, fixed-height section with a persistent progress bar (js-playlistProgress) and tracklist.
  4. Project Sections: Segmented by category (B.O., Habillages, Disques), featuring expandable vertical lists.
• Reusable Components:
  • Horizontal Marquees: The js-marquee lines are ideal for dynamic landing pages.
  • Accordion Project Items: The js-boItem and js-lineItem structures allow for hidden depth, containing embedded Vimeo players (js-boVideo) and detailed credits.
  • Progress-Tracked Audio Player: A custom-styled list where clicking a js-playlistItem updates a global player state.
• Motion Patterns: The site relies on Marquee-style scrolling for energy and CSS-driven transitions for the expansion of project details. Hover states trigger image previews within the marquee lines (intro__image), creating a peek-a-boo effect.
• Implementation Clues: The HTML utilizes a custom JavaScript architecture (evident from classes like js-slideshow, js-marquee, and js-boItem) to manage state for video toggles and audio playback. Data attributes (data-href, data-url) are used to dynamically load media into the containers.

Use Cases

• Who should clone this: This layout is perfect for film composers, sound designers, directors, or fashion photographers who need an editorial-grade showcase that highlights both the name and the diverse nature of their work.
• Effective Remixes:
  • Brand Swap: Replace the high-contrast black/white with a softer cream/earth-tone palette for a luxury or lifestyle brand.
  • Information Architecture: Adapt the audio player section into a "Press" or "Recent News" ticker for corporate sites.
  • Feature Reuse: Clone only the horizontal marquee intro__line for a distinctive landing page header while maintaining a traditional grid below.
• Clone Scope: A full-page clone is recommended for portfolios requiring a "showreel" first impression. Alternatively, the audio playlist and progress bar logic can be extracted as a standalone component for any site requiring integrated audio streaming.