Studio Forma – Architektura Wnętrz

Strona internetowa dla pracowni projektowania wnętrz. Minimalistyczny, edytorialny design z dynamicznymi podstronami usług i animacjami nawiązującymi do designu wnętrz.

Next.jsTypeScriptCSS AnimationsResponsive DesignUI/UX Design
https://studio-forma.vercel.app/
Studio Forma – Architektura Wnętrz — długi zrzut strony

O projekcie

Kompleksowa strona dla pracowni architektury wnętrz Studio Forma, zaprojektowana w stonowanej, ponadczasowej stylistyce — kremowe tło, oliwkowy akcent i typografia łącząca Cormorant Garamond z Jost.

⏱ Czas realizacji: 2–3 tygodnie

Co zrobiłam w projekcie

  • ✓Projekt UX/UI w stylu minimalistyczno-edytorialnym
  • ✓Kodowanie w Next.js 14 + TypeScript
  • ✓Dynamiczny system podstron usług generowany z jednego pliku danych
  • ✓Rozwijane menu usług w navbarze i stopce
  • ✓Animacje scroll-reveal nawiązujące do designu wnętrz (żaluzje, plan architektoniczny)
  • ✓Modal konsultacji z portalem React (createPortal)
  • ✓Pełna responsywność mobile-first
  • ✓Wdrożenie na Vercel z automatycznym deployem z GitHub

Efekt

  • ↗Spójna identyfikacja wizualna pracowni na wszystkich podstronach
  • ↗Skalowalna struktura usług — nowa usługa to jeden wpis w danych, nie nowy plik
  • ↗Animacje nawiązujące tematycznie do architektury wnętrz (linia procesu, narożniki planu, żaluzje)
  • ↗Szybkie ładowanie dzięki statycznemu generowaniu podstron usług

Wyzwania i rozwiązania

Wyzwanie

Sześć różnych usług wymagało osobnych podstron bez duplikowania kodu.

Rozwiązanie

Jeden dynamiczny szablon [slug] czytający dane z centralnego pliku services.ts — dodanie usługi to wpis do tablicy, nie nowa strona.

Wyzwanie

Modal konsultacji renderował się nieprawidłowo wewnątrz animowanych kontenerów.

Rozwiązanie

Przeniesienie modala przez React Portal bezpośrednio do document.body, niezależnie od transformów CSS przodków.

Wyzwanie

Animacje musiały pasować tematycznie do branży, a nie być generycznym fade-in.

Rozwiązanie

Zaprojektowanie autorskich efektów — rozwijana żaluzja na kartach usług, rysująca się linia procesu, narożniki jak na planie architektonicznym.

Kluczowe decyzje projektowe

  • →Next.js 14 App Router z generateStaticParams dla stron usług
  • →CSS transitions zamiast JS setTimeout dla płynniejszych animacji stopki
  • →Cormorant Garamond jako font display — elegancki, edytorialny charakter
  • →Kremowe tło + oliwkowy akcent = ciepła, ponadczasowa identyfikacja
  • →Dane usług oddzielone od widoku (services.ts) dla łatwej rozbudowy

Integracje i połączenia

Modal konsultacji przez React PortalNewsletter w stopce z lokalnym stanem formularzaRozwijane menu usług (dropdown + mobile accordion)IntersectionObserver do scroll-reveal na każdej sekcjiAutomatyczny CI/CD przez Vercel + GitHub