Architecture Firm Portfolio Website Template

Quick summary

Atrium is a desktop-first horizontal scroll landing page for a hospitality architecture practice. It moves visitors through the portfolio like a walk through a single grand hotel. Gold linework, deep obsidian backgrounds, and hover-reveal photography create editorial weight. The primary goal is converting boutique hotel developers, resort groups, and restaurateurs into qualified leads.

Who this template is for

This template is built for architecture practices whose work lives in the hospitality sector. It speaks directly to firms that shape lobby thresholds, restaurant ceiling heights, and resort corridors, and need a digital presence that communicates spatial intelligence before a first meeting.

• Boutique hotel developers scouting a flagship architect for a new property
• Resort groups expanding into new markets who need a practice with proven hospitality credentials
• Restaurateurs who understand that the room is part of the dining experience

What problem this template solves

Most architecture portfolios feel like image galleries. They show finished photographs but communicate nothing about spatial thinking, material reasoning, or the process that turns a site brief into a guest experience. That gap costs practices the right clients.

• Visitors scroll past work without understanding the design intelligence behind it
• Generic portfolio pages cannot signal the difference between a commodity firm and a hospitality specialist
• High-value developers need proof of spatial imagination before they will commit to a conversation

What you get with this template

You get a fully structured single-page layout built around horizontal scroll navigation. Every section is a purposeful panel in a sequential visual story, from a hand-drawn hero illustration to a minimal slide-in contact form.

• An SVG axonometric hotel illustration with cursor parallax as the hero visual
• A horizontal portfolio walk with hover-dissolve transitions from elevation drawings to finished interior photography
• A slide-in contact panel with a multi-step form asking project type, location, and a freeform site brief field

Feature list

This template delivers six interconnected features that together make the page feel like a spatial experience rather than a brochure.

Hand-Drawn Axonometric Hero Illustration

The header is a fine gold linework cutaway of a grand hotel rendered on an obsidian ground. Tiny figures populate rooms, terraces, and pools. The illustration responds to cursor movement with a subtle parallax effect, making light appear to pool in the atrium as the visitor explores.

Horizontal Scroll with Snap Panels

The page advances horizontally through distinct scroll-stop panels. Each stop functions like a room in a single impossible hotel that contains every project. Scroll snapping keeps the experience controlled and cinematic rather than frantic.

Hover-Dissolve Portfolio Transitions

Hovering on a doorway or facade within the portfolio walk dissolves the elevation drawing into a finished interior photograph. The transition communicates the practice's ability to move from concept to completed space in a single gesture.

Drag-to-Swatch Material Interactions

Visitors can drag across a facade panel to swatch different materials in real time. The interaction demonstrates material reasoning and invites curiosity rather than demanding attention.

Guest-Flow Floorplan Animation

Pausing on a floorplan triggers animated gold paths that trace guest movement through the space. The animation makes spatial strategy visible and legible to non-architect clients.

Slide-In Lead Generation Contact Panel

The primary call to action, labeled "Start a Conversation," opens a minimal contact panel that slides in from the right edge without interrupting the horizontal flow. It collects project type, location, and a single open field for site context. A secondary path offers a forty-page downloadable portfolio in exchange for an email address.

Page sections overview

Design & branding system

The visual identity follows an editorial magazine theme. Every color and typographic decision reinforces the feeling of a design monograph printed on heavyweight stock.

• Color system: deep obsidian black (#0B0B0F) as the primary ground, brushed gold (#C9A84C) for headlines and interactive hotspots, warm parchment (#F0E6D3) for body text panels, and muted charcoal (#2A2A2E) for secondary surfaces
• Typography: Fraunces serif display for headlines and section titles, DM Sans for body copy and interface elements
• The overall tone is black-tie without ostentation, the gold whispers rather than shouts, and the darkness gives every lit element the gravity of a spotlight

Mobile & speed optimization

Atrium is designed desktop-first to protect the integrity of the horizontal scroll experience. A graceful vertical fallback layout is included for mobile visitors so no lead opportunity is lost on smaller screens.

• Animations use GPU-accelerated transforms only, keeping motion smooth without taxing the browser
• Scroll reveals are triggered by IntersectionObserver, so elements animate in only when they enter the viewport
• The vertical mobile fallback reorders panels into a readable stacked layout without stripping the editorial visual identity

How this template helps you convert

Every design decision in Atrium earns the click before asking for it. The page proves spatial imagination first, then surfaces the lead capture.

1. The hero illustration and horizontal scroll experience demonstrate the practice's design intelligence immediately, reducing skepticism before a visitor reaches any call to action.
2. The "Start a Conversation" slide-in panel uses a progressive three-step form, project type, location, and a site brief, so each lead arrives pre-qualified with context a practice actually needs.
3. The "Download the Monograph" secondary path captures email addresses from visitors who are not yet ready to commit, extending the relationship through a forty-page offline portfolio PDF.

Other information about this template

This template is a strong fit for practices building a premium digital presence in the competitive hospitality architecture market. It is equally relevant for interior designers and mixed-use development consultants who operate in adjacent hospitality sectors.

• Template style: horizontal scroll with snap panels, desktop-first layout
• Theme: editorial magazine with spatial gravity and monograph-quality typography
• Creative direction: Interactive Explorer, rewarding curiosity rather than directing attention
• Header concept: custom SVG illustration rather than photography, signaling a distinct design perspective
• Lead generation direction: dual-path conversion, direct contact and downloadable portfolio PDF
• The page is built for English-language audiences with international project locations implied

Show more