Web Projects — Case Studies
Selected builds. Real clients. Measurable outcomes.
Abhushan Jewelry
"A luxury, responsive e-commerce experience and appointment scheduler — complete with an administrative manager — for fine gold and permanent bridal jewelry in Ahmedabad."
The Challenge
Abhushan is a fine gold jewelry studio in Ahmedabad. They had no digital presence that matched their in-studio luxury experience. High-value clients were dropping out of the sales funnel due to manual scheduling friction for custom design consultations. They needed a luxury digital showcase combined with a seamless studio booking engine, backed by an admin portal to manage appointments in real time.
My Role & Scope
- Visual identity system (dark cocoa '#000000', gold accent '#EB4604', editorial Garamond & Playfair typography)
- Interactive high-fidelity category grid for gold necklaces, solid gold rings, and custom bridal collections
- 4-service studio appointment booking scheduler (Welded Forever Bracelet, Custom Engagement, Bridal Consultation, Jewelry Refurbishing)
- Dynamic time-slot selector and real-time slot validation
- SEO infrastructure (Schema.org: LocalBusiness, Product, FAQPage)
- Core Web Vitals optimization (compressed WebP, font preloading)
- Full admin dashboard: credentials login wall, metrics dashboard (Total, Pending, Approved, Completed, Cancelled), search/filter by customer/service, WhatsApp confirmation triggers, and CSV export
- Live deployment on Vercel Edge network
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Luxury Showcase | Editorial masonry grid and interactive showcase | Flexbox grid, hover zoom scaling, CSS transitions |
| Studio Appointment Engine | Real-time scheduling form for in-person jewelry design | Date/time inputs, service picker, client-side validation |
| Admin Metrics Grid | Live KPIs: Total, Pending, Approved, Completed, Cancelled | 5-column responsive card counters with status color coding |
| Search & Filter Toolbar | Customer name/phone search + service type dropdown filter | Client-side JS filter array, live DOM rendering |
| WhatsApp Integration | Instant WhatsApp trigger pre-filled with customer details | Dynamic WA API template link triggers |
| Credentials Access Gate | Secure login gate protecting client booking data | sessionStorage validation, password verification, error popups |
| Performance & SEO | PageSpeed optimizations and schema markup | LocalBusiness JSON-LD, image preloading, lazy loading |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Editorial Branding & Navbar
Clean editorial branding featuring Playfair Display and Cormorant Garamond typography on a warm dark cocoa background.
High-Fidelity Collections Grid
Hover-scalable gold jewelry cards, displaying pricing and designs across customized masonry layouts.
Studio Appointment Scheduler
Interactive booking card with dynamic service selections and date/time selector slot confirmation.
Metrics Dashboard
Live KPI card indicators tracking Total, Pending, Approved, Completed, and Cancelled appointments.
Search & Filter Toolbar
Instant array search for client details, alongside service-type filtering dropdown to parse schedules.
Appointments Database Table
Management list featuring customer data, status indicators, status update dropdowns, and WhatsApp direct trigger buttons.
Results & Learnings
"Delivered a unified digital showcase and booking ecosystem in 4 days. The custom appointment engine and admin dashboard streamlined the studio's scheduling process, removing manual friction and allowing coordinators to confirm sessions via WhatsApp with a single click. Implementing local business schema and optimizing image assets significantly improved organic local search ranking and PageSpeed scores."
Detailing Cars
"A premium, mobile-first auto detailing booking platform — complete with a live admin dashboard — designed to streamline vehicle care scheduling in Ahmedabad."
The Challenge
Detailing Cars is a premium mobile automotive styling studio in Ahmedabad, offering ceramic coating, paint correction, and full interior detailing. The business was losing potential bookings due to a manual, non-responsive pricing sheet and no digital presence. They needed a complete online system — a high-conversion landing page with instant pricing, plus an admin dashboard to manage and track every booking in real time.
My Role & Scope
- Full visual identity system (dark mode, gold/warm-cream palette, geometric typography)
- Interactive paint-restoration before/after slider
- 3-tier vehicle class dynamic pricing engine (Hatchback / Sedan / SUV)
- Floating capsule navbar with services dropdown & seasonal offer bar
- SEO infrastructure (Schema.org: Service, AutomotiveBusiness)
- Core Web Vitals optimization (compressed WebP, font preloading)
- Full admin dashboard: metrics grid, bookings table, calendar view, weekly chart, filter & export
- Password-protected admin login with toast notifications
- Edge caching deployment on Vercel
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Before/After Slider | Interactive paint-restoration swipe preview | CSS clip-path transition, touch-friendly drag triggers |
| Vehicle Class Selector | 3-tier pricing matrix — Hatchback, Sedan, SUV | Vanilla JS object model, instant UI updates |
| Scheduling Engine | Date/time reservation flow with add-on selections | Form validation, localStorage caching |
| Admin Metrics Grid | Live KPIs: Total Bookings, Pending, Confirmed, Completed, Revenue | 5-column responsive cards with accent color status indicators |
| Bookings Table | Customer info, vehicle tag, service tag, status badge, WhatsApp link, action controls | Filter tabs, search bar, CSV export button |
| Calendar View | Monthly grid with appointment chips — toggle between list and calendar | Dynamic DOM rendering, today highlight, month navigation |
| Weekly Bar Chart | Booking volume trend for the past 7 days | Pure CSS animated bar chart, responsive flex layout |
| Password-Protected Login | Admin access gate with credential validation | sessionStorage auth, toast notifications on login/logout |
| Performance | Core Web Vitals optimization | Lazy-loaded images, preloaded hero asset, critical CSS injection |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Offer Bar + Floating Navbar
Seasonal promo strip + a floating capsule nav with services dropdown and a direct call button.
Booking Scheduler
Mobile-optimized form with date/time picker, add-on selections, and vehicle details — built to convert.
Metrics Grid
5-panel KPI strip: Total Bookings, Pending, Confirmed, Completed, Revenue — live from booking data.
Weekly Bar Chart
Pure CSS animated bar chart showing booking volume per day. Hover to reveal daily counts.
Bookings Table + Filters
Filter by status, search by name, update status, WhatsApp direct-link per customer, CSV export.
Results & Learnings
"Delivered a full-stack web presence in 3 days — a high-conversion landing page and a complete booking management system. The admin dashboard lets the studio track every appointment, update statuses, reach clients via WhatsApp in one click, and view their week at a glance. Overcoming performance bottlenecks with high-resolution vehicle imagery reinforced the value of WebP compression, lazy loading, and Vercel's edge network."
KXM Fashion
"A high-concept, minimalist editorial fashion storefront — featuring a custom dynamic cart drawer and fluid horizontal lookbooks — designed to present a refined clothing line with intention and freedom."
The Challenge
KXM is an editorial, culture-driven clothing brand. Standard grid-based e-commerce layouts failed to reflect their message of intention and quiet luxury. They needed a digital experience that felt like a high-end editorial magazine, combining large typographic statements and seamless infinite horizontal carousels with a fast, responsive slide-out shopping bag and local storage cart persistence.
My Role & Scope
- Custom font architecture implementing PP Neue Montreal for UI elements and PP Editorial New for large editorial statements
- Infinite horizontal product marquee track controlled by clean, hardware-accelerated CSS animations
- Interactive hover transitions on products showing alternate angles and garment drape styles
- Dynamic slide-out shopping cart drawer showing live item updates and subtotal calculations
- E-commerce state management using browser localStorage/sessionStorage APIs to persist shopping bag choices
- Full-bleed lifestyle lookbook modules and responsive layouts optimized across mobile and desktop devices
- Core Web Vitals tuning: responsive asset loading, font preloading, and high-performance layout rendering
- Live deployment and configuration on Vercel's global edge network
Key Features
| Feature | Description | Technical Note |
|---|---|---|
| Editorial Typography | Aesthetic font pairing of PP Neue Montreal and PP Editorial New serif styles | @font-face loading, fluid line heights, high-contrast layouts |
| Infinite Product Marquee | Smooth, horizontal scrolling featured products track | CSS keyframe transform loop with seamless coordinate wrap |
| Garment State Hover | Alternate product display on mouseover showing details/styling | Dual absolute image tags, CSS opacity and scale transitions |
| Dynamic Cart Drawer | Slide-out bag for items list, quantity updates, and pricing updates | Vanilla JS DOM events, event listeners, dynamic subtotals |
| Manifesto Layout | Brutalist full-width quotes and vertical content sections | CSS grid, clamp text values, responsive spacing |
| State Persistence | E-commerce checkout data persists across page sessions | localStorage parsing, stringified cart states |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Minimalist Header & Navigation
Fixed top navbar featuring custom editorial serif headings, two-line menu toggle, and an interactive shopping cart bag count indicator.
Infinite Horizontal Product Marquee
Hardware-accelerated scrolling tracks displaying product cards with interactive model details changing state on hover.
Editorial Brand Manifesto
Bold editorial brand statement ("More Than Just Fashion") utilizing Instrument Serif typography layouts to present brand philosophy.
Results & Learnings
"Created a stunning digital presence for KXM in 3 days. By prioritizing custom editorial typography and rich aesthetic transitions like the CSS infinite product marquee, we crafted an immersive visual store experience. Implementing client-side cart logic in vanilla JS and deploying on Vercel Edge ensured instant response times and seamless UX without external dependencies."