Web Projects — Case Studies
Selected builds. Real clients. Measurable outcomes.
8Bit Creatives
"A dark-mode editorial gaming-native creator agency website, an internal ops portal with 9 operational views, and three external partner dashboards (Creator, Brand, Platform) — built for India's biggest gaming creator agency representing 12 creators, a BGMI esports roster, and founders who started in a Mumbai LAN room in 2018."
The Challenge
8Bit Creatives needed a digital home that matched the energy of India's gaming creator economy — not a corporate brochure. The agency manages 12 of India's biggest gaming creators, operates a competitive BGMI esports roster, and ships 300+ campaigns for brands including ASUS, Red Bull, Krafton, Netflix, Realme, and Amazon.
The existing online presence was a basic landing page that didn't reflect the scale of operations. The team also needed an internal tool to manage campaigns, approvals, and creator deliverables — they were running everything on spreadsheets and WhatsApp groups. And they needed three separate external dashboards: one for creators to check their campaigns and payments, one for brands to track campaign performance, and one for platform partners (Kick, YouTube, Loco) to monitor talent migration and growth metrics.
The brief was to ship all of this — a public-facing marketing site, an internal ops portal, and three partner dashboards — in one cohesive system that worked on a static hosting stack with no backend to maintain.
My Role & Scope
- Visual identity & brutalist editorial design system (Geist Sans typography, 8Bit orange FF5931 accent, capsule pill buttons, animated 8BIT letter backgrounds)
- 9 public website pages designed and developed end-to-end (Landing, About, Creator Roster, Case Study Archive, Services, Esports Roster, Full Case Study blueprint, Privacy Policy, Contact)
- Internal ops portal with 9 views (Dashboard, Roster, Approvals, Campaign Pipeline, Brief Intake, File Vault, Reports, Guide, Settings & Permissions)
- 3 partner dashboards (Creator Dashboard, Brand Dashboard, Platform Dashboard) — each with a tailored sidebar, stats row, and workflow views
- Cart + booking system on the landing page (Formspree-integrated contact form, honeypot-protected, inline success/error handling)
- Security hardening (Content Security Policy, HSTS preload, X-Frame-Options, Referrer-Policy, Permissions-Policy, SRI hashes on external scripts, robots.txt, sitemap.xml, .vercelignore, 308 redirects for clean URLs)
- Mobile-responsive across all pages with custom @media breakpoints
- Vercel deployment with auto-deploy on push to main
Key Features
| Feature | Description |
|---|---|
| Public Marketing Site | 9 hand-coded HTML pages — hero with playable dino game + animated 8BIT letter background, rotating red half-eclipse with 12 game characters (Matter.js physics), 3D coverflow creator carousel, case study archive with morphing dialogs, full services breakdown, esports roster with KPI ribbon, complete case study blueprint, DPDP Act compliant privacy policy, 3-step brief contact form |
| Internal Ops Portal | 9 operational views for the 8Bit team — Dashboard with stats row + Kanban board, Roster with "+ Add Creator" modal, 3-column Approvals Kanban, full Campaign Pipeline with interactive deliverables checklist, Brief Intake form, File Vault linked to Google Drive, post-campaign Reports, plain-English Guide (12 accordion sections), Settings & Permissions |
| Creator Dashboard | A creator's personal dashboard with active campaigns, deliverables checklist, payment status per campaign, contract, performance metrics — sidebar: My Dashboard, My Campaigns, My Deliverables, My Payments, My Contract, Guide |
| Brand Dashboard | A brand partner's dashboard with active campaigns, deliverables status (progress bars), assigned creators, budget tracking (spent vs allocated), campaign performance per campaign, ROI metrics — sidebar: My Dashboard, My Campaigns, My Deliverables, My Creators, My Reports, Guide |
| Platform Dashboard | A platform partner dashboard (Kick, YouTube, Loco) with talent migration status, content performance per creator, growth metrics (subscriber/viewer growth), contract status — sidebar: My Dashboard, Talent Migration, Content Performance, Growth Metrics, My Contract, Guide |
| Cart + Booking System | Slide-out cart drawer with quantity controls, 3-step booking form wired to Formspree with honeypot protection, inline success/error handling, WhatsApp integration for order details, localStorage cart persistence |
| Security Hardening | Strict Content-Security-Policy with HSTS preload, X-Frame-Options SAMEORIGIN, X-Content-Type-Options nosniff, Referrer-Policy strict-origin-when-cross-origin, Permissions-Policy locking down camera/mic/geo/payment, SRI hashes on GSAP+ScrollTrigger CDN scripts, honeypot-protected contact form, 308 permanent redirects for clean URLs, robots.txt hiding the ops portal, sitemap.xml with 9 canonical URLs |
| Animated 8BIT Background | 100 columns of falling "8BIT" letters on desktop, 40 on mobile, alternating up/down scroll, mask-image fade at top and bottom edges — GPU-accelerated via translate3d + will-change:transform for buttery-smooth 60fps performance |
| Performance Engineering | No framework runtime (zero KB of React/Vue shipped), IntersectionObserver pauses off-screen animations, passive scroll listeners, content-visibility: auto on long sections, requestAnimationFrame throttling for the dino game, lazy-loaded images, Google Fonts preconnect, Vercel edge network with HTTP/2 + Brotli compression |
Visual Showcase
Hover over the numbered hotspots to explore feature details.
Editorial Gaming Hero
Dynamic typography featuring Geist Sans, animated 8BIT falling letters background, and playable dino runner game.
Rotating Red Half-Eclipse
Interactive Matter.js physics simulation with 12 game characters and brand marquee strip.
3D Coverflow Creator Carousel
Showcasing 12 gaming creators including Mortal, Payal, Snax, and Jokerkihaveli with custom cards.
Ops Portal & Partner Dashboards
Ops Portal — Internal Dashboard
The 8Bit operations team's command center. 9 views covering everything from campaign intake to delivery: Dashboard (stats row + Kanban board), Roster (creator grid with "+ Add Creator" modal), Approvals (3-column Kanban: internal review → brand approval → approved), Campaign Pipeline (full Kanban with brief, timeline, deliverables checklist, SOW, communication log), Brief Intake form, File Vault (Google Drive-linked), Reports, plain-English Guide (12 accordion sections), and Settings & Permissions.
Creator Dashboard — Personal View
Each represented creator gets their own dashboard to track active campaigns, deliverable checklists (with status: Not Started / In Progress / In Review / Delivered), payment status per campaign, contract details, and performance metrics. Sidebar navigation: My Dashboard, My Campaigns, My Deliverables, My Payments, My Contract, Guide.
Brand Dashboard — Partner View
Brand partners log in to see active campaigns, deliverables status with progress bars, assigned creators, budget tracking (spent vs allocated), and campaign-level performance metrics including reach and ROI. Sidebar navigation: My Dashboard, My Campaigns, My Deliverables, My Creators, My Reports, Guide.
Platform Dashboard — Kick / YouTube / Loco
Platform partners (Kick, YouTube, Loco) get a dashboard focused on talent migration status (which creators moved from which platform to which), content performance per creator, growth metrics (subscriber/viewer growth over time), and contract status. Sidebar navigation: My Dashboard, Talent Migration, Content Performance, Growth Metrics, My Contract, Guide.
Results & Learnings
Delivered 14 production HTML pages in 7 days — 9 public website pages, 1 ops portal with 9 views, 3 partner dashboards, and a custom 404 page. The site ships with a strict Content-Security-Policy (blocks mixed content, restricts script sources to self + cdnjs + GA, blocks iframe embedding from other origins), HSTS preload eligibility, SRI hashes on every external CDN script, and a honeypot-protected Formspree contact form with inline success/error handling.
The ops portal replaced the team's spreadsheets-and-WhatsApp workflow with a single dashboard where campaigns move through Brief Intake → Production → Approval → Delivered → Live & Reporting, with interactive deliverables checklists and per-campaign communication logs. The three partner dashboards gave creators, brands, and platform partners their own self-serve views — reducing the operations team's support load significantly.
The animated 8BIT letter background (100 columns on desktop, 40 on mobile) runs at 60fps via GPU-accelerated translate3d + will-change:transform transforms, keeping the main thread free for scroll interactions and the playable dino runner game in the hero. The cart + booking system on the landing page routes inquiries directly to the team inbox via Formspree, with a WhatsApp deep-link fallback for mobile users.