Project · Art Gallery Website
SmitsArtStudio — a digital gallery that feels like a real room
Live gallery
Browse the full SmitsArtStudio site with all current paintings, mockups, and contact details.
SmitsArtStudio is a Next.js art gallery site built to feel like walking through a calm, minimal studio — warm off-white walls, mint accents, and paintings staged inside interior mockups instead of just flat thumbnails.
The site is split into a focused set of pages — home, works, about, locations (India & Vancouver), and contact — with a single scrollable landing page that highlights the four main series: figurative, landscapes, abstract, and prints on demand.
Role
Design, frontend architecture, asset pipeline
Stack
Next.js · TypeScript · Tailwind · container queries
Focus
Visual storytelling & smooth browsing
Status
Frontend live, backend & CMS planned
Gallery first, UI second
Every decision starts from the paintings: generous whitespace, muted UI chrome, and typography that stays out of the way so the colors in the pieces carry the page.
Category-driven layout
Home is a vertical strip of four hero sections — Figurative, Landscape, Abstract, Prints. Each section pulls from the same artwork data model and routes to a filtered works grid.
Two cities, one studio
Location content splits between India and Vancouver. The layout uses the same component shell but swaps copy, images, and map embeds while keeping the brand consistent.
Artwork data & file organisation
Behind the soft visuals is a rigid structure. Each piece has a single source of truth — title, size, price, series, and media — defined in TypeScript, then mapped to a folder in public/artworks/<slug>/.
Every folder can include a full painting, an interior mockup, and a looping texture video. The works page pulls from that manifest so adding a new painting is just: drop files in the right folder, add one object to the array.
- • Consistent naming keeps imports simple and type-safe.
- • Assets are heavy now (>1GB) but structured for later compression & CDN.
- • Layout uses container queries so grids adapt cleanly from phone to 4K without special cases.
export type ArtworkSeries = "figurative" | "landscape" | "abstract" | "prints";
export interface Artwork {
slug: string; // "mist-over-darjeeling"
title: string;
series: ArtworkSeries;
size: string; // "24" × 18""
medium: string; // "Acrylic on canvas"
price?: string; // optional, hides if not for sale
year?: number;
}
export const artworks: Artwork[] = [
{
slug: "mist-over-darjeeling",
title: "Mist over Darjeeling",
series: "landscape",
size: "24" × 18"",
medium: "Acrylic on canvas",
year: 2024,
},
// …
];Browsing experience
The goal was to avoid the “e-commerce grid of thumbnails” feeling. Instead, each section on the homepage reads like a wall in a gallery: one hero mockup, a short curatorial blurb, and a single CTA into the works page.
Transitions are simple but deliberate — gentle parallax on mockups, hover lifts on paintings, and subtle color shifts in the beige / mint palette so everything feels tactile without being noisy.
