How this site is built — the full technical stack, design philosophy, and everything in between.
App Router, React Server Components, Partial Prerendering, Turbopack. The backbone of every page.
Server Actions, concurrent features, and the new use() hook. Renders on the server wherever possible.
Strict mode enabled. Every prop, API response, and config shape is typed.
Runtime, package manager, and test runner. Replaced Node.js and npm entirely.
Utility-first CSS with a custom design token system — saffron accent, dark/light theme variables, responsive breakpoints.
Page transitions, scroll-triggered animations, and micro-interactions throughout the UI.
High-performance timeline animations. Used for the hero letter animation and scroll-driven effects.
Consistent, clean icon set. 500+ icons, all rendered as inline SVGs.
3D scene management for the interactive globe, particle systems, and WebGL experiments.
Declarative Three.js renderer for React. Keeps the 3D scene composable with the rest of the UI.
Helper abstractions for React Three Fiber — OrbitControls, environment maps, instanced geometry.
Primary database. Hosted on Neon for serverless scaling with connection pooling via PgBouncer.
Type-safe SQL query builder. Schema-first, zero magic, and the generated queries are readable.
Vector database for the AI search feature and semantic blog post recommendations.
Object storage for media uploads in the admin CMS and resume PDF hosting.
Powers the AI chat assistant, resume tailoring, ATS scoring, and content generation in the admin panel.
Streaming AI responses, structured outputs, and multi-modal inputs. Handles the Claude API integration.
Transactional email for contact form submissions, booking confirmations, and invoice delivery.
Real-time WebSocket events for the admin chat, live notifications, and the typing indicator.
The code editor embedded in the blog writer, contract builder, and MDX content editor.
Runtime schema validation for all form inputs, API routes, and external data.
Linting and formatting enforced on every commit. Strict rules, no exceptions.
This site is a portfolio, but it's also a playground. Every page is an opportunity to push what's possible on the web — 3D renders running alongside server components, AI assistants wired to a real knowledge base, real-time infrastructure visible through the admin panel.
The design language is intentionally minimal: a dark base, a single saffron accent, and generous whitespace. Typography does the heavy lifting. Animations are purposeful — they exist to guide attention, not impress.
Performance is non-negotiable. Server components render on the edge where possible, images are optimized automatically, and the JavaScript bundle is kept lean. The site should feel instant.
The source code for this portfolio is available on GitHub. It's released as a premium template on ThemeForest — you're welcome to study the patterns, but please don't redistribute without a license.
View on GitHub