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, Instrument Serif italics for the editorial voice
- Color
- “Riso Editorial” palette — amber, mint, sky, crimson, mustard, and plum inks on warm paper, tuned per theme
- Texture
- Static SVG noise grain, radial-gradient dot grids, and a faint Monaco circuit a scroll-driven F1 car laps in the background
- Motion
- Framer Motion with cubic-bezier(0.25, 0.1, 0.25, 1) silk easing — scroll reveals, magnetic buttons, a draggable card deck
- Influences
- Nothing (the brand), Teenage Engineering, Apple, Nuphy / Lofree keyboards
02 — Stack
Engineering
- Framework
- Next.js 16 (App Router, Turbopack) — statically generated pages
- Language
- TypeScript everywhere
- Styling
- Tailwind CSS 3 with CSS-variable tokens for theming
- Motion
- Framer Motion v12
- Content
- MDX + gray-matter, Shiki syntax highlighting via rehype-pretty-code
- Hosting
- Vercel — the chat endpoint runs on the Edge runtime
03 — AI on this site
RAG over my own corpus
- Endpoint
- Next.js Edge route — POST /api/chat streams Server-Sent Events token by token
- Retrieval
- Upstash Vector with server-side embeddings — top-6 chunks of a ~180-chunk corpus per question
- LLM
- Claude Sonnet 4.5 via the Anthropic SDK, answering in my voice, grounded to retrieved context only
- Guardrails
- Strict grounded system prompt, context treated as data (not instructions), input validation, per-IP rate limit via Upstash Redis
- Sources indexed
- Role-specific résumés, all 10 project case studies, a persona FAQ, and every essay
- Citations
- Each answer cites the retrieved sources it drew from
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 page is prerendered at build time — only the chat API runs on demand
- Bundle
- Framer Motion is the heaviest dep; the chat widget is lazy-loaded off the critical path
- 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. More work on GitHub. Influences acknowledged — anything original is mine; anything elegant is borrowed from people who do this for a living.