Portfolio Docs

Appearance

Architecture Overview ​

The portfolio is a statically exported Next.js site with a live chat system powered by Cloudflare Workers.

System Diagram ​

┌─────────────────────┐     ┌──────────────────────────────────┐
│   anshulbisen.com   │     │    chat.anshulbisen.com          │
│   (Cloudflare Pages)│     │    (Cloudflare Worker)           │
│                     │     │                                  │
│  Next.js 16 SSG     │     │  ┌────────────┐  ┌───────────┐  │
│  React 19           │◄───►│  │ Hono Router │  │ Durable   │  │
│  Tailwind 4         │ WS  │  │             │  │ Object    │  │
│  MDX blog           │     │  │ /session    │  │ (Chat     │  │
│  Chat widget        │     │  │ /ws/:id     │  │  Session) │  │
│                     │     │  │ /slack/*    │  │           │  │
│                     │     │  └─────┬───────┘  └─────┬─────┘  │
└─────────────────────┘     │        │                │        │
                            │        │   KV (THREAD_MAP)       │
                            └────────┼────────────────┼────────┘
                                     │                │
                            ┌────────▼────────────────▼────────┐
                            │         Slack API                │
                            │  - Thread per session            │
                            │  - Bi-directional relay          │
                            └──────────────────┬───────────────┘
                                               │
                            ┌──────────────────▼───────────────┐
                            │     Gemini 2.5 Flash             │
                            │  - AI chatbot (bot mode)         │
                            │  - Knowledge base from site      │
                            └──────────────────────────────────┘

Key Systems ​

Portfolio Site ​

  • Static export — next build produces static HTML/CSS/JS in out/
  • Deployed to Cloudflare Pages at anshulbisen.com
  • Blog via MDX with remark-gfm and rehype-prism
  • Chat widget connects to the chat worker via WebSocket

Chat Worker ​

  • Cloudflare Worker with Hono router at chat.anshulbisen.com
  • Durable Objects (ChatSession) manage per-session state, WebSocket connections, and alarms
  • KV namespace (THREAD_MAP) stores session-to-thread mappings and rate limit counters
  • Two modes: bot (AI chatbot) and live (Slack relay to Anshul)

Slack Bridge ​

  • Each chat session creates a Slack thread
  • Visitor messages are posted to the thread
  • Anshul's replies in the thread are relayed back to the visitor via WebSocket
  • Signature verification on all Slack webhook events

AI Chatbot (Gemini) ​

  • Model: Gemini 2.5 Flash via OpenAI-compatible API
  • Knowledge base: Auto-generated from site content (npm run generate-kb)
  • Sliding window: Last 8 messages (4 pairs) kept in context, older messages summarized
  • Security: Prompt injection detection, input sanitization, content filtering

Analytics ​

  • PostHog for product analytics, proxied through ph.anshulbisen.com
  • Error tracking and time-on-page metrics