José Meza Minimalist Portfolio

Overview

This website is a highly refined, minimalist portfolio for a multidisciplinary designer, utilizing a brutalist-inspired black-and-white aesthetic. It is an excellent clone reference for its sophisticated use of accordion-based navigation to maximize screen real estate and its integration of auditory feedback to enhance digital interaction.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast monochromatic palette with a solid black background (#000000) and white text. Active sections or headers carry white text, while collapsed or secondary information uses a muted gray to denote hierarchical depth.
• Typography System: Features a clean, sans-serif grotesque typeface. The scale is intentionally oversized for the name and title to establish brand authority, while nav items use a medium-weight large font. Body text in expanded sections uses a smaller, readable scale with generous line-height.
• Page Structure: A single-page layout where content is vertically stacked. The sequence starts with a static header (Name/Title), followed by three interactive accordion panels: "About," "Selected Work," and "Contact."
• Reusable Components:
  • Interactive Accordion Panel: The core structural unit consisting of a .expandablePanelTrigger and a hidden .expandablePanelContentContainer.
  • Custom Image Gallery: Located within the work section, featuring side-by-side navigation triggers (#imageContainerLeftTrigger/#imageContainerRightTrigger) and an image counter.
  • SVG Cursor: A custom-styled cursor that replaces the default browser pointer, adding a curated feel.
• Interaction and Motion: Uses fadeOnLoad classes for entrance animations. The most distinct feature is the data-driven audio triggers (e.g., data-audio-open="shutter") that play sound effects when panels are toggled. Transitions between accordion states are immediate and smooth.
• Implementation Clues: The HTML reveals a class-based structure for managing states (e.g., .showing, .soundOn). The sound controller is a fixed-position toggle (#soundController) in the bottom right, allowing users to opt-out of the site's auditory experience.

Use Cases

• Who should clone this pattern: Creative directors, architects, or graphic designers who need a portfolio that emphasizes curation over quantity.
• Effective Remixes: This layout works perfectly for "Link-in-bio" style landing pages or boutique agency landing pages where the brand voice is sophisticated and minimal.
• Practical Remix Directions: Builders can swap the monochromatic palette for a brand-specific primary color or replace the sound effects with haptic-inspired feedback for mobile-first versions. The image gallery can be adapted into a slider for case studies.
• Suggested Clone Scope: A quick section clone of the accordion panel is highly valuable for UI kits. For a complete personal brand overhaul, a full-page clone provides a ready-made structure for content-heavy portfolios in a compact form factor.