DEV Community

Rishon K Roshan
Rishon K Roshan

Posted on

Dual-Mode Portfolio (GUI + Terminal)

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I'm Rishon! I'm a full-stack engineer (MERN). Currently, I'm 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.

Portfolio

https://portfolio-1027678755768.us-central1.run.app

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.

Top comments (0)