TERMX — Browser Terminal Portfolio (Termfolio)
Termx (based on the open termfolio template) is a static SPA that looks and behaves like a real terminal: typed commands, tab completion, command history, and portfolio content rendered as terminal output. Everything is data-driven from config—commands, themes, fonts, and copy—so the same engine can ship as a personal site or a forkable starter. Styling uses CSS variables and Tailwind; state lives in Zustand with preferences persisted in localStorage. The experience is frontend-only: no API, no accounts, no tracking.
Role
Author & Developer
Year
2026
Category
Web
Tech Stack
TypeScript
Tailwind CSS
Framer MotionThe Problem
Recreate a convincing terminal inside the browser without sacrificing accessibility, mobile usability, or performance. That meant a solid command parser and registry, predictable keyboard shortcuts, theme switching without flash, and readable contrast across a dozen color schemes—while keeping the bundle lean enough for fast loads.
The Approach
Built a small command framework (parse → dispatch → render typed output) with core, portfolio, system, and fun command groups. Added theme and font pickers backed by a shared design token map, framer-powered micro-interactions where they help, and tests with Vitest for critical paths. Shipped as a Vite SPA with static hosting rules (e.g. client-side routing) so it deploys cleanly to Vercel, Netlify, or GitHub Pages.
How it was built
Defined user-editable config (user, themes, commands, settings) so the app stays fork-friendly without forking the engine.
Implemented terminal UX: prompt template, history (↑/↓), tab completion, Ctrl shortcuts, and output components for text, tables, cards, and JSX blocks.
Added portfolio commands (about, projects, skills, experience, education, contact, social, resume) and system commands (theme, font, settings, reset).
Shipped 13+ visual themes (Dracula, Nord, Tokyo Night, Solarized, Matrix, retro CRT, etc.) with live switching and persisted preference.
Wrote Vitest coverage for the parser, registry, and command behaviour to keep refactors safe.
Packaged for static deploy with Vite build output and SPA rewrites for production hosting.
Impact
Visuals
Main terminal
Default view with boot-friendly layout, prompt, and scrollable output—built for 100dvh and mobile.
Command help
Built-in help lists core, portfolio, system, and fun commands with short descriptions.
Projects
Portfolio data from config rendered as structured terminal output—browse work without leaving the shell metaphor.
Settings
Preferences panel for theme, font, and behaviour—changes persist in localStorage.
Neofetch
System-style readout in the browser for a quick at-a-glance “machine” summary.
Education
Education history command output, consistent with other portfolio sections.
Experience
Work experience rendered in the same terminal output style for a cohesive read.
Contact
How to reach you—links and copy wired from user config.
Fun commands
Easter-egg style commands (fortune, matrix, hack, sudo) for personality without bloating the core.
whoami
Identity-style output matching the terminal metaphor for the portfolio owner.
All themes
Every built-in color scheme in Termx—switch instantly with theme set <name> or the settings panel. No scrolling through a long stack of full-width images.
Termfolio
Dracula
Monokai
Nord
Gruvbox Dark
Tokyo Night
One Dark
Solarized Dark
Hacker
Gruvbox Light
Solarized Light
Light
Matrix
Retro CRT