Back to home
—/Colophon
How this site was built.
A short tour of the design, the engineering, and the RAG pipeline that powers the chat. The portfolio is the product demo.
01 — Design
Type, color, motion
- Type
- Inter for body, JetBrains Mono for labels & code, custom display scale
- Color
- Multi-accent palette — Ferrari red, deep blue, Teenage Engineering orange, premium green, terracotta, teal — pop on a warm neutral base
- Texture
- Static SVG noise grain (~2% opacity), radial-gradient dot grid motifs
- Motion
- Framer Motion with cubic-bezier(0.25, 0.1, 0.25, 1) silk easing, scroll reveals, subtle hover micro-interactions
- Influences
- Nothing (the brand), Teenage Engineering, Apple, Nuphy / Lofree keyboards
02 — Stack
Engineering
- Framework
- Next.js 14 (App Router, SSG)
- Language
- TypeScript everywhere
- Styling
- Tailwind CSS 3 with CSS-variable tokens for theming
- Motion
- Framer Motion v12
- Content
- MDX + gray-matter, Shiki via rehype-pretty-code
- UI primitives
- shadcn/ui (selective — Button, Dialog, Toast)
- Forms
- react-hook-form + Zod validation
- Hosting
- Vercel (frontend) + Render (RAG service)
03 — AI on this site
RAG, hybrid retrieval, multi-provider LLM
- Backend
- FastAPI service — POST /chat streams Server-Sent Events
- Embeddings
- sentence-transformers/all-MiniLM-L6-v2
- Vector store
- ChromaDB with cosine similarity, persisted to disk
- Retrieval
- Hybrid: dense (Chroma) + lexical (BM25), fused via Reciprocal Rank Fusion (k=60)
- LLM providers
- Anthropic Claude 3.5 Sonnet → OpenAI gpt-4o-mini → Gemini 1.5 Flash (auto-selects on configured key)
- Guardrails
- Strict system prompt (scope/grounding/no-extrapolation), per-IP rate limit, length validation
- Sources indexed
- Résumé, all 8 project case studies, all blog posts
04 — Accessibility
WCAG 2.1 AA, by default
- Semantics
- Real <main>, <nav>, <article>, <section>, <header>, <footer>
- Focus
- :focus-visible everywhere, never outline: none without a replacement
- Keyboard
- Skip-to-content, Esc closes dialogs, Cmd+K palette is fully keyboard-driven
- Motion
- All animations respect prefers-reduced-motion: reduce
- Color contrast
- Body text ≥ 4.5:1, interactive elements ≥ 3:1 — checked at the design-token layer
05 — Performance
Static-first, lazy-loaded extras
- Rendering
- Every public page is static (SSG) — no Node-runtime routes, no cold starts
- Bundle
- Framer Motion is the heaviest dep; everything else is tree-shaken or font data
- Fonts
- next/font with swap — Inter (body), JetBrains Mono (labels), Instrument Serif (display italic)
- Images
- Next.js Image with explicit dimensions where applicable
Credits
Designed and built by Neeraj Bhargav Rondla in Jersey City. Source on GitHub. Influences acknowledged — anything original is mine; anything elegant is borrowed from people who do this for a living.