darshpoddar.com

My personal website. Interactive binary canvas hero, chronological timeline of every project I've shipped, live demos embedded per project.

Live: darshpoddar.com

---

What's on the site

• Hero — full-viewport HTML5 canvas rendering a grid of 0s and 1s that responds to the cursor. Mouse glow with velocity-reactive radius, matrix rain columns with embedded keywords (TRACE, OSINT, AGENT...), CRT vignette + scanlines across the page, hidden "KONAMI CODE" text baked into the grid.
• Flagship section — seven cracked projects each get a cinematic panel: tagline, story, architecture bullets, stats, and a live demo. Demos are either the deployed site in an iframe (tracelight, chainviz), a short video extracted from the project's demo recording (Phantom), or a custom React component that recreates the tool (ghostroom, coldshot, FuckNetflix, stormchain).
• Timeline — month-grouped chronological flow of every shipped project, experience, publication, award, certification, ISEF project, and merged open-source PR. Auto-populated from the GitHub API at build time, merged with a small manual config for pitches and categories.
• Easter eggs — Konami code triggers CRT mode, five clicks on the name triggers a glitch animation, ⌘K opens a command palette with fuzzy search over every project plus secret commands.

Architecture

• React + Vite + TypeScript + Tailwind
• shadcn/ui + Radix for primitives, Framer Motion for animation
• All canvas effects hand-rolled (no libraries)
• Data is a hybrid: GitHub API + manual override file + per-project demo components
• Deploys to Vercel from main

src/
  components/
    canvas/            — hero canvas and overlay (binary field, mouse glow, rain, scan, pulses)
    flagship/          — flagship section + per-project demo components
    timeline/          — month section + card variants (project / experience / publication / award / cert / isef / contribution)
    CommandPalette.tsx
    Footer.tsx
    StatusBar.tsx
  data/
    projects.ts        — manual overrides (pitch, category, featured, year, skip)
    entries.ts         — manual non-project entries (experience, publications, awards, certs, isef, contributions)
    flagships.ts       — the curated cracked-project list
    githubCache.json   — auto-generated by prebuild
    screenshots-manifest.json
  hooks/
    useBinaryCanvas.ts — grid state + animation loop
    useMouseGlow.ts    — mouse/touch state (trails, ripples, velocity)
    useKonamiCode.ts
    useGlitchName.ts
    useTypingAnimation.ts
    useCountUp.ts
  lib/
    githubData.ts      — merge layer + query helpers
  pages/
    Index.tsx
scripts/
  fetch-github-data.ts        — pulls every public repo at build time
  capture-screenshots.ts      — headless Chromium screenshots of deployed projects
  generate-og-image.ts        — generates the social-sharing card
public/
  thumbnails/                 — project screenshots + video demos
  favicon.svg, og-image.png, resume.pdf, sitemap.xml, robots.txt

Development

Requires Bun.

bun install
bun run dev            # Vite dev server at http://localhost:8080
bun run build          # Production build; runs `fetch:github` first
bun run lint
bun run test           # Vitest

bun run fetch:github         # Refresh repo metadata from GitHub API
bun run capture:screenshots  # Capture fresh screenshots via Playwright (optional, manual)
bun run generate:og          # Regenerate the OG image

GitHub fetches can be authenticated by setting GITHUB_TOKEN in .env.local to avoid rate limits.

Deploy

Auto-deploys to darshpoddar.com via Vercel on push to main. Vercel runs the default Vite build (bun run build), which also runs prebuild → fetch:github.

Screenshots are committed to the repo (not generated at Vercel build time) so Vercel doesn't need Chromium.

License

MIT. Code is free to use. The content (project descriptions, personal info, writing, thumbnails, demo videos) belongs to me — don't copy that part verbatim.