I recently added two interactive experiences to my portfolio: a fully playable retro-style game called Slime Slayer 2D and an intelligent AI Chatbot Assistant. Here is how I brought them together with React, TypeScript, HTML5 Canvas, and the Gemini API.
1. Slime Slayer 2D: A Canvas Game Engine in React
Instead of relying on heavy third-party game frameworks, I built a custom, zero-dependency 2D top-down game engine using the native HTML5 Canvas API coupled with React.
- Rendering & Animation: The player controls a GBA-style visor knight with procedural leg walking animations. Enemies are hopping green slimes. Everything is rendered frame-by-frame with black outlines for a clean retro aesthetic.
- Audio Synthesis: To keep bundle sizes minimal and avoid loading external audio files, I used the browser's Web Audio API to synthesize 8-bit sound effects (slashing, dashing, shield activation, hit impacts, and dying) dynamically.
- Key Combos & Action System: The game tracks specific sequences of keypresses to execute powerful combat abilities:
3then1(Dash then Slash) → Dash & Slice: Dash forward with purple particle trails, executing a 360-degree spin attack.1-1-1→ Grand Tempest: Unleashes 3 piercing teal wind slashes forward.1-1-2→ Fire Fan: Fires a spread of 3 hopping fireballs.1-3-4→ Divine Aegis: Heals 30 HP and grants a temporary invincibility shield.
- UI Integration: The game is rendered outside the standard layout hierarchy using React Portals (
createPortal) to launch a responsive, full-screen overlay when the player clicks the button under my profile picture.
2. Portfolio AI Assistant: Powered by Gemini 3.5 Flash
To let visitors ask questions about my background, projects, or how to play the game, I built a dedicated AI chatbot. The backend uses the gemini-3.5-flash model.
- High-Context Prompts: The system prompt dynamically reads my structured resume data directly from the codebase (ensuring it never goes stale when I update my resume).
- Game Mechanics Knowledge: The chatbot is instructed on the exact combo keystrokes and lore of Slime Slayer 2D, so it can guide users on how to beat the high scores.
- Focused Constraints: To ensure the assistant is secure and relevant, it is strictly forbidden from answering off-topic queries (such as general programming questions, math, or history) and will politely redirect users to ask about my portfolio.
The Result
Adding these features made my portfolio not just a static sheet of text, but a living, interactive playground. Feel free to open the chatbot in the corner or launch Slime Slayer to test out the combos yourself!