Architecture & Design Portfolio
Terravane Studio
The Challenge
Defining the problem
Architecture studios occupy a unique tension between art and engineering — their digital presence must communicate creative daring while instilling the confidence that comes with technical precision. For this concept demo, I designed a portfolio for a fictional Pacific Northwest studio that feels as tactile and considered as real built work: warm materials, deliberate pacing, and an emotional throughline connecting forest-framed residences to urban commercial renovations. The core challenge was designing an experience rooted in earth tones, natural textures, and unhurried storytelling — without sacrificing the structured navigation and clear calls-to-action that convert visitors into consultation bookings.
The Approach
Crafting the solution
I built the demo on Next.js App Router with an earth-tone design system rooted in six semantic color tokens (umber, sage, copper, stone, parchment, mist) and the Cormorant typeface for an editorial, monograph-like feel. The homepage opens with a full-bleed hero and a floating frosted-glass panel that scrolls naturally over the pinned photograph, creating depth without parallax fatigue. Alternating dark and light sections establish cinematic rhythm as visitors move through a horizontal-scroll project carousel, an animated filtering grid, and a multi-step consultation form with radio-group semantics and real-time validation. Framer Motion drives entrance animations, layout transitions, and accordion reveals — all respecting prefers-reduced-motion — while five static components were converted to server components via a shared FadeInView wrapper, cutting client-side JavaScript significantly.