Case Study

Kaavyam

Kaavyam is a café, restaurant and bar in Ravet, Pune. The home page uses an editorial layout: a large headline, a hairline-framed photograph and a smaller overlapping photo, with the opening hours for the café, restaurant and bar set out below. The Events, bar and footer sections switch to a night theme, controlled by a single data attribute.

The site covers the menu, events, reels and gallery, about, catering, careers and contact. The reservation and enquiry forms are validated with react-hook-form and zod and show error and success states. Submission is mocked until a backend is connected.

Accessibility is checked in the test suite. Every route is tested at seven viewport sizes for horizontal overflow and console errors, and axe checks WCAG 2.2 AA on every route, in Chromium and WebKit.

services
Web application
client
Front-end Developer
year
Case Study
design
React 19, Vite 8, TypeScript (strict)
Category
Web Applications
8
Screens
React 19Vite 8TypeScript (strict)Tailwind CSS 4React Router 7GSAP ScrollTriggerLenisFramer MotionVitestPlaywrightaxe

Overview

Concept website for Kaavyam, a café, restaurant and bar in Ravet, Pune, built as a sales sample for the owner. Café by day, restaurant through the evening, and a bar with live music, with the site changing mood to match.
Kaavyam
Built a concept site for a three-in-one venue. The site moves between café, restaurant and bar moods, while the accessibility checks run on every route.

Progress

What we built
  • Editorial home page with hours for the café, restaurant and bar
  • Night theme for the evening sections
  • Menu, events, reels, gallery, about, catering, careers and contact pages
  • Reservation and enquiry forms with validation and mocked submission
  • Unit tests, responsive checks across viewport sizes, and axe accessibility checks
What's next
  • Improve performance: Lighthouse scores were 47 to 80 on the measured pages, and the home page is the slowest
  • Replace the illustrative menu prices and event dates with confirmed ones
  • Connect the forms to a backend
Not built yet
  • Team portraits and approved guest quotes: monogram placeholders for now
  • Full address and phone number: placeholders until the owner confirms them
  • Firefox testing

How it's built

One venue has three moods: café, restaurant and bar.

A night theme is switched by one data attribute, covering the Events section, the bar band and the footer.

Accessibility regressions can slip in on any route.

axe checks against WCAG 2.2 AA run on every route, in Chromium and WebKit.

AI in the build: 2 of the 2 commits in the Kaavyam repo were co-authored with Claude Code.

  • Editorial hero with an asymmetric photo layout, not the usual centred template hero
  • Night theme for Events, the bar band and the footer, switched by one data attribute
  • Reservation and enquiry forms with field errors, a success state and a mocked error path to test against
  • Every route tested at seven viewport sizes for layout overflow and console errors
  • axe checks against WCAG 2.2 AA on every route, in Chromium and WebKit
  • Per-route titles and Open Graph tags, with JSON-LD for CafeOrCoffeeShop and Restaurant

My Approach

Dining & Reservations
Menu, events and a catering page for groups Reservation form with validation, plus a mobile sheet for the menu
Motion & Performance
Route-level code splitting: each page loads only its own code GSAP and Lenis load with the layout, and every scroll reveal is skipped under reduced motion
Content & Accessibility
Reels and gallery page with a reel modal that works with the keyboard Skip link, visible focus rings, labelled selects and focusable horizontal scrollers