A fast, static, multi-page website for a Trichy builder, in a hand-made “Site Work” look: concrete textures, safety-yellow and bold type. It has a cost estimator, a scroll-driven 3D story of a building going up, a two-minute About video made entirely in code, and a Supabase-backed admin for enquiries and content.
- 0
- technologies
- 0
- shipped features
- 0
- screens
- 0
- decisions logged
Repository is private — source kept secured
6 sections below
Suganniya Construction builds houses, apartments and commercial buildings across Tamil Nadu from a head office in Trichy. The website has fourteen plain HTML pages: services, projects with a service-area map, a seven-stage build process, pricing, reviews, building guides, careers and contact. Every icon, floor plan and the map itself is drawn in code (js/art.js), so the site does not depend on stock illustration.
How it works: the pages are static HTML, CSS and vanilla JavaScript, so they load instantly and need no framework. Content (company details, projects, reviews, gallery, accent colour, homepage figures) comes from js/data.js. When Supabase is connected, it comes from the database instead. A build script bundles the Supabase browser client and writes the sitemap, robots.txt and canonical URLs. Vercel serves the folder plus two serverless functions, one for content and one for enquiries.
Enquiries go through a validated, write-only Postgres function with per-phone throttling. The public can submit a request but can never read one back. Row-level security protects customer records, and admin access needs an explicit row in sc_admins, not just a signed-in account. The admin panel lists, searches, filters and exports requests as CSV, with one-tap call or WhatsApp. It also edits business details, the accent colour (with a contrast check), the homepage banner, projects, gallery photos and reviews. Without Supabase on localhost, it runs in a browser-only preview mode.
“Watch a complex go up” (build.html) is a scroll-driven Three.js scene of a G+4 apartment block over 24 months: pen sketch, blueprint, excavation, the frame, a services x-ray, plaster and paint, a section through the furnished flats, then a dusk handover. It is modelled entirely in code, with photo-scanned textures and HDR skies.
The About-page video is generated, not edited. A script.json holds the narration, an HTML composition animates every scene in the site's style, the music and sound effects are synthesised in Python, Indian English neural voices read the voiceover, and build.py renders the MP4, its poster and the chapter list on the page. When the phone number or photos change, it is rebuilt with one command.
Status: the site is a working preview. Projects, figures, team and reviews are sample content, flagged with an on-page notice until the business supplies verified details.
Content
Company details, projects, reviews and gallery live in js/data.js, or in Supabase once it is connected.
js/data.js · Supabase
Build
npm run build bundles the 3D story and the Supabase client, then writes the sitemap, robots.txt and canonical URLs.
esbuild · scripts/build.js
Serve
Vercel serves fourteen static pages straight from public/. Nothing renders on the server.
Vercel static
Enquire
Forms post to a serverless function that calls a write-only, throttled Postgres RPC. The public can never read requests back.
api/enquiry.js · RLS
Manage
The owner signs in at /admin.html to handle requests and edit content, colours and photos. RLS checks sc_admins on every write.
Supabase Auth · Storage
- 14 static pages that load instantly: no framework, no hydration, no layout shift
- Cost estimator with Basic / Standard / Premium packages and a stage-wise payment schedule
- Scroll-driven 3D build story in Three.js: sketch → blueprint → foundation → frame → interiors → dusk handover
- Two-minute About video built from code: narration script, animated composition, synthesised sound, neural voiceover
- Admin panel: enquiries with search, status, CSV export and call/WhatsApp, plus content, colour and banner editing
- Write-only enquiry RPC with per-phone throttling; row-level security on every table
- Projects map of central Tamil Nadu and per-project pages with floor plan, timeline and quality record
- Browser QA script checks all 14 pages at desktop and mobile widths, including backend failure paths
The section above says what this does. This one says why it is built the way it is — including the parts that did not come free.
- Static multi-page HTML with vanilla JavaScriptoverReact / Next.js appWordPress themeBecause
Every page is just a file, so first paint is immediate, hosting is free and nothing breaks when a dependency updates. Shared header, footer and cards come from one small site.js.
What it costNo component system, so shared markup is generated by script, and the 3D page needs its own esbuild bundle.
- A Three.js scene modelled in code and scrubbed by scrolloverPre-rendered videoStatic stage photosBecause
The visitor controls the pace, every stage is the same building, and the camera can cut a section through the finished flats, which no photo can do.
What it costHeavy on low-end GPUs. Assets need care (compressed textures, glTF props), and the page ships a separate bundle.
- A validated, write-only Postgres RPC behind RLSoverDirect insert into the table from the browserThird-party form serviceBecause
The browser can call exactly one function that checks the input and throttles per phone number. It has no read path at all, so a leaked key reveals nothing.
What it costCAPTCHA and broader abuse limits are still needed before running paid advertising.
- Generate it from code: script → composition → synthesised sound → neural voice → ffmpegoverEdit it by hand in a video editorBecause
One command rebuilds it. The voiceover never reads the phone number aloud, so new details need no new recordings, and cached voice clips keep rebuilds to about six minutes.
What it costA Python, ffmpeg and Playwright toolchain just to make one video.
01 / 18Home
open full size ↗Every page of the design on one canvas — zoom and pan to explore.
Seen enough?
There are more where this came from — or skip the browsing and just say hello.