cli-portfolio

A Linux-style interactive CLI portfolio that runs in the browser. It simulates a terminal session to showcase how you think about systems, tooling, and architecture rather than presenting a traditional visual portfolio.

Live demo: https://cli-portfolio-beta.vercel.app/

Features

• Linux/Unix-like command-line interface rendered in React
• Command-based navigation (help, ls, cat, clear, theme, etc.)
• Fake in-memory filesystem for content:
  • about, projects, skills, achievements, and related sections
• TAB-based autocomplete with suggestions
• Command history with keyboard navigation
• Persistent state (theme, history, and other settings) via localStorage
• GNOME-style terminal look and feel (colors, fonts, window chrome)
• Modular architecture:
  • commands for behavior
  • filesystem for content
  • themes for appearance
  • storage for persistence
• Built as an engineering artifact to demonstrate implementation choices, not as a marketing page

Tech stack

• Frontend: React, Vite
• Language: JavaScript (ESNext)
• Styling: CSS (terminal-inspired theme)
• Storage: localStorage for persistence

Available commands

The CLI exposes a small, discoverable command surface. Core commands include:

• help — list available commands and short descriptions
• ls — list files/directories in the fake filesystem
• cat <file> — view content such as about, projects, skills, achievements
• theme <name> — switch between terminal themes
• clear — clear the screen
• history — show recent commands

Use help inside the app for the full, up-to-date command list and usage.

Why a CLI portfolio

• Aligns with interests: Mirrors daily tooling (shells, CLIs, Linux) and systems work.
• Emphasizes behavior over visuals: Focuses on interaction design, state management, and architecture instead of UI-heavy design.
• Demonstrates engineering decisions: Makes trade-offs around parsing, command routing, state persistence, and modularity explicit.
• Close to real tools: The same patterns can be applied to production CLIs, REPLs, and internal developer tools.

How to run locally

Prerequisites: Node.js (LTS) and npm.

# install dependencies
npm install

# start development server
npm run dev

Then open the printed local URL (usually http://localhost:5173) in your browser.

To build for production:

npm run build
npm run preview

Future improvements

• Add more commands (e.g. grep, man, open <link>) for richer exploration
• Improve autocomplete to support subcommands and flags
• Extend the fake filesystem with nested directories and symlinks
• Add tests around command parsing, routing, and state persistence
• Optional analytics event hooks for command usage (opt-in only)

License

License information will be added here.