Seclusion of Sage
A commercial interior styling and space rental studio website, built solo end-to-end — from client communication to design and development.
Screenshots
About This Project
Seclusion of Sage（棲仙）is a commercial interior styling studio offering soft furnishing design, space rental, and workshops. The website serves as a portfolio showcase and a service hub for prospective clients.
This was a solo end-to-end project — I handled client communication, requirements gathering, visual design, and full-stack development with no designer or PM involved. The project is structured as a monorepo with two independent packages: a Next.js frontend (web/) and a Sanity Studio CMS (sanity/), so the client can manage all content independently without touching code.
Features
- Homepage carousel — full-screen image slideshow powered by Swiper
- Work portfolio — dynamic gallery with individual project pages and lightbox image viewer
- News & blog — paginated article listing with category filtering
- Studio gallery — custom justified layout algorithm for an organic photo grid, with separate desktop and mobile handling
- Service, Profile, and Contact pages — covering interior styling services, space rental, and workshop offerings
Architecture
Content is entirely CMS-driven via Sanity v4. Pages are built as Next.js Server Components using GROQ queries, with ISR (Incremental Static Regeneration) at a 60-second revalidation interval for fast delivery without sacrificing freshness.
Rich text content is rendered via @portabletext/react, and all CMS images are served through @sanity/image-url for on-the-fly resizing and optimisation.
Design
Typography combines Noto Serif TC for Chinese text with a custom Perpetua serif for Latin headings. The layout is fully responsive using Tailwind CSS v4 breakpoints, with CSS custom properties managing key spacing values.