A full-stack portfolio site built to demonstrate exactly what I build for clients - not screenshots, not mockups, a live product you can interact with. Scroll-driven animations, a 3D WebGL hero, physics-based visualizations, and an embedded AI assistant that answers questions about my work in real time. Built on the latest versions of Next.js, React, and Tailwind CSS to show current, production-grade skills.

Most developer portfolios are static brochures. A list of projects, a PDF resume, some tech stack logos. Clients have no way to verify whether the work is real, whether the developer communicates clearly, or whether they actually understand what they claim to have built.

I wanted my portfolio to be a live demonstration of what I build - not a description of it. Every animation, interaction, and feature on the site is something I can build for a client.

The site is built around interactive 3D visuals and scroll-driven motion throughout. The hero is a real-time 3D grid rendered with Three.js and React Three Fiber, with cursor tracking and live interaction. The stats section uses a physics engine (Matter.js) for chip-stacking animations and a Three.js neural network visualization. An interactive SVG character in the contact section tracks cursor movement and responds to gestures. Particle burst effects on clicks, Typed.js text animations, GSAP ScrollTrigger for parallax - every section has motion built in, not added as an afterthought.

Multiple visual modes are built into the site for different audiences.

Desktop and mobile are not the same experience scaled to different screen sizes. On desktop, interactions are driven by scroll progress and cursor position - GSAP ScrollTrigger controls every animation, and the 3D hero responds to where the cursor is on the page. On mobile, the 3D hero switches to gyroscope-based tilt using the device orientation API - move your phone and the grid responds in real time. Touch gesture recognition runs throughout the mobile layout. A completely separate mobile layout handles the structure, navigation, and section flow.

This dual-behavior approach - scroll and cursor on desktop, gyroscope and gesture on mobile - is not common in portfolios. Most sites just shrink the desktop view. This one has a purpose-built mobile experience.

 The standout feature is an embedded AI assistant that knows everything about my work. It is not a generic chatbot. It reads from a compiled knowledge base covering my projects, tech stack, services, past clients, testimonials, and FAQ. Every answer is grounded in real data - not improvised.

Ask whether I have built something like your project before. Ask about pricing, availability, or a specific technology. It answers with context and offers to take you to the relevant section of the site.

Under the hood: a custom LLM gateway with HMAC-SHA256 authentication, rate limiting per IP, prompt injection detection, token-budgeted context with conversation history, and structured JSON responses that render as typed UI blocks - text, lists, badges, CTA buttons that scroll to the right section. The same production patterns I apply when building chatbots for clients.

A portfolio that demonstrates the service is more convincing than one that describes it. Clients can see exactly how I approach animation, 3D graphics, and AI integration - from the product itself, not a list of claims.

Separate desktop and mobile experiences are worth the extra build time. The gyroscope interaction on mobile consistently gets noticed first. It signals craft before the visitor reads a single word.

Structured JSON responses from LLMs are the right pattern for embedded chatbots. Freeform text creates inconsistent UI. Typed response blocks let the frontend render correctly every time, regardless of what the model returns.

Knowledge-base grounding is the difference between a useful assistant and a hallucinating one. The system prompt is compiled from actual project data, not written from memory. Rate limiting and prompt injection detection are not optional for any public-facing chatbot.

 Next.js 16, React 19, TypeScript, Tailwind CSS 4, Three.js, React Three Fiber, GSAP, Matter.js, Framer Motion, Typed.js, OpenAI API (custom LLM gateway), Zod, Resend