Overview
An innovative 3D portfolio experience that transforms the traditional resume into an interactive recruitment simulator. Built with Three.js and powered by Google's Gemini AI, this project allows recruiters to explore my background through natural conversations with three AI personas representing different aspects of my skill set.
Key Features
- Immersive 3D Environment: California-style office with custom lighting, furniture, and ambient elements
- Three AI Personas: Technical PM, Product Leader, and Innovation Designer variants of myself
- Real-time AI Conversations: Context-aware responses grounded in my actual work experience using Gemini 2.0 Flash
- Smart Context Engine: Automatically surfaces relevant projects, metrics, and technologies from my portfolio
- Persistent Conversations: LocalStorage + optional Redis integration for cross-session memory
- FAQ Analytics: Tracks most-asked questions to improve responses over time
- Built-in Debugging: Performance monitors, API health checks, and comprehensive test suite (Ctrl+Shift+D/T/P)
Technical Architecture
Frontend (Three.js + Plain JS)
- Custom character rendering with procedural animations (walking, dancing, "tripping")
- First-person camera controls with WASD movement and mouse/arrow look
- Collision detection and interaction proximity system
- Dynamic UI with dialogue boxes, question suggestions, and custom input
- Performance monitoring with FPS counter and memory tracking
Backend (Next.js API Routes)
- Route:
/api/simulator/chat
- Main AI endpoint - Model: Google Gemini 2.0 Flash (640 token responses, temperature 0.6)
- Context Building: Pulls from
resume.tsx
(skills, work history) andprojects/*.mdx
(recent projects with tech stacks) - Guardrails:
- Strictly grounded in portfolio context (no hallucinations)
- Deflects overly personal questions
- Redirects off-topic queries back to relevant experience
- First-person tone, 2-3 paragraph responses with metrics
- Rate Limiting: Token bucket (10 req/min per IP)
- Validation: Input sanitization, 500-char limit, origin checks in production
Prompt Engineering
Engineered system prompt to:
- Respond as me in simulated interview scenarios
- Tailor responses by persona (technical, leadership, design)
- Include markdown links to specific project pages when relevant
- Handle common interview questions ("Tell me about yourself", "Walk me through Project X", etc.)
- Maintain professional yet conversational tone
Optional Integrations
- Upstash Redis: Cross-session chat history and FAQ analytics
- Environment Variables: Accepts both
GOOGLE_API_KEY
andGOOGLE_AI_API_KEY
for flexibility
Innovation Highlights
- Context-Aware AI: Unlike generic chatbots, responses are grounded in my actual resume/projects, ensuring accurate representation
- Persona-Based Emphasis: Three characters highlight different skill dimensions (technical depth, leadership impact, design thinking)
- Recruiter-Friendly UX: Sample questions reduce friction; custom input allows open-ended exploration
- Production-Ready Error Handling: Clear error messages, no silent fallbacks, robust origin validation
Impact & Use Cases
- Engagement: Transforms static portfolio into memorable interactive experience
- Filtering: Lets recruiters self-qualify interest by exploring specific skills/projects
- Scalability: AI handles unlimited concurrent "interviews" without my time
- Analytics: Tracks which questions/projects generate most interest
- Differentiation: Stands out in competitive PM/tech roles by demonstrating technical + product thinking
Technical Challenges Solved
- API Key Security: Dual env var support, production-only origin checks, server-side-only key access
- Fallback Strategy: Removed canned responses to ensure AI-first experience; surfaces errors explicitly
- Context Management: Balance between rich context (resume + projects) and token limits
- Conversation Memory: Hybrid approach (browser localStorage + optional Redis) for stateless scalability
- Performance: Optimized Three.js scene to maintain 60 FPS with character AI, physics, and UI
Future Enhancements
- Streaming responses for longer answers
- Voice input/output for accessibility
- Multiplayer mode (multiple recruiters in same space)
- Analytics dashboard for portfolio owner
- Mobile touch controls optimization
Try it live: naoiselaw.com/simulator
Debug shortcuts: Ctrl+Shift+T (tests), Ctrl+Shift+D (debug console), Ctrl+Shift+P (performance)
Downloads
- Live DemoDownload (Interactive Experience)
- Technical ArchitectureDownload (2.1 MB)
Files are served from /public or external URLs.
Related Projects

Reddit Racism Analyzer: AI-Powered Content Moderation
🏆 LSE Code Camp 2025 Overall Winner. Revolutionary AI content moderation system achieving 85%+ accuracy in racism detection. Ensemble of 3 specialized models analyzing 100+ posts in <60 seconds, reducing false positives by 40% through context-aware analysis.

Siemens Innovation Proposal Sorting System
AI-powered classification system designed to automate evaluation and sorting of innovation proposals for Siemens innovation wing.