Bindu — Digital Dharma 🪷

A premium, minimalist developer portfolio exploring the intersection of ancient Vedic philosophy and cutting-edge web development. Built with Next.js 16 App Router, React 19, Tailwind CSS v4, and Framer Motion — featuring dual theming (Surya/Chandra), cinematic animations, AI chatbot integration, and full static generation.

Live → thebindu.vercel.app

---

🧘‍♂️ Philosophy

Bindu (बिन्दु) — "the seed point" — represents the cosmic center from which all creation unfolds. This portfolio treats the web interface as an experiential canvas where every interaction carries intention.

---

📄 Pages & Routes

Route	Description
/	Homepage — hero, timeline, skills, projects, GitHub contributions, contact
/bindu	"I'm Bindu" — interactive philosophy page with sacred geometry & animations
/kalpas	Cinematic AI-powered timeline mapping 3,500 years of human × machine evolution
/blog	Blog with markdown posts
/projects/[slug]	Project case studies (Drishti, RepoCard, Zybra)
/skills	Skills & expertise breakdown
/tapasya	GitHub contribution graph ("daily discipline")
/contact	Contact form

---

🕉️ Vedic Naming Convention

Sanskrit Term	Meaning	Maps To
Bindu	The seed point	Brand / project name
Aarambh	The beginning	Hero section
Kala-Chakra	Wheel of time	Interactive timeline
Vidya	Knowledge	Skills section
Karma	Action	Projects section
Tapasya	Discipline	GitHub contribution graph
Sankalpa	Intention	Contact form
Surya / Chandra	Sun / Moon	Light / Dark themes
Ask Dharma	Cosmic guidance	AI chatbot widget

---

📂 Architecture

src/
├── app/                         # Next.js App Router
│   ├── page.tsx                 # Homepage (single-scroll assembly)
│   ├── layout.tsx               # Root layout (fonts, SEO, providers)
│   ├── bindu/                   # /bindu philosophy page
│   ├── blog/                    # /blog with [slug] posts
│   ├── kalpas/                  # /kalpas cinematic timeline
│   │   ├── page.tsx             # Server component (static)
│   │   └── KalpasPageClient.tsx # Client-side interactive body
│   ├── projects/                # /projects/[slug] case studies
│   ├── skills/                  # /skills page
│   ├── tapasya/                 # /tapasya GitHub graph
│   ├── contact/                 # /contact form
│   └── api/                     # Serverless API routes
│       ├── ask-dharma/          # AI chatbot (Gemini)
│       ├── ask-rishi/           # Kalpas-specific AI assistant
│       ├── github-contribs/     # GitHub GraphQL proxy
│       ├── og-image/            # Dynamic OG image generation
│       └── send-sankalpa/       # Contact form handler
├── components/
│   ├── ui/                      # Reusable UI primitives
│   │   ├── tubelight-navbar.tsx # Animated pill navbar with lamp effect
│   │   ├── animated-shader-background.tsx  # Three.js aurora shader
│   │   ├── flickering-grid.tsx  # Canvas flickering grid
│   │   ├── particles-bg.tsx     # Canvas particle system
│   │   └── stars-background.tsx # Canvas starfield
│   ├── Kalpas/                  # Kalpas page components
│   │   ├── KalpasHero.tsx       # Hero with deferred Three.js
│   │   ├── DualTrackTimeline.tsx # Dual-track era timeline
│   │   ├── MilestoneCard.tsx    # React.memo'd milestone cards
│   │   ├── AskRishi.tsx         # Per-era AI Q&A panels
│   │   └── EraNavBar.tsx        # Sticky era navigation
│   ├── HeroBindu/               # Homepage hero
│   ├── Timeline/                # Homepage timeline with MandalaCanvas
│   ├── Footer.tsx               # Full footer with FlickeringGrid
│   ├── Navbar.tsx               # Tubelight navbar wrapper
│   └── ...                      # ~24 component directories
├── content/                     # Static content
│   ├── kalpas-data.json         # 6 eras × dual-track timeline data
│   ├── blog/                    # Markdown blog posts
│   ├── bindu/                   # Bindu page content
│   └── projects/                # Project case study markdown
└── styles/
    └── global.css               # CSS design tokens (Surya/Chandra)

---

🎨 Design System

Themes

• Chandra (Dark): Deep charcoal (#0F0F0F) + golden accent (#E5C271)
• Surya (Light): Cloud grey (#FDFBF7) + warm gold (#D4AF37)

Typography

• Headings: Cinzel (serif, classical)
• Body: Inter (sans-serif, modern)
• Code: JetBrains Mono (monospace)

Key Components

• TubelightNavbar: Animated pill nav with "lamp" glow effect, leading/trailing slots
• FlickeringGrid: Canvas-based text rendering with random opacity flickering
• MandalaCanvas: Generative sacred geometry with rotating ring patterns
• ParticlesBg: Depth-of-field particle system with mouse repulsion
• AnoAI Shader: Three.js fragment shader (aurora borealis effect, code-split)

---

🛠️ Setup & Installation

Prerequisites

• Node.js v20+
• npm

1. Clone

git clone https://github.com/BAKUGOS1/vedic.git
cd vedic

2. Install

npm install

3. Environment Variables

Create .env.local at the project root:

# GitHub — for contribution graph
GITHUB_TOKEN=ghp_your_token
GITHUB_USERNAME=BAKUGOS1

# Gemini — for AI chatbot
GEMINI_API_KEY=AIzaSy_your_key
LLM_MODEL=gemini-2.0-flash

4. Dev Server

npm run dev

Open http://localhost:3000

5. Build

npm run build
npm run start

6. Test

npm run test          # single run
npm run test:watch    # watch mode
npm run test:coverage # with coverage

---

🚀 Deployment

Deployed on Vercel at thebindu.vercel.app.

All pages are statically generated except API routes. The Kalpas page (/kalpas) uses server-component data loading with client-side interactivity via KalpasPageClient.

For detailed deployment instructions, see the Deployment Runbook.

---

📋 Scripts

Command	Purpose
npm run dev	Start dev server
npm run build	Production build
npm run start	Start production server
npm run lint	Run ESLint
npm run type-check	TypeScript type checking
npm run test	Run Vitest tests
npm run test:coverage	Tests with coverage report

---

🔒 Performance Optimizations

• Three.js deferred via next/dynamic — ~600KB code-split from initial bundle
• Canvas loops paused when off-viewport (IntersectionObserver) and when tab is hidden (visibilitychange)
• React.memo on frequently re-rendered components (MilestoneCard)
• Stable callbacks via useCallback to prevent unnecessary child re-renders
• Google Fonts loaded via <link> with display=swap (non-render-blocking)
• Static generation for all content pages
• Particle class extracted to module scope (React compiler compatible)

---

📖 Additional Documentation

• QA & Audit Checklist
• Deployment Runbook
• Hero Flow & Storyboard
• Tapasya Module
• Sankalpa (Contact) Module
• Projects Module

---

Created with intent and precision by Mohit Kumar.