Bauhaus Architecture Portfolio Website Template

Quick summary

Filament is a full-width immersive landing page template for Bauhaus lighting designers and luxury craft studios. It opens with a nine-cell photo mosaic and unfolds as a five-chapter origin story. Every section, from raw material to finished fixture, is built to earn the visitor's trust before guiding them toward the collection catalog or a commission inquiry.

Who this template is for

This template speaks directly to makers and studios whose work demands more than a product grid. It suits businesses where the story behind the object is inseparable from the object itself.

• Interior architects and their clients who specify statement lighting for high-end hospitality and residential projects
• Collectors and set designers seeking limited-run, handcrafted fixtures with a verifiable design philosophy
• Bauhaus-inspired lighting studios and bespoke atelier brands that sell through inquiry and relationship rather than a standard e-commerce checkout

What problem this template solves

Most portfolio templates treat craft work like retail inventory. They show images and prices, but they skip the context that makes someone want the piece. For a lighting atelier working in hand-bent steel and blown glass, that missing context is the entire value proposition.

• Visitors arrive without understanding what separates a bespoke fixture from a manufactured one, so they leave without inquiring
• A static gallery or grid layout cannot communicate the weight of craft, the philosophy of making, or the specificity of the process
• Without a strong narrative arc, potential commissions from interior architects and serious collectors are lost before the first conversation starts

What you get with this template

You get a single-page layout structured as a cinematic experience. The scroll journey moves the visitor through five distinct chapters, each one deepening their understanding of the work before presenting a path to the collection.

• A nine-cell asymmetric photo mosaic header that fills the viewport edge to edge, with desaturated images and spectrally lit fixture details
• Five narrative chapters named Principle, Process, Material, Form, and Light, each separated by an iridescent gradient wipe transition
• Two strategically placed calls to action plus a persistent commission link, all wired to different buyer intents and readiness levels

Feature list

Nine-Cell Photo Mosaic Header

The header is an asymmetric three-by-three grid of tightly cropped fixture photographs. Cells show a pendant from directly below, a wall sconce casting hard shadows on raw concrete, and an extreme macro of a hand-polished brass joint. Images are desaturated except for the light sources, which bleed spectral violet and teal. The mosaic reads as one unified composition with no gutters between cells.

Five-Chapter Origin Story Scroll

The page unfolds as a backward-then-forward narrative. Each chapter, Principle, Process, Material, Form, and Light, escalates from philosophy to physics and from raw stock to finished fixture. GSAP ScrollTrigger powers the chapter reveals, and each transition uses a slow iridescent gradient wipe so the scroll itself feels like turning a page.

Iridescent AI Color System

The palette runs from void black as the dominant ground through liquid chrome for typography, into spectral violet bleeding to holographic teal on hover states. A flash of molten amber is reserved for active elements and call-to-action pulses. The result reads like oil on a wet concrete surface, industrial darkness interrupted by colors that shift and shimmer.

Dual Call-to-Action Architecture

"Explore the Collection" first appears as a subtle chrome-outlined button after the third chapter, then returns as a full-width amber-lit bar at the narrative's end. A secondary path, "Commission a Piece," floats as a persistent minimal link in the top-right corner throughout the scroll. Each placement matches a different stage of buyer readiness.

Parallax Workshop Imagery

The Process chapter uses parallax scrub to reveal workshop imagery in sequence: hands grinding steel, a furnace mouth glowing, technical drawings pinned to concrete walls. The motion gives depth to still photography and makes the manufacturing sequence feel lived-in rather than staged.

Social Proof Statistics Section

The Light chapter opens with animated counters displaying studio credentials: year established, total pieces made, commissions completed, and exhibition credits. The counter animation triggers on scroll entry, drawing attention without interrupting the narrative flow before the final call-to-action bar.

Page sections overview

Design & branding system

The visual identity follows a Bold Brutalist theme executed through an AI Iridescent color system. Typography pairs Fraunces, an editorial serif, for headlines with JetBrains Mono for structural labels, creating a contrast between organic warmth and industrial precision.

• Color palette: void black (#0B0B0E) as the dominant ground, liquid chrome (#C8CDD5) for type and structural lines, spectral violet (#9B5DE5) into holographic teal (#00F5D4) on hover states and gradient accents, and molten amber (#F5A623) for active elements and call-to-action pulses
• Hover states across the mosaic trigger iridescent color bleeding, making static images feel alive without requiring video
• Every iridescent gradient wipe between chapters reinforces the sensation that light itself is physically advancing the story

Mobile & speed optimization

This template is built desktop-first, matching the primary audience of interior architects working on large screens. A mobile-responsive fallback ensures the narrative remains coherent on smaller devices without losing the essential structure.

• Static sections use server components to keep initial load lightweight, while GSAP and canvas-based animations are handled by client components only where interaction requires it
• The horizontal snap-scroll collection carousel and parallax scrub transitions degrade gracefully on mobile, preserving readability across screen sizes

How this template helps you convert

The page is structured to earn the click rather than demand it. By the time a visitor reaches either call-to-action placement, they have traveled through the full philosophy and making process of the studio.

1. The first "Explore the Collection" button appears after the third chapter, catching visitors who are convinced early without interrupting those who need the full story to commit
2. The full-width amber call-to-action bar at the page's end captures visitors who have absorbed the complete narrative arc and are ready to browse the catalog as a body of work rather than a product list
3. The persistent "Commission a Piece" link in the top-right corner gives interior architects and returning collectors a direct path that bypasses the story entirely when they already know what they want

Other information about this template

This template was designed specifically for the Bauhaus Architecture subcategory within the Architecture and Design space. It is suited to studios operating in the luxury craft goods and bespoke lighting design market, particularly those targeting a business-to-business or collector audience through inquiry rather than direct checkout.

• The template style is Full-Width Immersive, meaning all sections are designed to use the full browser width with no boxed containers limiting the visual field
• Animation complexity is high, with GSAP ScrollTrigger controlling chapter reveals, parallax scrub sequences, animated counters, and iridescent gradient wipe transitions throughout
• Localization is set to English (USA) with no currency displayed, reflecting the inquiry-based sales model common to bespoke atelier studios
• The footer follows a horizontal flow pattern, suitable for studio contact details, exhibition links, and navigation to other pages of the main site

Show more