Taiki Murayama Portfolio Bento Grid

Overview

This portfolio for Taiki Murayama showcases a high-impact, non-linear layout that combines a dynamic image grid with a structured accordion-style work history. It is a premier reference for designers and creative directors who want to balance experimental visual storytelling with professional, scannable data. The layout's strength lies in its use of overlapping elements and bold typography to create a sense of depth and movement on a 2D plane.

Design System

• Color Palette & Visual Hierarchy: The design uses a high-contrast monochromatic base (pure black text on a warm-white or eggshell background) with intentional pops of brand color within project imagery (e.g., the bright green of Amazon Halo or the orange of the Cruise vehicle). The absolute-positioned hero text dominates the initial field of view, establishing a clear brand identity instantly.
• Typography: The system utilizes a sophisticated Serif-Display font (FHPhemister-Bold.woff2) for the primary identity and a clean, wide-set Sans-Serif for body text. Hierarchy is maintained through capitalization (all-caps for section headers and brand names) and scale, where the name is several times larger than the supporting copy.
• Page Structure: The layout follows a decreasing visual density:
  1. Hero Section: A complex, overlapping bento-style collage of images, GIFs, and shapes scattered around the central name.
  2. Summary Section: A simple list of past clients and a short bio.
  3. Work History Section: A vertically structured project list using horizontal dividers and interactive elements.
• Reusable Components:
  • Dynamic Image Grid: The "fluid-engine" grid allows for overlapping z-index placements, making it easy to remix by swapping image sources.
  • Accordion Experience List: A series of sqs-block-accordion items with plus/minus icons that expand to reveal project descriptions, ideal for dense professional histories.
  • Top Navigation: A minimalist, high-aligned nav bar (01.Profile, 02.Work, etc.) that stays out of the way of the visual content.
• Interaction & Motion: The interface implies a heavy use of micro-interactions, specifically GIFs for project previews and hover-states for the accordion buttons. The HTML structure (fluid-image-animation-wrapper) indicates that images are intended to feel lightweight and responsive to the viewport.
• Implementation Clues: Built on Squarespace’s Fluid Engine, the site relies on a grid-based coordinate system for placing blocks (fe-block). This makes it highly modular, as components are contained within discrete div wrappers that can be independently cloned.

Use Cases

• Who should clone this: Creative professionals (designers, photographers, art directors) who have a diverse set of visual assets but need a structured way to present an extensive career history.
• Effective Remixes:
  • Agency Landing Pages: Use the overlapping image grid to showcase a "work-in-progress" or studio vibe.
  • Resume Sites: Keep the bottom accordion structure and horizontal rules but replace the top collage with a single high-quality headshot or minimalist logo.
• Practical Directions: To remix, swap the hero's serif font for a bold grotesk sans-serif for a more modern-tech feel. Adjust the image border-radius (currently utilizing 15px on some shapes) to either sharp corners for a brutalist look or circular masks for a softer aesthetic.
• Clone Scope: The hero collage is perfect for a quick section clone to add visual interest to an existing bio page. The full-page clone is best for those migrating a comprehensive CV into a modern, visual format.