Lumina Architecture

The Vision

Lumina is a Concept Case Study exploring the intersection of brutalist architecture and digital performance.

Conceived as the digital headquarters for a studio operating across Berlin, Zurich, and Tokyo, the design mirrors a strict architectural philosophy: Material honesty and structural clarity.

Most architecture portfolios are cluttered. For Lumina, the goal was to strip away the noise. The website acts as a silent backdrop that lets the buildings speak for themselves—strictly monochromatic, precise, and highly interactive.

What We Built

This isn't just a template; it's a technical showcase of what Framer can do when combined with custom React code.

1. Custom React Localization Engine

Standard translation overlays often feel clunky or require page reloads. For Lumina, I engineered a custom code component that handles the English/German switch instantly.

The Tech: By managing the language state within React, the text nodes update immediately without refreshing the browser. This preserves the smooth "Single Page Application" (SPA) feel while serving international clients seamlessly.

2. "Interaction-First" Color Logic

The site is strictly black and white by default. Color is treated as a reward for interaction.

The Hover Effect: I implemented a custom state for the project gallery (showing the Villa Aurea or The Concrete Loft). When a user hovers over one of the four project cards, the image desaturates into full color and subtly scales up. This guides the user's focus naturally without overwhelming them.

3. Editorial "Highlighter" Aesthetics

To break the strict monochrome grid, I used a bold, digital yellow (#FFBF00) as the sole accent color. This appears in the navigation and, most notably, in the custom text selection. When a user highlights text on the site, it mimics a physical architectural marker pen, bridging the gap between digital and analog design.

4. The Grid System

The layout follows a rigid architectural grid. Whether on desktop or mobile, the structure remains absolute. This "Neobrutalist" approach—using heavy lines and clear typography—signals stability and trust, essential values for an architecture firm.

The Result

Lumina is a proof of concept that simplicity requires precision. It demonstrates that a one-page site can feel like a complete immersive experience when the details—like localization and micro-interactions—are executed with code-level control.

"Architecture is the learned game, correct and magnificent, of forms assembled in the light." — Le Corbusier (Inspiration for the design)

Need a portfolio that balances design and technical performance?

I build custom solutions that go beyond standard builders. Let's build your structure.