Personal site for me, founding engineer at Flashback Labs. A single long-scroll page with a HUD/telemetry aesthetic - duotone hero, scroll-scrubbed type, live request trace, real production metrics from shipped pipelines.
Live: mokshith.vercel.app
- Next.js 16 (App Router) + React 19
- TypeScript, Tailwind CSS v4
- Motion (Framer Motion successor) + GSAP for scroll-scrubbed timelines
- Lenis for smooth scroll
- Custom WebGL/Canvas effects (RGB split, pixel canvas, beams, dot field)
- Local fonts: Astro (display), Declandar (HUD mono), Chakra Petch (body)
Duotone red treatment over a portrait, large-scale Astro display type, live geo HUD, terminal-style typer, mouse parallax.
Editorial photo block with corner reticles, pull-quote with selective red emphasis, status typer.
Four case-study cards. Each one has its own bespoke visual - multi-agent topology, pixel pipeline grid, viewfinder, file-tree autodev - backed by real shipped projects (AURA, Grok Pipeline, ChefMate, AutoDev).
Production telemetry. Real counters from the Grok pipeline run log and the 48-hour hiring-platform sprint - not vanity rounding. Numbers count up on viewport entry over a beam-lit grid.
Tools in active use across production projects, organized by tier (Runtime / Framework / Infra / Data / AI-ML). Hover any layer to pause the live request trace and inspect what it actually does in the runtime.
Inspired by /now pages. A snapshot, not a stream - uptime since founding-engineer start, current build, focus, location.
Email, GitHub, LinkedIn, resume download - over a reactive dot field.
npm install
npm run devOpen http://localhost:3000.
src/
├── app/ # Next.js App Router entry
├── components/
│ ├── sections/ # Hero, About, SelectedWork, ByTheNumbers, Stack, Now, Contact
│ ├── hero/ # PhotoLayer, HUDOverlay, HeroText
│ ├── work/visuals/ # Per-project bespoke visuals
│ ├── numbers/ # StatCell, SquaresGrid, Beams, PixelCanvas
│ ├── stack/ # RequestTrace
│ ├── effects/ # RgbSplit, DecryptedText, GlitchText, MagneticButton, ...
│ ├── system/ # SmoothScroll, GrainOverlay, CustomCursor, ClickSpark
│ └── reactbits/ # BubbleMenu, Cubes
├── content/ # Single source of truth: projects, stats, stack, now
├── lib/ # useMouseParallax, useMouseSpotlight, useScrollScrub
└── fonts/ # Astro.ttf, Declandar.otf
Content lives in src/content/ - edit projects, stats, stack tiers, and the now-snapshot there; sections render from those files.