cli-folio

A minimal, terminal-style personal portfolio built with Next.js and TypeScript.

This project presents a developer portfolio as an interactive CLI/terminal experience in the browser. It uses a small set of focused React components to emulate a terminal interface and showcase projects, links, and quick commands.

Key Features

• Terminal-like UX with interactive commands
• Lightweight Next.js + React app (TypeScript-ready)
• Reusable components: Terminal, Monitor, QuickCommands, MatrixRain
• Content driven by lib/portfolio-data.ts and lib/commands.ts

Demo

Run locally (instructions below) to explore the interactive portfolio at http://localhost:3000.

Requirements

• Node.js 18+ (or the version compatible with Next.js 16)
• npm, yarn, or pnpm

Quickstart

1. Clone the repository

git clone <repo-url>
cd cli-folio

2. Install dependencies

npm install
# or `yarn` / `pnpm install`

3. Run the development server

npm run dev
# open http://localhost:3000

4. Build for production

npm run build
npm start

Docker

Quick Docker steps to build and run this project.

• Prerequisite: install Docker Desktop (or Docker Engine) on your machine.

• Build the image (from repo root):

docker build -t cli-folio .

• Run the image (production/static build, serves on port 3000):

docker run --rm -p 3000:3000 cli-folio
# then open http://localhost:3000

Project Structure

• app/ — Next.js app routes and page entrypoints
• components/ — UI components used to build the terminal experience
  • Terminal.tsx, TerminalWrapper.tsx — terminal UI and glue
  • QuickCommands.tsx — predefined quick actions and shortcuts
  • MatrixRain.tsx, Monitor.tsx — visual/ornamental components
• lib/ — small utilities and data
  • commands.ts — CLI command handlers
  • portfolio-data.ts — portfolio content (projects, links, metadata)
• public/ — static assets

Development Notes

• The UI is intentionally minimal and component-driven — adapt lib/portfolio-data.ts to update content without changing components.
• Commands are defined and wired in lib/commands.ts — add new commands by exporting handlers and mapping them into the terminal command registry.
• Styling uses Tailwind CSS; check postcss.config.mjs and tailwind.config if you extend styles.

Linting & Formatting

Run the linter with:

npm run lint