Aikawa Kenichi Photography Portfolio

Overview

Aikawa Kenichi’s portfolio is a high-end minimalist photography showcase that emphasizes spaciousness and sophisticated motion. It is an excellent clone reference for creatives looking to implement canvas-based image rendering combined with a custom interaction system that replaces standard browser UI elements.

Design System

• Color Palette & Visual Hierarchy: A strict monochromatic palette of high-contrast black and white. The background is purely white to allow photography (rendered via canvas) to be the focal point. Hierarchy is established through extreme negative space and varying font weights rather than color.
• Typography: Clean, sans-serif type used with generous letter-spacing. The HTML reveals a home-intro__ttl-split-chars structure, indicating a letter-by-letter animation system for headers. Labels like "All works" and numerical counters provide metadata without cluttering the view.
• Page Structure: The layout uses a fixed-position navigation (l-nav) and a centered intro block (home-intro). The images are managed by a global canvas layer (g-canvas), allowing for seamless transitions between a grid view and a high-resolution gallery view.
• Reusable Components:
  • Text Splitter: The data-split-chars system for animating headlines.
  • Custom Mouse Pointer: A dedicated g-mouse-pointer div that follows the cursor and dynamically updates text (e.g., "view", "prev", "next", "close") based on the hover target.
  • Preload Progress: A circular progress indicator with numerical percentage tracking (as seen in g-progress__count).
• Interaction & Motion: High use of JS-driven movement. The HTML indicates a data-pointer interaction system where elements like .g-canvas__gallery-next trigger specific states in the cursor. Transitions are likely handled via GSAP or a similar engine, given the complex splitting of DOM nodes for text.
• Implementation Clues: Built with a Vue-based framework (indicated by data-v- scoped attributes and #id__app). The site uses a "split-child" technique to wrap every individual character in a <span> for granular CSS/JS animation control.

Use Cases

• Who should clone this: Photographers, architects, and high-end fashion labels who require a digital experience that feels like a gallery installation.
• Effective Remixes:
  • Portfolio Swap: Keep the canvas grid and custom cursor but swap the font for a serif to lean into a more traditional editorial aesthetic.
  • Product Showcases: Adapt the image gallery for a "lookbook" where the custom cursor provides quick "Buy" or "Details" action cues.
• Remix Directions: Builders can extract the g-mouse-pointer logic as a standalone feature for existing sites to improve UX on interactive image heavy-pages.
• Clone Scope: A full-page clone is recommended to maintain the relationship between the canvas background and the HTML text overlays, as the interaction design relies on their deep integration.