Studio Forma – Interior Architecture

A website for an interior design studio featuring a minimalist editorial aesthetic, dynamic service pages, and animations inspired by interior architecture.

Next.jsTypeScriptCSS AnimationsResponsive DesignUI/UX Design
https://studio-forma.vercel.app/
Studio Forma – Interior Architecture — long website preview

About the project

A comprehensive website for Studio Forma, designed in a timeless, understated style with a warm cream background, olive accents, and typography combining Cormorant Garamond with Jost.

⏱ Timeline: 2–3 weeks

What I worked on

  • ✓UX/UI design in a minimalist editorial style
  • ✓Development with Next.js 14 + TypeScript
  • ✓Dynamic service page system generated from a single data source
  • ✓Expandable service navigation in the header and footer
  • ✓Interior architecture-inspired scroll reveal animations (blinds, architectural blueprint effects)
  • ✓Consultation booking modal powered by React Portal (createPortal)
  • ✓Fully responsive, mobile-first implementation
  • ✓Deployment on Vercel with automatic GitHub CI/CD

Results

  • ↗Consistent visual identity across every page
  • ↗Scalable service architecture — adding a new service requires only a single data entry, not a new page
  • ↗Custom animations inspired by interior architecture (process line, blueprint corners, window blinds)
  • ↗Fast loading through static generation of service pages

Challenges and solutions

Challenge

Six different services required separate pages without duplicating code.

Solution

A single dynamic [slug] template reads data from a centralized services.ts file, allowing new services to be added by extending the data array instead of creating new pages.

Challenge

The consultation modal rendered incorrectly inside animated containers.

Solution

The modal was moved to document.body using React Portal, making it independent of parent CSS transforms.

Challenge

Animations needed to reflect the interior design industry instead of relying on generic fade-in effects.

Solution

Custom animations were created, including unfolding blinds on service cards, a hand-drawn process line, and blueprint-inspired corner decorations.

Key project decisions

  • →Next.js 14 App Router with generateStaticParams for static service pages
  • →CSS transitions instead of JavaScript setTimeout for smoother footer animations
  • →Cormorant Garamond as the display font for an elegant editorial feel
  • →A warm cream background paired with olive accents to create a timeless visual identity
  • →Service data separated from presentation (services.ts) for easier scalability

Integrations

Consultation booking modal powered by React PortalFooter newsletter form with local state managementExpandable service navigation (desktop dropdown + mobile accordion)IntersectionObserver-powered scroll reveal animations across all sectionsAutomatic deployment pipeline with Vercel and GitHub