Back to Work

SPEEDBOAT: Building a Portfolio That Thinks Like an Architect

Architecture studios are not short on opinions about quality. SPEEDBOAT, a design practice based in Los Angeles, holds that standard for everything they produce, including the digital presence meant to represent it.

The brief called for a portfolio site that could carry the weight of a serious body of work. What we built went considerably further than that.

ABOUT THE CLIENT

SPEEDBOAT is a Los Angeles-based architecture and design studio with projects spanning residential, commercial, and civic typologies across California and beyond. Their portfolio, from Echo Park housing collectives to penthouse offices in West Hollywood, reflects a practice defined by precision, material intelligence, and a clear design point of view.

A studio of that calibre required a digital platform built to the same standard.

WHAT WE BUILT

1 to 1 Design Implementation

The designs came in detail and were executed with equal precision, translating every spacing value, typographic decision, and interactive state from Figma to browser without compromise. The live site and the design file are the same thing. For a brand built on craft, visual inconsistency carries a cost. We ensured there was none.

Immersive Visual Entry & Infinite Scroll

The first thing a visitor encounters is a cinematic splash screen, a bespoke Lottie animation optimised separately for mobile and desktop.

The home page follows as a seamless, auto-scrolling mosaic of projects: an infinite gallery that draws users into the studio's body of work without requiring them to navigate toward it.

Content Architecture Powered by Sanity CMS

The entire site is underpinned by a deeply configured Sanity.io implementation. Every project is structured through it: metadata, image stacks, multimedia assets, descriptive content, and categorical tags are all authored from a single, flexible content environment.

Sanity also powers the site's filtering logic. Tags created within the CMS flow directly into the front-end index, keeping content and presentation in precise alignment at all times. The technology disappears. The studio simply has control.

Context-Aware Layout Controls

The project listing includes a UI control allowing users to cycle through eight distinct layout configurations for project titles, varying indentation, alignment, and positioning. A small feature that reflects a considered understanding of the client.

Performance-Optimised Video

A custom Vimeo component uses IntersectionObserver to play and pause video as it enters and exits the viewport, delivering a browsing experience that performs efficiently without sacrificing media richness.

Navigation Architecture: Intercepting Routes

The Contact and Credits sections open as side-drawers using Next.js parallel and intercepting routes, preserving the user's position on the page while surfacing additional information.

Shareable, URL-Synced Filtering

The project index supports tag-based filtering by category, location, and year. Every filtered state is reflected in the URL, making any view of the portfolio directly shareable with clients or collaborators.

Fully Responsive & Zoom-Resilient

Built mobile-first and validated across phones, tablets, and desktops. Every layout, animation, and interaction was also tested across browser zoom levels (125%, 150%), ensuring the experience holds without layouts breaking.

FROM THE TEAM

"SPEEDBOAT was a technically ambitious project to work on. My focus was on the front-end: getting the infinite scroll, intercepting routes, and animation layers to hold up across every device and screen state required careful, deliberate implementation. The Sanity architecture being well-structured from the start made the front-end work considerably more stable. The result is a site that operates at the level the client's work deserves."

— Shambhavi Sinha, Developer

IN SUMMARY

SPEEDBOAT required a digital platform equal to the rigour of the practice it represents. Every technical decision was made in service of that standard. The outcome is a portfolio site that performs with the same precision the studio applies to the built environment.

We build for those who will not compromise on quality. SPEEDBOAT is exactly that kind of client.

hello false: LIGHT
Last update: 333358
--white-0: #FFFFFF
--black-0: #000000
--grey-0: #f9f9f9
--darkGrey-0: #262626
... +5 more
Change Theme