19-86 Architecture Portfolio List Layout

Overview

This website for architecture studio 19-86 features a brutalist, list-based portfolio that prioritizes information density and typographic impact. It is an exceptional reference for builders who want to create a high-end editorial experience using structured data and minimalist aesthetics rather than standard grid layouts.

Design System

• Color Palette & Visual Hierarchy: A strict monochrome palette (black text on off-white background). Hierarchy is established through extreme scale shifts rather than color, contrasting granular table data with massive background hero numbers.
• Typography System: Uses a clean, high-contrast sans-serif. The project titles utilize a standard weight at a body-text scale, while the background counter (#counter) features massive, bold numerals that dominate the viewport but remain layered behind active content.
• Page Structure: The site is built on a single-page list structure (.projects). Each project is a row (.list-item) containing project-specific metadata (Typology, Place, Surface, Date, Status).
• Reusable Components:
  • Collapsible Rows: The .collapsible class allows individual rows to expand, revealing additional metadata and a specific project image without leaving the index.
  • The Image Hover Portal: An innovative #image-hover div that follows the cursor, triggered by .dot-show or project links, providing a peek into the visual work without cluttering the text list.
  • Persistent Counter/Clock: Elements that anchor the visual brand (19-86) or provide utility while acting as a large-scale graphic background.
• Interaction & Motion:
  • AJAX Loading: Evidence from class names like .ajax-link indicates a seamless transitions between global list and individual project views.
  • Visibility States: Rows use .hide and .dot-show to toggle information density dynamically.
• Implementation Clues: The HTML reveals a custom-built structure focused on data attributes (data-image, data-limit) to drive JavaScript-based animations and image previews. It uses a semantic <main> wrap and a simplified grid/flex layout for project metadata alignment.

Use Cases

• Who should clone this: Architects, graphic designers, and editorial photographers who have large archives of projects and want to emphasize their body of work as a structured database rather than a traditional gallery.
• Effective Remixes:
  • E-commerce: Adapt the list for a high-end fashion inventory where hovering over a SKU reveals the product on a model.
  • Change-logs/Directories: Use the collapsible rows for technical documentation or directory lists where primary metadata is visible at a glance.
• Practical Remix Directions: Swap the monochrome theme for a vibrant brand color while keeping the heavy typography; replace the project 'dots' with icons that represent different categories of work.
• Suggested Clone Scope: Start with the Collapsible List Item and the Cursor-Follower Image Hover for a quick high-impact section addition, or clone the Full-Page List Index for a complete portfolio overhaul.