Case Study · Full-Stack Web Development

Web
Development

Two production sites. Zero templates. Built entirely in-house — from design token to deployment pipeline — to solve real problems for a design studio and a cultural academy.

Full-Stack · Design + Dev
sivnco.in · svarnart.com
Next.js · Vite · Firebase
2025 — Present
2
Full-Stack Sites Shipped
PWA
Svarnart — Offline-Ready
<2s
Target Load Time
100%
In-House Built
01 — The Sites

Two problems.
Two solutions.

Both sites grew from a simple frustration: no existing tool could present the work at the quality it deserved, or run an art academy at the economics that made sense. So both were built from scratch.

01 — Portfolio Site
sivnco.in
Next.js · Netlify · GSAP · Lenis
Visit Site →
PROBLEM
Needed a portfolio that was cinematic and conversion-focused — not a generic template dump. Existing options were too rigid, looked like every other designer's site, and couldn't support custom scroll animations or the 3D model viewer needed to showcase packaging work.
SOLUTION
Built from scratch in Next.js with a custom design system — dark warm palette, Doto display font, saffron accent — and layered in GSAP scroll-triggered reveals, Lenis smooth scrolling, and an embedded glTF 3D model viewer (model-viewer) for the Jus Amazin packaging render. Every section is hand-coded, from the horizontal scroll "Four Roles" panel to the curtain-reveal footer.
OUTCOMES
Cinematic portfolio that genuinely reflects the quality of the work
Horizontal scroll role cards with GSAP-pinned logic
3D GLB model viewer embedded inline — no third-party iframe
CSP-hardened, mobile-responsive, Netlify CI/CD deployed
Custom saffron cursor dot, ambient orb, and grain texture overlay
02 — Academy Platform
svarnart.com
Vite + React · Firebase · Razorpay · PWA
Visit Site →
PROBLEM
Co-founding Svarnart Academy with my wife meant we also needed a platform that could handle student enrolment, course payments, and content delivery — all without paying SaaS fees that would eat into a bootstrapped education studio. No off-the-shelf LMS fit the brand or budget.
SOLUTION
Designed and built a full Progressive Web App: Vite + React frontend, Firebase Auth + Firestore for student management, Razorpay checkout for Indian payment flows (UPI, cards, net banking), Firebase Storage for media. The PWA manifest and service worker make it installable on mobile — critical for students in low-bandwidth areas who need offline access to lesson materials.
OUTCOMES
Full payment integration — Razorpay checkout with webhook verification
Firebase Auth (Google Sign-In + email/password) for student accounts
PWA — installable on Android/iOS, offline lesson caching
Strict Content Security Policy covering Firebase, Razorpay & GCS origins
Nunito + Sacramento typography to match the academy's warm, classical brand
02 — The Approach

Build as a
craftsperson.

The same discipline that goes into a packaging system goes into a codebase. Every decision is deliberate — from the colour token in the CSS variable to the CSP origin allow-list in the HTTP header.

01 — Design System First
Both sites start from a hand-crafted design system — tokens, type scales, spacing, colour palettes — before a single component is written. This means every pixel is intentional and the codebase stays maintainable even when building alone.
02 — Performance as UX
Font preloading, image optimisation, deferred scripts, and SSG where possible. A slow portfolio or academy site kills trust before a visitor even reads the headline. Sub-2s target load on both properties.
03 — Security by Default
Content Security Policy headers restrict script/style/image origins on every deploy. Svarnart covers Firebase, Razorpay, and GCS in its CSP — no wildcard srcs. sivnco.in enforces meta-level CSP for Netlify. Security is not an afterthought.
03 — The Stack

Tools chosen
with intent.

No framework chasing. Each tool was chosen because it solved a specific problem — Next.js for SEO and static generation on the portfolio, Vite for fast dev cycles on the academy app, Firebase because it eliminates a separate backend while keeping costs near-zero for a bootstrapped studio.

Next.jsVite + ReactFirebase AuthFirestoreFirebase StorageRazorpayGSAPLenisPWA / Service WorkerNetlify CI/CDmodel-viewer (glTF)Content Security PolicyGoogle FontsSSGManifest + registerSW
SIVNCO.
START A PROJECT
ASK SHIV'S AI