Abhishek’s Portfolio Open to work

Case study 06 · Website

Construction & Interior Design Firmwebsite

An editorial site for a Delhi design-build studio: an animated 3D-floorplan hero, a portfolio filtered by type and a room you can re-dress in four palettes.

Live site · buildwithsnc.comFull project showcase on GitHubRequest the case study (PDF)
Status
Live at buildwithsnc.com, 30 pages (6 Nov 2026)
My role
Designed and delivered, AI-assisted: I gathered the brief, shaped the content structure and made the product calls, directed AI coding tools, tested every change and put it live
Built with
HTML5 · modern CSS with design tokens · vanilla JavaScript · JSON-driven project and article data · scroll-driven animation
Home page hero: a 3D cutaway of a furnished floor plan under the line “Life is too short for ordinary spaces”
FIG. 01The 3D-floorplan hero: an animated cutaway of a home, with the studio’s line set in serif over it. Sep 2026 demo build; “abBytes” (my GitHub handle) stands in for the studio’s name.

01 · In short: A website with the finish of its homes.

SNC is a South Delhi construction and interiors studio. The brief: dark, editorial and gold-accented, closer to a magazine than a template; a page for every project, with the whole set filterable by type; and an enquiry form that tells the studio what each visitor is asking about.

02 · What it does

The site, page by page.

  • Home

    An animated 3D-cutaway hero, the studio’s four “registers”, and the story from plot to keys.

  • Interiors

    Design and build from one studio: pick a mood, see the design before it’s built, the studio’s execution habits, a cost configurator by tier and area, and material registers.

  • Construction & Collaboration

    The ground-up build and plot-collaboration offer.

  • Projects

    17 project pages covering 14 projects, filterable by construction, interior, commercial or for sale.

  • Blog

    5 long-form articles (reading a builder floor, Italian marble in Delhi homes, plot collaboration…).

  • Contact

    An enquiry form that tags each message as one of 5 types.

03 · What makes it different: Six features, one finish.

  1. 3D-floorplan hero. An animated, scroll-driven cutaway of a home opens the site before any sales copy.
  2. Filterable portfolio. Filter by construction, interior, commercial or for sale; every project opens its own page with notes, specifications and related homes, and most add a walkthrough video, a 3D isometric plan and an area schedule.
  3. Live palette configurator. Tap a theme and the same room re-dresses in place: The Pale, The Walnut, The Saffron or The Carmine.
  4. Two services, two pages. Interiors and Construction & Collaboration each get a page and a story of their own.
  5. Long-form journal. Articles on reading a builder floor, Italian marble in Delhi homes and plot collaboration.
  6. Self-sorting enquiries. The contact form tags each enquiry as one of five types and emails it to the studio.

04 · What the business can configure: What changes without a redesign.

Projects
Project data is JSON-driven, so a new project page uses the same template (hero, notes, specifications, related homes) and joins the filterable index.
Articles
Blog articles are JSON-driven in the same way.
Portfolio filters
Construction, interior, commercial and for sale.
Palette themes
The Pale, The Walnut, The Saffron and The Carmine.
Enquiry types
Five, chosen with “What brings you here?”.

It’s a static site with no framework or page builder, so these are edits to the site’s data files rather than a CMS.

05 · Key screens

Screens are from a demo build captured in Sep 2026: “abBytes” (my GitHub handle, not a company) stands in for the studio’s name.

01First impression

The 3D-floorplan hero on a phone
FIG. 02The same hero on a phone.
Interiors page on a phone: “Your home, designed and built by one studio”
FIG. 03Interiors on a phone: one studio, one contract.
Close-up of the 3D cutaway floor plan: furnished rooms and a staircase seen from above
FIG. 04The 3D floor plan up close: rooms, furniture and stair on a blueprint grid.

02The portfolio

Projects index with type filters above a featured multi-storey home
FIG. 05Projects index: a filter bar by type; the studio’s track-record line is masked.
Project page hero for The Carved House: a modern multi-storey home at dusk
FIG. 06The Carved House: one of 17 project pages (Oct 2026).
Projects index on a phone with filter chips and a project card
FIG. 07The same index on a phone.

03Pick a mood

Palette configurator showing a living room in The Pale theme with chips for the other themes
FIG. 08Palette configurator: “The Pale” selected; each chip swaps the room.
The palette configurator on a phone with theme chips
FIG. 09The same configurator on a phone.

04Start the conversation

Contact page enquiry form with a “What brings you here?” field
FIG. 10Contact: “What brings you here?” sorts each enquiry into one of 5 types.

05Page heroes

Dusk render of a multi-storey home from the Construction page
FIG. 11Construction & Collaboration page hero image (detail), Sep 2026 capture.
Living room render from the Interiors page
FIG. 12Interiors page hero image (detail).

06 · What’s live, dated

By the numbers: what shipped, not traffic.

  • 30

    pages on the live site

    6 Nov 2026

  • 17

    project pages, covering 14 projects

    Oct 2026

  • 5

    long-form articles

    Oct 2026

  • 5

    enquiry types the contact form tags

    Oct 2026

Not claimed

Counted on the live site. No visitor or sales figures are claimed.

07 · How it was built

  1. RoleGathered the brief, shaped the content structure and made the product calls; directed AI coding tools, tested every change and put it live
  2. MethodAI-assisted build
  3. StatusLive, 30 pages (6 Nov 2026); screens captured Sep 2026

StackHTML5 · modern CSS with design tokens · vanilla JavaScript · JSON-driven content · IntersectionObserver + scroll-driven animation