Dual-Mode Portfolio (GUI + Terminal)
Source: Dev.to
Introduction
This is a submission for the New Year, New You Portfolio Challenge presented by Google AI.
Hi, I’m Rishon! I’m a full‑stack engineer (MERN) currently learning more about low‑level systems engineering. I use Arch Linux and Sway WM daily, so I wanted my portfolio to reflect my Arch setup aesthetic while still being accessible to non‑technical visitors. My goal was to build a site that feels like a home directory—functional, clean, and fast—rather than just a static scrolling page.
Live Demo
https://portfolio-1027678755768.us-central1.run.app
Tech Stack
- Frontend: React, TypeScript, Tailwind CSS
- Backend: Node.js (Express)
- AI: Google Gemini 2.0 Flash
- Infrastructure: Docker, Google Cloud Run
Features
Custom Window Manager
Implemented a React‑based “Window Manager” system that handles switching between GUI and Terminal modes.
State Management
The app preserves command history and window state when switching modes, mimicking a real desktop environment.
AI Integration
A Node.js backend securely proxies requests to the Gemini API. The AI acts as geminicli, a system daemon with a custom system prompt that knows my resume, tech stack, and future plans (e.g., building a high‑performance chess engine).
Global Shortcuts
Implemented global keyboard listeners so the AI assistant can be toggled anytime with Ctrl + Space.
Terminal Emulator
Supports common commands such as ls, man, clear, and whoami, as well as custom CLI tools I use like btop and geminicli.
AI Assistant
Provides contextual help and code generation directly within the terminal interface.
Dual‑Mode Experience
Seamlessly switches between a graphical UI and a terminal interface, offering both visual and command‑line interactions in a single portfolio site.