Retro Terminal Portfolio (Placeholder)

Retro Terminal Portfolio

The Retro Terminal Portfolio reimagines a developer homepage as an interactive command-line session. Visitors browse projects and learn about my background by typing familiar terminal commands — or hitting Tab to discover what's available.

Concept

The interface leans into authentic CRT aesthetics — scanlines, phosphor bloom, and subtle barrel distortion — while remaining fully responsive and screen-reader friendly. Every aesthetic choice follows the same constraint: if the real CRT would do it, the CSS should too.

Features

• Tab-completable command palette with fuzzy matching and ranked suggestions.
• Rich command responses rendered as MDX — each command can include images, tables, and code.
• Dynamic ASCII art generated at build time from source images.
• Persistent command history across sessions via localStorage.
• Three CRT colour themes: amber, green phosphor, and white paper.

Implementation

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 theme transitions.

CRT effect stack

All visual effects are pure CSS — no canvas, no WebGL.

1. filter: brightness(1.05) contrast(1.1) — base phosphor warmth.
2. repeating-linear-gradient scanlines at 2 px intervals.
3. border-radius + perspective on the outer wrapper for barrel distortion.
4. A @keyframes flicker animation at low opacity to mimic refresh rate artefacts.

Accessibility

Building a custom interactive element that mimics a terminal posed real accessibility challenges.

• All commands are reachable via keyboard only — mouse is opt-in.
• Output regions use role="log" with aria-live="polite" so screen readers announce new lines.
• CRT flicker runs at 0.03 opacity and is disabled by prefers-reduced-motion.
• All three colour themes meet WCAG AA contrast against the dark background.

Lessons learned

The key insight using inline code: setting white-space: pre on the output region instead of pre-wrap eliminated the ghost wrapping issue that plagued early builds.

• The CRT effect is convincing enough that several visitors asked what hardware I was running.
• Keyboard-first design forced cleaner state management — every action needed to be expressible as a pure command string.
• Fuzzy matching via fuse.js required careful score weighting; title matches must outrank tag matches.

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

Also from this project

Voice Acting Demo Reel 2024 (Placeholder)

Portfolio reel showcasing character voices, narration, and promo energy captured in a treated home booth — with notes on the recording chain and post-processing workflow.

Extra•2024-01-10•Voice Acting