This website serves as both my professional portfolio and a playground for experimenting with the latest web technologies. Coming from a background in games, I was excited to bring my skills to the web world and build a website that was optimized and felt good to navigate and use.

I chose TanStack Start as the backbone for its incredible type safety and full-stack capabilities, allowing me to treat the frontend and backend as a cohesive unit rather than disparate parts.

AI Chatbot Integration

To make this portfolio truly interactive, I implemented a custom AI Agent that allows recruiters to chat directly with a "digital twin" of myself.

Powered by Vercel's AI SDK and Google Gemini 2.5. It's more than just a simple chatbot, it's a true ai agent! Using an agentic loop, the ai can scan my projects, perform tool calls, and reply with the correct structured data to give the user easy to use inline components like cards to the projects themselves.

• Context-Aware: The bot is fed a "Knowledge Base" derived from these very project files, ensuring it answers questions accurately about my specific experience.
• Cost-Effective Architecture: By leveraging the Gemini API's efficiency and Vercel's serverless functions, the entire system runs with zero fixed costs while maintaining low latency.

Tech Stack & Architecture

This project was built using a "performance-first" mindset, leveraging:

• TanStack Start: For type-safe routing and server-side rendering.
• Three.js & React Three Fiber: For the 3D interactive elements.
• Framer Motion: For layout animations and gestures.
• Tailwind CSS: For a scalable, utility-first design system.

The Power of Loaders

One of the biggest wins in this project was utilizing TanStack's loader pattern. Instead of waterfalling requests or creating layout shifts while data fetches, the loaders ensure that critical data (like the project list you are reading right now) is pre-fetched and ready before the route even renders.

This eliminates the "pop-in" effect common in SPAs and makes navigation feel instant—a small detail that dramatically improves perceived performance.

Optimized Animations

For the UI transitions, I used Framer Motion's whileInView prop. By setting viewport={{ once: true }}, we ensure that the browser only expends resources animating elements when they actually enter the viewport. It saves processing power on the initial load, keeping the Time to Interactive low—similar to occlusion culling in game engines.

The Interactive 3D Avatar

The centerpiece of the landing page is the interactive 3D head. This wasn't just a static model drop; it required a custom pipeline between Blender and React Three Fiber.

I modeled the head in Blender and baked multiple distinct texture maps for different states (neutral, reactive, glitch, etc.). Instead of loading heavy geometry for facial deformations, I swap these textures at runtime based on various states and user interactions.

This approach keeps the vertex count low while still delivering aesthetic visuals and feedback to the user, mimicking the efficiency of UV-swapping techniques used in retro game development.