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
The problem
Note · 01Recreate 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
Note · 02Built 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
Milestones from concept through delivery.
Defined user
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
Demo
Visuals
Default view with boot-friendly layout, prompt, and scrollable output—built for 100dvh and mobile.
Built-in help lists core, portfolio, system, and fun commands with short descriptions.
Portfolio data from config rendered as structured terminal output—browse work without leaving the shell metaphor.
Preferences panel for theme, font, and behaviour—changes persist in localStorage.
System-style readout in the browser for a quick at-a-glance “machine” summary.
Education history command output, consistent with other portfolio sections.
Work experience rendered in the same terminal output style for a cohesive read.
How to reach you—links and copy wired from user config.
Easter-egg style commands (fortune, matrix, hack, sudo) for personality without bloating the core.
Identity-style output matching the terminal metaphor for the portfolio owner.
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
