Dhruv's Sketchbook

The source for whoisdhruv.com, an interactive portfolio built as a hand-drawn engineering sketchbook. It combines a command-line interface, grounded multimodal AI chat, project case studies, custom speech, a public guestbook, and a small discovery layer that rewards exploration.

Visit production · Preview staging · Read the app guide

Screenshots

Home and terminal	Project wall

Experience

• Sketchbook interface: responsive light and dark themes, page-turn transitions, tactile details, a command palette, keyboard shortcuts, and optional sound effects.
• Interactive terminal: navigates the site, opens content, changes UI state, and hides a few surprises behind a familiar shell vocabulary.
• Grounded AI chat: answers from a local Markdown fact corpus and committed embedding fallback instead of inventing portfolio details.
• Multimodal model picker: switches between Groq Qwen and seven NVIDIA-hosted models, exposing image attachment only when the active model supports vision.
• Voice in and out: local browser transcription, a custom Pocket TTS server voice, persistent generated-audio caching, and device-speech fallback.
• Real product surfaces: project modals, resume and Markdown routes, stickers, settings, a GitHub-backed guestbook, and private feedback workflows.
• Machine-readable content: public Markdown and llms.txt routes make the portfolio useful to people, crawlers, and AI clients.

Some commands and interactions intentionally remain undocumented so the site keeps its discovery layer.

AI Chat

The chat boundary is deliberately narrow: model and provider IDs are server-allowlisted, provider keys never reach the browser, assistant history is signed before reuse, requests are origin-checked and rate-limited, and remote replies are sanitized before rendering.

Image attachments are request-scoped and never persisted to local storage. Before upload, the browser:

1. Accepts JPEG, PNG, or WebP files up to 10 MB.
2. Corrects browser decoding and renders onto a high-quality canvas.
3. Downscales the longest edge to at most 1280 px.
4. Encodes JPEG at a quality floor of 0.60, progressively reducing dimensions until the image is at most 128 KiB.

This keeps enough detail for screenshots and visual questions while reducing base64 overhead, provider latency, and request-size failures. Vision requests retain an image-capable online fallback when the selected provider is unavailable.

Models

Chat Actions

The LLM is not given arbitrary browser or operating-system access. Recognized requests resolve through a deterministic, validated action layer with six tool families:

Action chips and contextual follow-up suggestions cover the same allowlist, so suggested actions cannot grant capabilities beyond those the router already validates.

Architecture

flowchart LR
	Browser[Browser] --> Edge[Cloudflare]
	Edge --> Nginx[Nginx on Linux VMs]
	Nginx --> Next[Next.js standalone server]
	Next --> BrowserUI[React client and App Router]
	Next --> Routes[API routes]
	Routes --> Retrieval[Markdown facts + embeddings]
	Routes --> Providers[Groq and NVIDIA APIs]
	Routes --> GitHub[Guestbook and feedback workflows]
	Routes --> TTS[Pocket TTS gateway]
	BrowserUI --> Whisper[Browser Whisper worker]

Stack

• Next.js 16 App Router, React 19, and strict TypeScript 5
• Tailwind CSS 4, Framer Motion 12, and Lucide icons
• Groq SDK plus OpenAI-compatible NVIDIA and optional legacy providers
• Transformers.js for local transcription and Pocket TTS 2.1 for server speech
• Vitest 4 and ESLint 9
• Dockerized standalone output on Linux VMs behind Cloudflare and Nginx

Local Development

Requirements: Node.js 22 or newer and npm 10.9.8.

git clone https://github.com/Dhruv-Mishra/dhruvwebsite.git
cd dhruvwebsite/portfolio
npm install
npm run dev

Open http://localhost:3000. The committed embedding bundle supports local builds without provider credentials; online chat, GitHub workflows, and custom speech require their corresponding server-side configuration.

Configuration, container setup, Pocket TTS requirements, and deployment contracts are documented in portfolio/README.md.

Repository

portfolio/app/              pages, public routes, and API handlers
portfolio/components/       sketchbook UI and interactive surfaces
portfolio/content/facts/    retrieval corpus for grounded chat
portfolio/context/          React providers
portfolio/hooks/            client controllers and persistence
portfolio/lib/              models, actions, integrations, and tests
portfolio/public/           fonts, media, sounds, and static assets
portfolio/scripts/          build, smoke-test, and deployment tooling
docs/screenshots/           curated GitHub screenshots

Deployment

Development is promoted through environment branches:

dev/lkg -> deployed/staging -> deployed/production

• deployed/staging deploys Docker images to staging.whoisdhruv.com.
• deployed/production deploys to whoisdhruv.com after the production environment gate.
• Each environment has separate signing, access, provider, and speech credentials.
• Deploy workflows validate VM identity and image architecture, run health checks, verify the deployed SHA, and retain rollback releases.

Cloudflare provides the public edge; Nginx routes traffic to the standalone Next.js service on the VM fleet. The complete operational contract lives in portfolio/README.md.

Contributing

Start with AGENTS.md, then read the nearest directory-level guide before editing. Preserve the runtime Markdown routes, retrieval corpus, hidden discovery layer, theme support, accessibility, and mobile behavior. Run lint, type checking, and relevant Vitest coverage before opening a pull request.