Termfolio: An Interactive Terminal Portfolio

[+] Status: Complete [+] Origin: Portfolio Project [+] Date: 2026.01
>> TECH_STACK:
[React 19][TypeScript][Vite][xterm.js][ANSI Escape Sequences]

Termfolio is an interactive terminal-themed portfolio website. Instead of scrolling through cards and sections, visitors navigate a virtual filesystem using real shell commands. Every project, blog post, and piece of content is a file or directory you can cd into, ls, and cat.

The terminal isn't a gimmick. It's a full shell implementation with tab completion, command history, line editing, and URL-based routing. Visit termfolio.solomonneas.dev/projects and it automatically runs cd projects && ls. The whole thing is a React app with xterm.js doing the heavy lifting on rendering.

Live Terminal

Try it yourself. Type help to get started.

Launch Terminal
Open Source

This project is open source and available on GitHub

View Repository 36 Commits Star on GitHub

React application with a custom shell implementation running on xterm.js:

React 19 + TypeScript
Application Framework

Component architecture for terminal UI, virtual filesystem state management, and URL-based routing that maps browser paths to shell commands

xterm.js
Terminal Emulator

Full-featured terminal rendering with FitAddon for responsive sizing, WebLinksAddon for clickable URLs, and raw keystroke handling for shell line editing

Virtual Filesystem
Data Layer

In-memory filesystem tree with directories, files, and symlinks. All portfolio content (projects, blog posts, dotfiles) lives as navigable files

ANSI Escape Sequences
Styling Engine

Raw terminal color codes for syntax highlighting, status indicators, and themed output. Multiple color themes with real-time switching

Navigation
ls [-l] [-a] [path]List directory contents
cd [path]Change directory
pwdPrint working directory
tree [path]Display directory tree
File Operations
cat <file>Display file contents
grep <pattern> [path]Search for patterns
head / tailView file start/end
Information
helpShow all commands
whoamiDisplay user info
historyCommand history
man <cmd>Command manual
Easter Eggs
???Try sudo, cowsay, fortune, matrix...
???12+ hidden commands to find
???Explore the dotfiles
UX Design Terminal as Navigation
Problem: Traditional portfolio sites feel the same: hero section, project cards, contact form. Nothing memorable.
Solution: Built a fully interactive terminal where visitors use real shell commands (ls, cd, cat) to explore projects, read blog posts, and discover easter eggs. URL routing means /projects runs 'cd projects && ls' automatically, so direct links still work.
Result: Visitors actually explore instead of scrolling. Average session depth is significantly higher than the static portfolio.
Shell Implementation Real Shell Behavior
Problem: Fake terminals that only accept exact command strings feel broken. Users expect real shell editing.
Solution: Implemented full line editing: arrow keys, Home/End, Ctrl+A/E/U/K/W, command history with Up/Down, and tab completion for both commands and filesystem paths. Handles edge cases like cursor mid-line insertion and multi-word tab completion.
Result: Anyone who's used a terminal feels immediately at home. No learning curve, no friction.
Content Architecture Filesystem as CMS
Problem: Portfolio content needs to be easy to update without touching UI code
Solution: All content is defined as filesystem entries: projects are directories with README.md files, blog posts are files in /home/solomon/blog/, dotfiles contain config and preferences. Adding a project means adding a directory entry to the data layer.
Result: Content updates don't touch the shell, terminal, or UI code. Clean separation of data and presentation.
Discovery 12+ Easter Eggs
Problem: Portfolios are forgettable. People visit, skim, leave.
Solution: Hidden commands and secrets scattered throughout: try 'sudo', 'rm -rf', 'cowsay', 'fortune', 'matrix', or explore hidden dotfiles. Each easter egg is a small moment of delight that rewards curiosity.
Result: People share the easter eggs. The terminal becomes a conversation starter, not just a resume.
Frontend Engineering
  • React 19 component architecture
  • TypeScript strict mode
  • Vite build pipeline
  • Responsive terminal rendering
Terminal Emulation
  • xterm.js integration
  • Raw keystroke handling
  • ANSI escape sequence rendering
  • FitAddon responsive sizing
Shell Implementation
  • Command registry pattern
  • Tab completion engine
  • History navigation
  • Virtual filesystem traversal
Creative Development
  • URL-to-shell routing
  • Easter egg design
  • Theme system
  • ANSI art rendering
Complete
  • ✓ Full shell with line editing and history
  • ✓ Tab completion for commands and paths
  • ✓ Virtual filesystem with all portfolio content
  • ✓ URL-based routing to shell commands
  • ✓ Multiple color themes
  • ✓ 12+ easter eggs and hidden commands
  • ✓ Responsive terminal with FitAddon
  • ✓ Deployed to termfolio.solomonneas.dev