Skip to content
TARUN S / PORTFOLIOTAP OR PRESS ANY KEY TO SKIP

Developer

000

Artist Portfolio

TYPE
Artist / performer portfolio
STACK
15 COMPONENTS
STATUS
CASE STUDY
FEATURED
YES
LINKS
—

01 / OVERVIEW

A single-page portfolio for beatboxer, emcee, and event host Artist — a canvas-animated video hero, a categorized performance gallery, dual corporate/social services tabs, and a tour-dates manager that persists to the browser instead of a server.

Official portfolio and booking site for Artist, presented on-page as ARTIST / EMCEE / BEATBOXER / GAME JOCKEY: an India's Got Talent Season 5 semi-finalist and Wildcard winner who has performed at TEDx Hyderabad, co-founded the collective Beatsclub, and launched Colossal, India's largest beatboxing festival. I built the site as a Vite 5 + React 18 + TypeScript single-page app, styled with Tailwind CSS and a full shadcn/ui (Radix UI) component set, scaffolded and iterated on through Lovable — the lovable-tagger dev dependency and the required gpteng.co bootstrap script in index.html are still in place — and deployed it on Netlify. There's no server: the one stateful feature, tour-date management, is a self-contained module that reads and writes straight to the browser's localStorage, with a small React context syncing state between the public Tour Dates page and the admin dashboard at /cms, plus a storage-event listener that keeps multiple open tabs in sync. The rest of the build leans on Framer Motion throughout: an 80-particle animated canvas hero with a hover-to-preview video, a tabbed dual-audience Services section, a category-switching Performance Gallery video player, and a staggered, expandable wall of 70-plus brand partners.

02/ STACK & ARCHITECTURE

FRONTEND

  • React 18
  • TypeScript
  • Vite 5 (SWC)
  • Tailwind CSS
  • shadcn/ui (Radix UI primitives)
  • Framer Motion
  • React Router DOM
  • React Hook Form
  • Zod
  • TanStack Query
  • Embla Carousel
  • Recharts
  • Lucide React

BACKEND

  • None — fully static frontend, no server or database
  • Browser localStorage (persistence for the Tour Dates CMS)

03 / WHAT WAS ACTUALLY HARD

  1. 01

    Backend-free Tour Dates CMS

    A dedicated data module handles full CRUD plus up/down reordering for tour dates, persisting everything to the browser's localStorage instead of a database. A shared React context keeps the public Tour Dates page and the /cms admin dashboard reading the same state, and a storage-event listener re-syncs data live if a second tab makes an edit — all without a single API call. Worth flagging: /cms currently ships with no authentication guard in the router.

  2. 02

    Canvas-particle hero with hover/tap video preview

    The hero animates 80 colored particles on an HTML5 canvas over a responsive background image, then reveals an autoplaying muted video when a visitor hovers 'Watch Performance' on desktop, or taps it on mobile to jump straight into a fullscreen player with its own close button and call-to-action.

  3. 03

    Dual-catalog, tab-switching Services section

    Nine Corporate Events and seven Social & Community offerings sit behind an animated pill switcher — a spring-animated sliding highlight on desktop, a two-button toggle on mobile — with every card entering via its own staggered Framer Motion variant and its own primary/accent color treatment per catalog.

  4. 04

    Category-driven Performance Gallery player

    Three themed videos (Beatboxing, Fusion, Melodic) swap via animated transitions behind a fully custom control bar — play/pause, mute, fullscreen — built directly on the HTML5 video element rather than relying on native browser controls.

  5. 05

    Animated wall of 70+ brand partners

    A roster of more than 70 named brand partners maps the first ten to real logo art with an animated gradient glow, and a 'View All' / 'Show Less' toggle re-triggers the entire grid with a staggered enter/exit animation rather than a plain show/hide.