Context: Architecture studios require a digital presence that reflects their physical craftsmanship. Most portfolio websites feel flat and lack the spatial depth inherent to architectural design. The challenge was to build a highly performant platform that treats the browser window not just as a screen, but as a physical space.
What was done: I engineered a brutalist-inspired portfolio using Next.js App Router and Tailwind CSS v4. The user journey begins with a custom SVG stroke-animation preloader that sets a premium tone. To break the flat web layout, I implemented a sticky-stacking architecture powered by native CSS scroll-driven animations, creating genuine visual depth (Parallax) while maintaining a flawless 60fps. I also developed an interactive Axonometric study module, allowing users to seamlessly switch between technical diagrams and 3D renders with synchronized hotspot markers.
Results: A world-class digital storefront that elevates the studio's brand. The fluid micro-interactions (like liquid-fill buttons driven by cubic-bezier curves) and optimized Core Web Vitals deliver a luxurious, app-like experience. The platform seamlessly handles complex visual storytelling, bridging the gap between web development and architectural visualization.
