Dual-Mode Portfolio (GUI + Terminal)

How I Built It

I built this using the Gemini API for various tasks, such as generating code for each function and verifying all the features.

Tech Stack

• 
  Frontend: React, TypeScript, Tailwind CSS


• 
  Backend: Node.js (Express)


• 
  AI: Google Gemini 2.0 Flash


• 
  Infrastructure: Docker, Google Cloud Run

Design Decisions

I built a custom "Window Manager" system in React to handle the switching between GUI and Terminal modes.

1. 
   State Management: The app preserves command history and window state when switching modes, just like a real desktop environment.


2. 
   AI Integration: I set up a Node.js backend to securely proxy requests to the Gemini API. The AI acts as geminicli, a system daemon. I engineered a custom system prompt that gives the AI a personality; it knows my resume, my tech stack, and even my future plans (like building a high-performance chess engine).


3. 
   Shortcuts: I implemented global keyboard listeners so you can toggle the AI assistant anytime with Ctrl + Space.

What I'm Most Proud Of

1. The Terminal Emulator

It is a faithful replica of a terminal, complete with the Arch Linux logo. It supports all the basic commands like ls, man, clear, and whoami, as well as custom CLI tools I use like btop and geminicli.

2. AI Assistant

This AI assistant can tell you more about me as a person and provide details that you might have missed in this portfolio. It was quite a challenge to handle the API reliability, so I built a fallback system in the backend that automatically tries multiple Gemini models (2.0 Flash, 1.5 Flash, etc.) in sequence.

3. The "Dual Mode" Experience

I'm proud that I managed to get both the GUI and Terminal to work together in a single Docker container.