Modernist Architecture Professional Website Template

Quick summary

Terrain is a single-page horizontal scroll template for a modernist landscape design practice. It opens with a nine-tile photo mosaic, walks visitors through five full-viewport projects, and closes on an under-construction frame that invites inquiry. Every design decision favors restraint, precision, and the quiet authority of work that speaks for itself.

Who this template is for

This template is built for landscape design studios that position outdoor space as architecture. It suits practices where the portfolio is the most powerful sales tool and the clients already have high expectations.

• Luxury landscape architects showcasing completed residential and commercial projects
• Architects and boutique developers who need an exterior design collaborator with a shared visual language
• Design-led studios targeting owners of new-build contemporary homes

What problem this template solves

Most portfolio pages overwhelm visitors with grids, testimonials, and process diagrams before the work gets a chance to speak. Terrain removes that noise entirely.

• Visitors bounce before forming a real impression of quality because the layout dilutes the work
• Conventional vertical scrolling treats every project the same, giving none of them room to breathe
• Generic portfolio templates lack the spatial pacing that luxury design clients expect

What you get with this template

You get a fully structured horizontal scroll landing page that guides visitors through your portfolio the way a curated gallery guides a collector. Every section is purposeful and production-ready.

• A nine-image asymmetric photo mosaic header that creates curiosity before a single project is revealed
• Five full-viewport project frames with a hero image on the left two-thirds and a short caption with material list on the right third
• Interstitial detail panels between projects showing joint patterns, planting palettes, and lighting diagrams
• A final under-construction frame that positions the practice as actively in demand
• A fixed gold-text "Explore a Consultation" button pinned to the bottom-right corner with scroll-linked opacity progression
• A case study overlay triggered by tapping any project image

Feature list

This section outlines the core capabilities built into the template.

Horizontal Gallery Walk Layout

The template scrolls left to right through five completed projects. Each project occupies the full viewport, giving imagery and detail equal weight without compression or cropping.

Asymmetric Photo Mosaic Header

Nine square tiles arranged in an irregular three-by-three grid open the page. Each tile shows a tightly cropped material detail, creating gallery-teaser curiosity before the full project walk begins.

Interstitial Detail Panels

Narrow panels sit between each project frame. They display a single focused detail such as a joint pattern, a planting palette, or a lighting diagram, giving the scroll a deliberate breathing rhythm.

Fixed Consultation Call-to-Action

A gold-text button labeled "Explore a Consultation" stays pinned to the bottom-right corner throughout the scroll. Its opacity increases as the visitor progresses, becoming most prominent at the final frame.

Project Case Study Overlay

Tapping any project image opens a full case study overlay. This gives engaged visitors a deeper look without leaving the landing page or breaking the scroll experience.

Under-Construction Final Frame

The last project in the sequence is shown mid-build. Its deliberate incompleteness signals an active, in-demand practice and functions as a natural prompt toward inquiry.

Page sections overview

Design & branding system

The visual identity is built on a Luxe Minimal philosophy. Every surface is controlled so that the single metallic accent carries full weight when it appears.

• Color system uses deep volcanic black (#0B0B0F) as the base, brushed charcoal (#1E1E24) for layering, pale travertine (#EDE8E1) for text, and burnished gold (#C5A258) reserved for hover states, divider lines, and the cursor trail
• Typography pairs Fraunces as the serif display face for project titles and captions with DM Sans for interface labels and navigation
• Animation layer includes horizontal scroll with CSS scroll-snap, Ken Burns motion on project images, a spotlight cursor, a gold cursor trail, and scroll-linked opacity on the fixed call-to-action button

Mobile & speed optimization

The template is designed desktop-first around the horizontal scroll experience. On smaller screens, the layout adapts without losing its editorial quality.

• Mobile devices fall back to a vertical scroll layout, preserving the project sequence and detail panels in a readable single-column format
• GPU-only transforms and intersection observer logic keep animations smooth without taxing device resources
• CSS scroll-snap controls the desktop paging behavior, ensuring clean transitions between project frames

How this template helps you convert

Terrain earns the inquiry by letting the work build trust across every scroll position. No testimonials, no process diagrams, no persuasion techniques beyond the craft itself.

1. The opacity-progressive call-to-action button meets visitors at their moment of peak engagement, when they have already seen the full body of work and are naturally ready to act
2. The case study overlay gives detail-hungry visitors a deeper look without requiring them to navigate away, keeping attention on the studio and moving them closer to a consultation request
3. The under-construction final frame signals an active, selective practice, creating urgency without a countdown timer or promotional language

Other information about this template

This template is a strong fit for studios that prefer the work to carry the full weight of client acquisition. It assumes a curated portfolio of completed projects ready to be presented as full-viewport imagery.

• The template style is classified as Horizontal Scroll with a Luxe Minimal theme
• Creative direction follows the Gallery Walk concept, moving visitors through a sequence of framed moments rather than a browsable grid
• The header concept is the Photo Grid Mosaic, a nine-tile asymmetric arrangement built to create intrigue before the gallery walk begins
• The landing page direction is Click-Through, with the destination being a detailed project inquiry page
• The color system is Obsidian and Gold, a palette suited to luxury architecture and design studio positioning
• The template sits within the Architecture and Design category, specifically aligned with the Modernist Architecture subcategory and the Modernist Landscape Designer niche

Show more