Retro Terminal Portfolio (Placeholder)

Retro Terminal Portfolio

Final polish is underway—treat the walkthrough below as an early snapshot while I wrap the refreshed write-up.

The Retro Terminal Portfolio reimagines a developer homepage as an interactive command-line session. Visitors can browse projects and learn about my background by typing familiar terminal commands.

Concept

Recreating the feeling of exploring a vintage computer while keeping the experience fast, accessible, and responsive.

The interface leans into authentic CRT styling—scanlines, phosphor bloom, and subtle curvature—while remaining fully responsive and keyboard-driven.

Features

Tab-completable command palette with fuzzy matching
Rich command responses rendered with MDX
Dynamic ASCII art generated at build time
Persistent command history across page reloads

Implementation

Retro terminal interface — Terminal-inspired interface with dynamic CRT styling

The terminal layer uses a custom parser that maps command strings to React components. Zustand stores command history and prompt state, while CSS custom properties power dynamic theming transitions.

The command parser is intentionally declarative. Each command registers the React element it should render, which keeps rendering and parsing responsibilities separate.

const commands = {
help: () => <HelpOutput />,
about: () => <AboutSection />,
projects: () => <ProjectsTable />,
}

Parse raw input
Resolve command + arguments
Render mapped React component

Screen recording of command palette, tab completion, and CRT animation.

Lessons Learned

Building the CRT effect entirely with CSS filters avoided the performance overhead of canvas shaders, and progressive enhancement kept the experience accessible on assistive technologies.

Interfaces become memorable when aesthetics and interaction design reinforce each other.

Terminal home screen — Home screen showing welcome prompt and command history.

Autocomplete UI — Autocomplete dropdown with fuzzy scoring and keyboard navigation.

Read the build notes

I also produced a companion voice-acting reel inspired by the terminal aesthetic:

Voice Acting Demo Reel 2024 (Placeholder)

Portfolio reel showcasing character voices, narration, and promo energy captured in a treated home booth.

Extra•2024-01-10•Voice Acting

Implementation

Terminal-inspired interface with dynamic CRT styling

The terminal layer uses a custom parser that maps command strings to React components. Zustand stores command history and prompt state, while CSS custom properties power dynamic theming transitions.

The command parser is intentionally declarative. Each command registers the React element it should render, which keeps rendering and parsing responsibilities separate.

const commands = { help: () => <HelpOutput />, about: () => <AboutSection />, projects: () => <ProjectsTable />, }

Parse raw input

Resolve command + arguments

Render mapped React component

Screen recording of command palette, tab completion, and CRT animation.

Lessons Learned

Building the CRT effect entirely with CSS filters avoided the performance overhead of canvas shaders, and progressive enhancement kept the experience accessible on assistive technologies.

Interfaces become memorable when aesthetics and interaction design reinforce each other.

I also produced a companion voice-acting reel inspired by the terminal aesthetic:

Retro Terminal Portfolio (Placeholder)

Quick Stats

Links

Concept

Features

Implementation

Lessons Learned

Curious what others see or think

Retro Terminal Portfolio (Placeholder)

Quick Stats

Links

Concept

Features

Implementation

Lessons Learned

Curious what others see or think