Shlok Bam's portfolio

Shlok Bam — Portfolio

AI / Generative AI engineer · Pune, India

A portfolio that behaves like the work it shows: real neural nets, gradient descent and self-attention running live behind every page, an AI assistant trained on my résumé, and a small arcade at the end.

✦ What's inside

🧠 Live AI on every page

Each page header runs a small, real computation on a canvas: not a looping video, but the actual maths.

💬 Ask my AI

A portfolio assistant that knows everything on the site, served by FastAPI and Groq.

• The question is tokenised live as you type, with token ids.
• A causal self-attention heatmap of your question renders behind it.
• Replies stream in, and a small network "thinks" while waiting.
• It falls back across models when one is rate-limited, and has prepared answers if the API is asleep.

🕹️ The arcade

Four tiny games, all built for the contact page. Best scores stay on your device.

✨ And the small things

• Live data: LeetCode, CodeChef and GitHub numbers, plus a hover peek with a 26-week contribution heatmap.
• A multilingual hello that cycles every second, a live IST clock to the second, and a scramble-text logo.
• Recognition page: patents and awards as stamped, tilting cards.
• Journey page: a route that draws itself as you scroll, from 2010 to now.
• Work page: horizontally scrolling flagships, and a project index with rich hover previews.
• Dark and light themes, chosen before first paint so there's no flash.
• Smooth scroll with Lenis, scroll-driven CSS animations in Chromium and a JS fallback elsewhere, and full reduced-motion support.

📸 Pages

About: k-means over a skill-embedding space Work: gradient descent with momentum

Journey: a training run, years as epochs Recognition: a Sobel convolution scanning pixels

Designed down to 320 px wide

🏗️ Architecture

flowchart LR
  V([Visitor]) -->|shlokbam.in| VC

  subgraph VC [Vercel · static, prerendered]
    direction TB
    R[React 18 + Vite<br/>9 pages rendered to HTML]
  end

  subgraph RD [Render · FastAPI]
    direction TB
    API["/api/chat · /api/stats<br/>/api/availability · /api/health"]
    OLD["old v1 address<br/>301 → shlokbam.in"]
  end

  R -->|chat, live stats| API
  R -->|contact form| W3[Web3Forms]
  API --> GQ[Groq LLMs]
  API --> CP[LeetCode · CodeChef · GitHub]
  R -.-> GA[Google Analytics]

• The site is static. Every route is prerendered to real HTML at build time, with its own title, description, canonical URL, Open Graph tags and JSON-LD. It loads instantly from Vercel's CDN, even while the API sleeps.
• The API is small. FastAPI handles the assistant (system prompt built from the site's own content, read from /portfolio.json; see knowledge.py), cached coding stats and a health check. It also redirects the old Render address to the new domain and retires v1's service worker.
• The contact form posts straight from the browser to Web3Forms, with a honeypot field for bots.

🧰 Stack

📁 Structure

.
├── v2/
│   ├── frontend/                 → Vercel (root directory: v2/frontend)
│   │   ├── src/
│   │   │   ├── pages/            one component + stylesheet per page
│   │   │   ├── components/       Layout, AskAI, ChatWidget, Arcade, SkillPit, ProfilePeek, …
│   │   │   │   └── arcade/       Bug smash, Memory, Typing sprint
│   │   │   ├── lib/scenes/       the live AI canvases (nn, embed, gd, attention, cv, …)
│   │   │   ├── content/          everything the site says, as data (published as /portfolio.json)
│   │   │   ├── routes.jsx        the route list (one chunk per page)
│   │   │   └── seo.js            per-page titles, descriptions, structured data
│   │   ├── public/static/        résumé, certificates, patents, photos (+ WebP copies in opt/)
│   │   └── scripts/              prerender.mjs, resize-images.sh
│   ├── backend/                  → Render (root directory: v2/backend)
│   │   ├── main.py               API, stats fetchers, redirects
│   │   └── knowledge.py          the assistant's rules; facts come from the content
│   └── README.md                 developer notes
└── docs/screens/                 the images in this README

🚀 Run it locally

# 1. API: reads GROQ_API_KEY and WEB3FORMS_ACCESS_KEY from the repo-root .env
cd v2/backend
python3.11 -m venv .venv && .venv/bin/pip install -r requirements.txt
.venv/bin/uvicorn main:app --reload --port 8000

# 2. Site: proxies /api to :8000
cd v2/frontend
npm install
npm run dev          # http://localhost:5173

Deployment settings for Render and Vercel are in v2/README.md.

📬 Say hi

shlokbam.in · LinkedIn · GitHub · X · shlokbam19103@gmail.com

Designed and built by Shlok Bam. Earlier version: Flask (v1), kept in this repo's git history.