zaidxshaikh (this portfolio)

Featuredai

The site you're reading. WebGL hero, ⌘K command palette, streaming AI chat grounded in my resume, recruiter-mode audience switching. Next 15 + R3F + Groq.

Next.js 15React 19Three.jsR3FTailwind 4GroqVercel AI SDK

A portfolio designed to be screenshot-worthy in the first three seconds.

The problem

Most developer portfolios are 'safe' — project cards, scroll animations, theme toggle, contact form. They blend together. I wanted a site that gave a recruiter, a fellow dev, and a potential client three different reasons to remember it — and to share it.

The approach

Designed around four hooks: a WebGL hero you've never seen on a CV, a ⌘K command palette so power users feel at home, a streaming AI chat grounded in my actual resume so the site can answer questions while I sleep, and audience switching (`?as=recruiter|dev|client`) that retints the 3D scene and reorders the content. Then added six themes selectable from the palette, dynamic OG images per project, view transitions on navigation, and a Konami easter egg for the people who actually look.

Tech decisions

Next.js 15 + React 19

App Router with server components keeps the JS bundle lean; React 19 concurrent rendering pairs cleanly with streaming AI and R3F

Three.js + R3F

Declarative 3D fits React's mental model; the hero is the hook

Tailwind 4 with @theme OKLCH

Perceptually uniform color tokens make the 6-theme studio trivial

Groq + Vercel AI SDK

Sub-300ms TTFT streaming on the free tier — the AI chat actually feels live

Build-time RAG context (no vector DB)

At resume scale, flattening profile + projects + experience into a ~6KB system prompt outperforms a vector DB and removes a dependency

Upstash Redis sliding-window rate limit

Free tier; protects the chat endpoint from abuse without blocking real visitors

Outcomes

WebGL hero with 20 project orbs in a glyph field
⌘K palette with 35+ commands, theme studio, deep-linkable state
Streaming AI chat grounded in resume — answers questions 24/7
Audience switching (recruiter / dev / client) reshapes the experience
6 themes with smooth body transitions + canvas bg sync
Per-route dynamic OG images, view transitions, Konami easter egg

What I learned

A portfolio is a product. Treat it like one: hooks in the first three seconds, depth for the people who linger, and one signature feature per visitor archetype. Everything else is polish on top of the foundation.