guest-portfolio.dev: A Terminal-Themed Developer Portfolio

guest-portfolio.dev is a browser-based personal portfolio that looks, feels, and behaves exactly like a Unix terminal — no backend, no framework router, no gimmicks. Visitors land on a BIOS boot sequence, log in as guest, and then explore your work by typing real commands: ls, cd, cat, git log, man, mail, and more. Every interaction is handled entirely in React, rendered in the browser, and styled to replicate the warm phosphor glow of a vintage CRT monitor.

Try it live before you fork it. The demo portfolio at guest-portfolio.dev is itself running the same codebase you’ll be customizing.

Key Features

Interactive Unix Commands

The terminal parses every keystroke through a custom command handler in Terminal.js. Supported commands out of the box:

Command	Description
`help`	Print all available commands
`ls [dir]`	List directory contents with Unix-style permissions, size, and date columns
`cd [dir]`	Navigate the virtual filesystem
`cat [file]`	Read a file’s content inline
`whoami`	Render an ASCII-art `neofetch`-style bio panel (same as `cat about.md`)
`./skills.sh`	Animate a progress-bar skills dashboard by category
`git log`	Display a styled commit-log view of your career history
`man [page]`	Open a full `man`-page-style case study
`mail`	Launch a vim-style contact form (`:wq` to send, `:q!` to abort)
`theme [green\|amber]`	Switch color themes at runtime
`clear`	Wipe the history buffer
`sudo`	Easter egg — try `sudo make me a sandwich`
`matrix`	Trigger a 5-second Matrix rain easter egg
`cowsay [text]`	Because of course
`vim` / `emacs` / `nano`	Redirects you to `mail`

Any unrecognized input returns command not found: <input> in red. The prompt format mirrors a real shell session:

guest@portfolio.dev:~$
guest@portfolio.dev:~/projects$

The cwd segment (shown in amber) updates live as you cd through the filesystem.

CRT Monitor Visual Effects

The entire UI sits inside a .crt-container with a layered .crt-overlay that stacks three distinct effects:

Scanlines — a linear-gradient tiling at 4px height creates horizontal scan-line banding across the full viewport.
Sweeping scanline animation — a @keyframes scanline animation (8 s, linear, infinite) moves a semi-transparent stripe from top to bottom, simulating the electron-beam refresh of an old phosphor display.
Screen curvature — .crt-curvature applies border-radius: 16px and an inset box-shadow to replicate the barrel distortion of a curved glass CRT tube.
Phosphor glow — every text element inherits text-shadow: 0 0 5px var(--color-glow) from .crt-content, making characters bloom outward on dark backgrounds.
Flicker animation — .crt-flicker applies @keyframes flicker at 0.15 s to simulate capacitor-discharge instability.
Power-on effect — @keyframes turn-on squashes the screen to scaleY(0.001) at maximum brightness, then expands it to full scale over 4 seconds, re-creating the vertical collapse of a CRT powering off in reverse.

Boot Sequence Animation

Before the terminal appears, a BootSequence component replays a full BIOS POST screen line by line, with randomized per-line timing (50–250 ms) to feel authentic:

BIOS Date 10/24/98 14:22:10 Ver 08.00.15
CPU: GenuineIntel(R) Processor - 400MHz
Speed: 400MHz
Memory Test: 65536K OK

Initializing USB Controllers .. Done.
Auto-Detecting Pri Master .. IDE Hard Disk
Auto-Detecting Pri Slave  .. Not Detected
Auto-Detecting Sec Master .. ATAPI CD-ROM

Booting from Hard Disk...
Loading OS kernel...
[ OK ] Started System Logging Service.
[ OK ] Started Network Manager.
[ OK ] Reached target Network.
[ OK ] Started SSH Daemon.

Welcome to DEV-OS v2.4.1 (tty1)

guest@portfolio.dev login: guest

After guest is typewritten on the login line, the isBooting flag clears and the terminal fades in.

Dual Color Themes

Themes are driven entirely by CSS custom properties, toggled by adding or removing the theme-amber class on <body> via the TerminalContext:

/* Default — phosphor green */
:root {
  --color-primary: #39ff14;
  --color-bg:      #000000;
  --color-dim:     rgba(57, 255, 20, 0.3);
  --color-glow:    rgba(57, 255, 20, 0.5);
}

/* Amber variant */
.theme-amber {
  --color-primary: #ffb000;
  --color-dim:     rgba(255, 176, 0, 0.3);
  --color-glow:    rgba(255, 176, 0, 0.5);
}

Switch at runtime with theme green or theme amber. The Command Palette sidebar also exposes theme toggle buttons.

Simulated Filesystem

utils/fileSystem.js defines a plain JavaScript object tree that the ls, cd, and cat commands traverse at runtime — no server, no database. Every node carries Unix-style metadata:

~/ (home)
├── about.md
├── skills.sh
├── projects/
│   ├── terminal-portfolio.md
│   └── mainframe-ai.md
├── blog/
│   ├── why-i-love-vim.md
│   └── leaving-the-ui-behind.md
├── references.log
└── case-studies/
    └── migration-to-k8s

Each node records permissions, size, date, and (for files) content. Directory listings render the full Unix column format; cat on a file streams its content straight into the terminal history.

Vim-Style Contact Form

Running mail opens an in-terminal editor component (MailOutput.js) that mimics Vim’s modal editing:

Starts in INSERT mode — type your message freely.
Press Escape to enter NORMAL mode.
Type :wq and press Enter to “send” (triggers a fake SMTP handshake animation).
Type :q! and press Enter to abort without sending.

Command Palette Sidebar

A collapsible CommandPalette sidebar (visible on lg screens) lists clickable quick-commands. Clicking any entry calls executeCommand from TerminalContext, which replays it through the same command handler as keyboard input — including ls projects/, git log, and mail. A SYSTEM section at the bottom provides one-click theme switching.

Tech Stack

Layer	Technology
UI framework	React (no router, no meta-framework)
Build tool	Vite
Styling	Tailwind CSS + custom CSS variables
Font	VT323 (Google Fonts) — monospace bitmap-style
State	React Context (`TerminalContext`)
Filesystem	Plain JavaScript object tree
Deployment	Static files — GitHub Pages, Netlify, Vercel, or any CDN

The project has no backend and no runtime dependencies beyond a static file host. All content lives in JavaScript source files, which means personalizing the portfolio is a matter of editing a handful of .js files — no database, no CMS, no API keys.

Explore Further

Quickstart

Fork, customize, and deploy your own terminal portfolio in minutes.

Commands Overview

Full reference for every built-in command, its flags, and its output components.

Terminal Component

Deep-dive into how Terminal.js parses input, manages history, and renders output.

Theming

Swap color schemes, add new themes, and customize CRT effects via CSS variables.

Overview

Terminal Commands

Components

Customization

guest-portfolio.dev: A Terminal-Themed Developer Portfolio

Key Features

Interactive Unix Commands

CRT Monitor Visual Effects

Boot Sequence Animation

Dual Color Themes

Simulated Filesystem

Vim-Style Contact Form

Command Palette Sidebar

Tech Stack

Explore Further

Quickstart

Commands Overview

Terminal Component

Theming

Build docs developers (and LLMs) love

Overview

Terminal Commands

Components

Customization

Documentation Index

​Key Features

​Interactive Unix Commands

​CRT Monitor Visual Effects

​Boot Sequence Animation

​Dual Color Themes

​Simulated Filesystem

​Vim-Style Contact Form

​Command Palette Sidebar

​Tech Stack

​Explore Further

Quickstart

Commands Overview

Terminal Component

Theming

Build docs developers (and LLMs) love

Key Features

Interactive Unix Commands

CRT Monitor Visual Effects

Boot Sequence Animation

Dual Color Themes

Simulated Filesystem

Vim-Style Contact Form

Command Palette Sidebar

Tech Stack

Explore Further