shobhit.org ✨

A playful, interactive, and visually rich web experience built exclusively for people named Shobhit (and the curious friends who know one). Pin yourself on a live world map, decode the Sanskrit etymology of the name, craft personalized digital name badges, listen to syllable-by-syllable pronunciations, check your daily cosmic horoscope, conquer 5 mini-games, and hunt down 18 hidden Easter eggs.

• 🌐 Live Website: https://shobhit.org
• 🐙 GitHub Repository: https://github.com/GeekLord/shobhit.org
• ⚡ Zero Dependencies: Built entirely with vanilla HTML5, CSS3, JavaScript, SVG, and a zero-dependency Node.js native HTTP server. No frameworks, no build tools, no tracking.

---

📑 Table of Contents

• Key Features
  • Interactive World Map & Registry
  • Daily Horoscope & Fortune Cookie Oracle
  • Digital Name Badge Designer
  • Pronunciation Studio
  • The Playground (5 Mini-Games)
  • Web Audio Sound Synthesizer
  • Name Decoder & Persona Generator
  • Rotating Quotes & Searchable Quote Wall
• Quick Start (Local Development)
• Project Structure
• Pages Overview
• API Reference
• Achievements & Easter Eggs (All 18)
• Design System & Aesthetics
• SEO & AI Discoverability
• Production Deployment & CI/CD
• Accessibility
• Customization Guide
• Tech Stack & Credits

---

✨ Key Features

🗺️ Interactive World Map & Global Registry

• Leaflet + OpenStreetMap Integration: Click anywhere on the globe to drop your custom pin with real latitude/longitude coordinates.
• Reverse Geocoding: Automatically fetches city and country suggestions using the OpenStreetMap Nominatim API.
• Country Leaderboard & Region Quick-Jumps: Real-time ranking of countries with the most pins, plus one-tap jump filters for India, North America, Europe, Asia, and Oceania.
• Live "Latest Hellos" Feed: Real-time chronological list of recent greetings from Shobhits worldwide, with relative timestamps and fly-to map navigation.
• Pin Deep-Linking & Sharing: Share a direct URL to any specific pin (map.html?pin=p_xxxxxx) with automatic map camera centering and popup triggers.
• Data Exporting: Instantly download all global pins as CSV (/api/pins.csv) or JSON (/api/pins.download).

🔮 Daily Horoscope & Fortune Cookie Oracle

• Algorithmic Daily Horoscope: Deterministic daily cosmic forecast generated from date hashes featuring daily lucky numbers, power snacks (e.g. Cardamom Chai, Mango Kulfi), and humorous things to avoid.
• 3D Fortune Cookie Cracking: Interactive cracked cookie animation with custom audio chimes and uplifting fortune messages.
• Spotlight Shobhit of the Day: Automatically highlights a featured message from the global map registry on the homepage.
• Social Sharing: One-click copy formatted horoscope text straight to clipboard for sharing on X, WhatsApp, or LinkedIn.

🪪 Digital Name Badge Designer

• HTML5 Canvas 600x360 Identity Generator: Real-time rendering of official Shobhit identity cards.
• 5 Aesthetic Themes: Switch between Cosmic, Royal, Cyber, Pastel, and Glassmorphism visual styles.
• Customizable Attributes: Dynamic name input, tagline/role, location, customizable emoji emblems (🌟, 👑, 🚀, ⚡, 💎, 🦄), and auto-generated verification serial codes (#SHB-XXXXXX).
• Export & Share: Direct high-resolution PNG download (shobhit-badge-[name].png) and instant clipboard text summary export.

🎙️ Pronunciation Studio

• Syllable-by-Syllable Breakdown: Audio isolation for both syllables — Sho (शो) and bhit (भित).
• Multiple Accent & Speed Profiles:
  • 🇮🇳 Indian English (Vedic): Authentic phonetics with proper aspirated "bh".
  • 🌐 Global Accent: Universal clear cadence.
  • ⏳ Slow Mode: Half-speed playback for easy learning and phonetic mastering.
• Web Speech API & Audio Synthesis: Instant browser-native speech synthesis with fallback to phonetic tooltips.

🎮 The Playground (5 Mini-Games)

1. Catch the Mascot (Whack-a-Mole): Fast-paced 20-second reflex game tapping pop-up mascots with score tracking and personal best records.
2. Emoji Memory Match: Classic 16-card emoji memory puzzle tracking total turns, pair matches, and lowest-move records.
3. The Shobhit Quiz: 5-question interactive trivia test about the name's meaning, Sanskrit roots, and site lore, with score card clipboard sharing.
4. Shobhit Life Bingo: 4x4 interactive bingo grid with 20 relatable Shobhit situations, automatic winning line detection (rows, columns, diagonals), fanfare celebration, and shareable results.
5. Sanskrit Speed Typing Sprint: 20-second high-intensity word sprint typing Sanskrit-rooted and radiant keywords (SHOBHIT, RADIANT, SPLENDOR, LUMINOUS, etc.) featuring live WPM calculations, accuracy tracking, and streak multiplier combo modes.

🔊 Web Audio Sound Synthesizer

• Procedural Audio Engine: Built entirely on the HTML5 AudioContext without external sound files.
• 9 Custom Sound Effects: Synthesizes pops, dings, stamps, boops, error buzzes, cookie cracks, typing clicks, victory fanfares, and win arpeggios.
• Opt-in & Persistent: Muted by default with a top-nav toggle button (🔇 / 🔊) saved to localStorage. Includes haptic vibration feedback on supported mobile devices.

✨ Name Decoder & Persona Generator

• Acrostic Breakdown: Detailed letter-by-letter guide exploring the 7 letters: Spark, Heart, Open, Brave, Humor, Imagine, Thrive with 3D interactive flip cards.
• "What kind of Shobhit are you?" Persona Generator: Deterministic personality calculator assigning signature vibes, spirit animals, superpowers, signature colors, and a 100% Shobhit-ness score.
• Comprehensive Etymology: Deep dive into the Sanskrit root śobhā (शोभा - splendor, elegance, light).

💬 Rotating Quotes & Searchable Quote Wall

• Auto-Rotating Quote Stage: Curated inspirational and humorous wisdom cards with automatic cross-fade transitions and copy-to-clipboard buttons.
• Real-Time Live Search: Search through the quote repository by keyword or author with instant masonry filtering.

✉️ Floating Contact Modal & Postfix Email API

• Universal Contact FAB: Accessible floating button on every page opening a clean dialog modal.
• Server-Side Delivery: Form submissions are dispatched through /api/contact and delivered via local Postfix sendmail.

---

🚀 Quick Start (Local Development)

Run with Node.js Server (Recommended)

# Start the zero-dependency backend
node server.js

Then visit http://localhost:8899 in your browser.

Zero Dependencies: Requires Node.js (14.x or 18.x recommended). No npm install or external packages required!

Custom Port Configuration:

# macOS / Linux
PORT=3000 node server.js

# Windows (PowerShell)
$env:PORT=3000; node server.js

Static Mode (Without Server)

Open index.html directly in any web browser. All client features (games, badge designer, pronunciation, horoscope, Easter eggs) work out of the box, and map pins automatically fall back to browser localStorage (shobhit_pins_v2).

---

📂 Project Structure

shobhit.org/
├── index.html                  # Homepage (Hero, Live Stats, Confetti, Horoscope, Fortune Cookie, Spotlight)
├── map.html                    # Interactive World Map (Leaflet, Region Filters, Country Leaderboard, Feed)
├── name.html                   # The Name (Pronunciation Studio, Badge Designer, Letter Cards, Persona Generator)
├── quotes.html                 # Quotes (Rotating Stage, Live Search, Masonry Quote Wall)
├── play.html                   # Playground (5 Mini-Games, Achievement Showcase Board)
├── server.js                   # Zero-dependency Node.js HTTP static & REST API server
├── README.md                   # Complete project documentation
├── FEATURES.md                 # Product roadmap, feature ideas, and implementation plans
├── SEO.md                      # Search Engine Optimization & structured data documentation
├── deploy.md                   # Production deployment guide for CentOS Web Panel (CWP)
├── shobhit.org.md              # Original product vision brief
├── robots.txt                  # Search crawler instructions (allows AI bots, protects API)
├── sitemap.xml                 # XML sitemap with priority rankings
├── llms.txt                    # LLM context summary for AI search engines
├── .well-known/
│   └── security.txt            # Responsible security vulnerability disclosure policy
├── .github/
│   └── workflows/
│       ├── deploy.yml          # GitHub Actions automated SSH deployment pipeline
│       └── main.yml            # Kiro PR code review workflow
├── assets/
│   ├── favicon.svg             # Vector site favicon
│   ├── favicon.png             # Raster favicon icon
│   ├── logo.svg                # Handcrafted vector wordmark logo
│   ├── logo.png                # High-res raster logo
│   ├── mascot.svg              # Interactive SVG mascot with cursor-tracking pupils
│   ├── hero-scene.svg          # Vector backdrop with parallax landscape
│   ├── og-image.svg            # Vector social share banner
│   └── og-image.png            # 1200x630 OpenGraph / Twitter social preview image
├── data/
│   └── pins.json               # Persistent JSON map pin database (seeded with global cities)
├── scripts/
│   ├── site.js                 # Shared runtime: nav/footer injection, sound engine, 18 achievements, Easter eggs
│   ├── home.js                 # Homepage logic: eye tracking, parallax hills, live stats, Horoscope Oracle
│   ├── map.js                  # Leaflet map instance, Nominatim geocoding, region jumps, CSV export
│   ├── quotes.js               # Content library, canvas badge designer, Web Speech pronunciation, persona engine
│   ├── play.js                 # 5 Mini-games: Catch Mascot, Memory Match, Quiz, Bingo, Speed Typing Sprint
│   └── contact.js              # Floating contact FAB & modal submission handler
└── styles/
    └── main.css                # Complete unified CSS design system & custom properties

Script Execution Architecture: Every page loads scripts/site.js first to initialize the global window.Shobhit namespace, inject shared responsive navigation and footer, register Easter egg listeners, and start the Web Audio engine.

---

📄 Pages Overview

Page	File	Purpose & Interactive Modules
Home	index.html	Hero banner with cursor eye-tracking mascot, live pin counters, celebration confetti cannon, Daily Horoscope Oracle, 3D Fortune Cookie, and daily Featured Shobhit spotlight.
World Map	map.html	Interactive Leaflet map, pin placement modal with reverse geocoding, Country leaderboard, Region quick-jump filters, live greetings feed, and CSV/JSON data download.
The Name	name.html	Multi-accent Pronunciation Studio, HTML5 Canvas Name Badge Designer with PNG export, S-H-O-B-H-I-T acrostic 3D flip cards, and personality persona generator.
Quotes	quotes.html	Auto-rotating quote billboard with shuffle and clipboard copy, real-time instant quote search, and complete masonry wisdom wall.
Playground	play.html	5 interactive mini-games (Catch Mascot, Emoji Memory Match, Shobhit Quiz, Shobhit Life Bingo, Speed Typing Sprint) and the 18-achievement showcase board.

---

🔌 API Reference

Base URL: http://localhost:8899 (or https://shobhit.org)

1. Get All Map Pins

• Endpoint: GET /api/pins
• Response: 200 OK

{
  "pins": [
    {
      "id": "p_lsk39d8a",
      "lat": 28.6139,
      "lon": 77.209,
      "place": "New Delhi, India",
      "msg": "Namaste from where it all began! 🇮🇳",
      "ts": 1700000000000,
      "seed": false
    }
  ]
}

2. Add a Map Pin

• Endpoint: POST /api/pins
• Headers: Content-Type: application/json
• Request Body:

{
  "lat": 19.0760,
  "lon": 72.8777,
  "place": "Mumbai, India",
  "msg": "City of dreams, full of Shobhits!"
}

• Response: 201 Created

{
  "pin": {
    "id": "p_m8x4z19q",
    "lat": 19.076,
    "lon": 72.8777,
    "place": "Mumbai, India",
    "msg": "City of dreams, full of Shobhits!",
    "ts": 1770748123000,
    "seed": false
  },
  "count": 42
}

3. Send Contact Form Email

• Endpoint: POST /api/contact
• Headers: Content-Type: application/json
• Request Body:

{
  "name": "Shobhit Sharma",
  "email": "shobhit@example.com",
  "message": "Loved the badge designer and the map!"
}

• Response: 200 OK

{
  "success": true
}

4. Download Map Pins as CSV

• Endpoint: GET /api/pins.csv
• Response: 200 OK with Content-Type: text/csv and Content-Disposition: attachment; filename="shobhits.csv".

5. Download Map Pins as JSON

• Endpoint: GET /api/pins.download
• Response: 200 OK with Content-Type: application/json and Content-Disposition: attachment; filename="shobhits.json".

---

🏆 Achievements & Easter Eggs (All 18)

All 18 achievements are tracked locally in localStorage (shobhit_eggs_v1) and reflected in real-time on the Playground board and in the global footer counter:

#	Trigger / Action	Badge	Achievement Name	Description
1	Enter Konami code (↑ ↑ ↓ ↓ ← → ← → b a)	🕹️	Konami Coder	Activates super party mode with massive confetti blast
2	Type party anywhere on any page	🌈	Party Animal	Toggles full rainbow disco mode
3	Click/pat the homepage hero mascot 7 times	🤖	Mascot Whisperer	Makes the mascot giggle and bounce
4	Drop your first pin on the world map	📍	On The Map	Joins the global Shobhit registry
5	Discover 5+ unique cities on the map	🌍	Globe Trotter	Explores pins across continents
6	Get the rare Unicorn spirit animal in Vibe Generator	🦄	Unicorn Spotter	Discovers the rarest persona outcome
7	Catch 18+ mascots in Catch the Mascot	⚡	Lightning Reflexes	Reflex master in the whack-a-mascot game
8	Complete the Emoji Memory Match game	🧠	Memory Master	Finds all matching pairs
9	Score 4+ out of 5 on the Shobhit Quiz	🎯	Quiz Whiz	Proves deep knowledge of Shobhit lore
10	Shuffle through 5 different wisdom quotes	📜	Quote Collector	Explores the philosophical quote archives
11	Click the top-left site logo 5 times in rapid succession	🦘	Logo Hopper	Triggers the springy logo spin animation
12	Copy your persona vibe breakdown to clipboard	📋	Vibe Sharer	Shares custom personality stats
13	Click any pin item in the map's live greetings feed	🔍	Pin Explorer	Flies the camera straight to a fellow Shobhit
14	Crack open a daily fortune cookie	🔮	Cosmic Seeker	Reveals your daily destiny prophecy
15	Download or share a custom Canvas Digital Badge	📛	Badge Artisan	Crafts a personalized ID badge
16	Complete any line (row, col, diagonal) in Shobhit Bingo	🎲	Bingo Champion	Stamps four squares in a row
17	Score 6+ words or 35+ WPM in Speed Typing Sprint	⌨️	Keyboard Wizard	Blazes through radiant Sanskrit words
18	Trigger the confetti cannon 4+ times	🎉	Celebration King	Celebrates with maximum sparkle

---

🎨 Design System & Aesthetics

All visual styles are consolidated in styles/main.css utilizing modern CSS Custom Properties:

• Vibrant Pastel Color Palette:
  • Backgrounds: Light pastel lavender (#f7f5fd), candy pink (#fff0f5), and clean paper (#ffffff).
  • Dark Mode & Badges: Midnight cosmic navy (#1c1438), neon cyan (#00f0ff), cyber magenta (#ff007a), and royal slate (#0f172a).
  • Signature Gradients: --grad-hero, --grad-warm, --grad-cool, --grad-candy.
• Typography:
  • Display & Headings: Baloo 2 (Google Fonts) — friendly, rounded, and expressive.
  • Body & UI: Quicksand (Google Fonts) — clean, modern, and highly legible.
  • Badges & Codes: Monospace code identifiers.
• Micro-Interactions & Animation:
  • GPU-accelerated CSS transforms and opacity transitions.
  • Spring physics easing (cubic-bezier(0.34, 1.56, 0.64, 1)).
  • Scroll-triggered reveal animations via IntersectionObserver.
  • Sparkle cursor trailing on pointer movement (desktop).
  • Mascot pupil tracking using vector trigonometric calculations.
  • Parallax depth on hero landscape SVG elements.

---

🔍 SEO & AI Discoverability

The site implements state-of-the-art search engine optimization and AI crawler discoverability (documented in detail in SEO.md):

• Structured Data (JSON-LD):
  • Homepage: WebSite, Organization, WebPage, and FAQPage schemas answering common questions ("What does Shobhit mean?", "What is the Sanskrit origin?").
  • Name Page: Article and Thing schemas for linguistic authority.
  • Map Page: Map schema.
• Social Sharing Previews: Full OpenGraph and Twitter Card metadata with pre-rendered og-image.png (1200x630px).
• AI Agent Context: /llms.txt provides structured markdown context for LLMs and AI search engines (ChatGPT, Claude, Perplexity, Gemini).
• Search Engine Directives: Comprehensive sitemap.xml with priority hierarchies and robots.txt allowing indexing while shielding raw API endpoints.
• Security Policy: .well-known/security.txt for security researcher communications.

---

🚢 Production Deployment & CI/CD

The production site runs on a CentOS server powered by CentOS Web Panel (CWP) with mod_nodejs and Postfix (see deploy.md for full server configuration).

Server Environment

Parameter	Configuration
Server Panel	CentOS Web Panel (CWP) with mod_nodejs
User Account	shobhito
Path	/home/shobhito/public_html/
Node.js Runtime	18.x
Port	8899 (Reverse proxied via Apache / NGINX)
Mail Agent	Postfix (sendmail binary for /api/contact)

GitHub Actions CI/CD (.github/workflows/deploy.yml)

Every push to main automatically triggers an SSH deployment action that synchronizes the repository to the production directory.

---

♿ Accessibility

• Motion Sensitivity: Honors prefers-reduced-motion: reduce across all pages by automatically disabling confetti physics, sparkle cursor generators, parallax layers, and continuous animations.
• Keyboard Navigation: Full tab order navigation with distinct :focus-visible outlines on all interactive elements, modal traps, and skip-friendly dialogs.
• Screen Reader Support: Semantic HTML5 landmarks (<header>, <nav>, <main>, <article>, <dialog>, <footer>), ARIA attributes (aria-current, aria-expanded, aria-label, aria-live="polite"), and non-visual screen reader text.

---

🛠️ Customization Guide

• Adding a New Page: Create your HTML file, then add a single entry to the PAGES array in scripts/site.js (e.g. { href: 'stories.html', label: 'Stories', icon: '📖' }) — header navigation and footer links will automatically render across the entire site.
• Modifying Theme Colors: Edit the :root variables in styles/main.css.
• Adding Mini-Games or Achievements:
  • Define new games in scripts/play.js or separate module files.
  • Register new achievements in scripts/site.js inside the ACHIEVEMENTS map and call window.Shobhit.achievement('your-id', 'custom trigger message').
• Updating Seed Pins: Modify data/pins.json with your desired default locations.

---

💻 Tech Stack & Credits

• Leaflet.js — Lightweight mobile-friendly interactive maps.
• OpenStreetMap — Map tiles & spatial data.
• Nominatim — Open-source reverse geocoding API.
• Google Fonts — Baloo 2 & Quicksand typography.
• Handcrafted SVG Illustrations — Original mascot, wordmark logo, and vector scenery.

---

Made with 💜 by a Shobhit for every Shobhit, everywhere.

_{A fan-made celebration of a great name · shobhit.org}