Koichi Takada Architects Portfolio Home

Overview

This high-end architectural portfolio features a sophisticated split-screen layout that balances minimalist typography with large-scale immersive imagery. It is a premier reference for builders looking to implement a premium, narrative-driven project showcase that uses white space and horizontal sliders to guide user attention.

Design System

• Color Palette & Visual Hierarchy: A stark, professional palette of high-contrast black and white (sub-title-black, copy-black, pull-out-white). The hierarchy uses the left-hand white space for fixed branding and metadata, while the right-hand side serves as a dynamic canvas for high-resolution project photography.
• Typography: The system relies on a clean, sans-serif font family. It uses a "sticky" heading pattern where titles remain fixed or move at different speeds than body text. Emphasis is achieved through light font weights for descriptions and bold weights for project names.
• Page Structure: The layout starts with a full-height project-gallery split into a left-side data panel and a right-side image slider. This is followed by large-text-block sections and a news-rows section featuring alternating image-text layouts (layout-1 and layout-2).
• Reusable Components:
  • Project Slider: A slider-ui with a fractional counter (e.g., "02/10") and a custom clock canvas-based progress indicator.
  • Arrow Links: Minimalist link components (arrow-link) featuring horizontal arrows and a signature hover state that reveals text inside an <i> tag.
  • Navigation Overlay: A full-screen menu triggered by a three-line hamburger icon.
• Interaction & Motion: The site utilizes heavy entrance animations (data-animate) and stagger effects. A unique "hover-collector" widget handles image scaling and text transitions. The project slider uses z-index layering and transform: translate for smooth, stacked transitions between slides.
• Implementation Clues: The HTML uses a custom data-attribute architectural pattern (data-widget, data-block) indicating a bespoke JavaScript component system rather than a standard utility framework like Tailwind. It relies on a visual-grid-container to maintain strict alignment across 12-16 columns.

Use Cases

• Who should clone this: Architectural firms, high-end interior designers, luxury real estate developers, and creative agencies with a "less-is-more" brand identity.
• Effective Remixes: This pattern is ideal for "lookbooks" where visual storytelling is more important than immediate technical specs. The split-screen logic can be adapted for a boutique e-commerce shop where the left side stays static with product names while the right side scrolls through lifestyle shots.
• Remix Directions:
  • Info Architecture: Adapt the news-rows section to serve as a blog or service list.
  • Branding: Swap the minimalist black/white for a more earthy palette to suit sustainable or organic brands.
  • Scope: Reusing just the project-gallery slider is a high-value "quick clone" for any landing page hero section, while the full-page clone is best for comprehensive portfolio sites.