Retro Terminal Portfolio

A nostalgic DOS-style terminal experience for the modern web.
Built for developers, designers, and creators who want a portfolio that stands out.

_{Developed with YEN - the personal terminal experience}

---

Why This Exists

Most portfolios look the same. This one doesn't.

Visitors interact with your work through a command-line interface - typing commands, exploring projects, and discovering your story like they're hacking into a retro mainframe. It's memorable, it's fun, and it showcases your personality.

What You Get

• 66+ project slots - Showcase your entire body of work
• 23 color themes - From classic green phosphor to synthwave pink
• Terminal-style command UX - Enter-to-load, numeric navigation, and clear shortcuts
• WCAG 2.1 AA accessible - Screen reader friendly
• Mobile responsive - Works everywhere
• Blazing fast - Static generation, zero client-side data fetching

---

Quick Start

Requires Bun v1.3.9+

# Clone the repo
git clone https://github.com/8bittts/8leeai.git
cd 8leeai

# Install dependencies
bun install

# Start development server
bun run dev

# Run full validation suite
bun run check:full

Open http://localhost:1333 and start customizing.

---

Make It Yours

1. Update Your Data

Edit lib/data/portfolio.json to add your projects, education, and experience:

{
  "projects": [
    {
      "id": "my-project",
      "name": "My Project - Short Description",
      "url": "https://myproject.com",
      "linkWord": "Project"
    }
  ],
  "education": [],
  "volunteer": []
}

lib/data.ts validates this dataset at runtime and exports typed sections for the app.

2. Customize Themes

23 themes are included in lib/themes/. Create your own or modify existing ones:

Theme	Vibe
terminal	Classic green terminal
8bit	Retro pixel gaming
synthwave	80s neon pink/cyan
nord	Cool arctic blues
dracula	Dark with vivid accents
solarized	Balanced, low-eye-strain contrast

Switch themes with the theme command or theme [name].

3. Deploy

# Build for production
bun run build

# Deploy to Vercel (recommended)
vercel --prod

---

Terminal Commands

Your visitors can use these commands:

Command	What It Does
[project #]	Open a project by number from the Projects list
[education #]	Open an education entry by number from the Education section
[volunteer #]	Open a volunteer entry by number from the Volunteer section
help	Show all available commands
email	Show contact email
education	Show education section
volunteer	Show volunteer section
github	Open GitHub project link
wellfound	Open Wellfound profile
linkedin	Open LinkedIn profile
twitter	Open X/Twitter profile
random	Open a random project
theme	List themes or switch theme
date	Show current date/time
clear	Reset the terminal
Ctrl+L	Quick clear shortcut
Cmd+K	Quick clear shortcut (macOS)

Common aliases:

• themes → theme
• reset → clear
• contact, hello, reach → email
• ed, resume, cv, about, bio → education
• vol → volunteer
• li → linkedin
• x → twitter

---

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router + Turbopack)
UI	React 19
Styling	Tailwind CSS v4
Language	TypeScript 5.9 (strict mode)
Runtime	Bun 1.3.9
Linting	Biome
Tests	Bun smoke tests (tests/smoke)
Deployment	Vercel

---

Project Structure

app/                    Next.js App Router pages and layouts
components/             Reusable UI components
lib/
  data.ts               Typed dataset validation + exports
  data/portfolio.json   Portfolio content source of truth
  themes/               23 color theme definitions
  commands.ts           Terminal command definitions
  utils.ts              Helper functions
public/                 Static assets

---

Theme Examples

---

Contributing

This is a personal portfolio template. Fork it, make it yours. If you build something cool, I'd love to see it.

For development workflows and coding conventions, check the project's internal docs.

Maintenance Notes (Feb 2026 Refactor)

• useTypewriter() now supports respectReducedMotion (default: true).
• Main UX surfaces (boot, CV summary, and 404) explicitly set respectReducedMotion: false.
• Typewriter speed is centralized in ANIMATION_DELAYS.typewriter (lib/utils.ts).
• Theme CSS variables are intentionally minimal; when adding a new token, wire both:
  • app/globals.css default token definition
  • contexts/theme-context.tsx runtime token assignment
• Theme style tags are centralized in lib/themes/styles.ts (retro, neon, motion-heavy).
• Theme schema is intentionally lean:
  • colors: background, foreground, primary, accent, muted, border, error
  • fonts: primary
  • borders: width, style
  • shadows: hover

Claude Code Integration

This project uses Claude Code with global rules from ~/.claude/CLAUDE.md. If present locally, project-specific assistant notes may live in CLAUDE.md (often gitignored).

Global configuration backup (for recovery on new computers) is maintained in the deathnote project at claude-global.md.

---

Built with YEN

YEN is a personal terminal experience that makes command-line work beautiful.
Fast, customizable, and designed for developers who live in the terminal.

---

MIT License
_{Use it, modify it, ship it.}