Dual-Mode Portfolio (GUI + Terminal)

Published: (January 30, 2026 at 02:01 PM EST)
2 min read
Source: Dev.to

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.

Back to Blog

Related posts

Read more »