react-terminal-portfolio — Vite 作品集模板

SHA-256: 5e1f565a968eb6f2560eeb67f1f9bd19dadd94458451b724a79871118b615e78

2026-10-17T10:32:59.335Z

# react-terminal-portfolio

A customizable, interactive terminal-style portfolio built with **React** and **TypeScript**. Features bilingual support (ES/EN), multiple themes, command history, ASCII art, and smooth animations.

Use it as a **template** (clone + edit one config file + deploy) or as an **npm component** (`<TerminalPortfolio config={...} />`).

## Features

- Interactive terminal with bilingual commands (Spanish/English)
- 4 built-in themes: Dracula, Matrix, Ubuntu, Catppuccin
- Custom theme support
- Command history with arrow key navigation
- ASCII art welcome screen
- Smooth animations (Framer Motion)
- Fully responsive (mobile-friendly)
- Single config file for all personal data
- Accessible (WCAG keyboard navigation, reduced motion support)
- Dual distribution: template app + npm library

## Quick Start (Template)

```bash
git clone https://github.com/yourusername/react-terminal-portfolio.git
cd react-terminal-portfolio
npm install
```

Edit `src/config.ts` with your personal data, then:

```bash
npm run dev      # Development server
npm run build    # Production build → dist/
```

Deploy the `dist/` folder to any static host (Netlify, Vercel, GitHub Pages, etc.).

## npm Component

```bash
npm install react-terminal-portfolio
```

```tsx
import { TerminalPortfolio } from 'react-terminal-portfolio';
import 'react-terminal-portfolio/style.css';

const config = {
  prompt: 'user@dev:~$',
  titleBarText: 'user@dev:~',
  asciiArt: ['', '  Hello World!', ''],
  welcomeMessage: {
    es: ['  Bienvenido!', ''],
    en: ['  Welcome!', ''],
  },
  about: { /* ... */ },
  skills: { /* ... */ },
  projects: { /* ... */ },
  experience: { /* ... */ },
  education: { /* ... */ },
  contact: { /* ... */ },
};

function App() {
  return <TerminalPortfolio config={config} />;
}
```

## Configuration Reference

The `TerminalConfig` type defines all available options:

| Field | Type | Description |
|-------|------|-------------|
| `prompt` | `string` | Prompt text (e.g. `"user@dev:~$"`) |
| `titleBarText` | `string` | Title bar text (e.g. `"user@dev:~"`) |
| `asciiArt` | `string[]` | ASCII art lines for welcome screen |
| `welcomeMessage` | `Bilingual<string[]>` | Welcome message in ES/EN |
| `about` | `Bilingual<PersonalInfo>` | Name, role, tagline, bio, location |
| `skills` | `Bilingual<SkillCategory[]>` | Skill categories with levels (1-10) |
| `projects` | `Bilingual<Project[]>` | Projects (public with URL or private) |
| `experience` | `Bilingual<ExperienceItem[]>` | Work experience entries |
| `education` | `Bilingual<EducationItem[]>` | Education entries |
| `certifications` | `string[]` | Optional certifications list |
| `contact` | `Bilingual<ContactInfo>` | Email, GitHub, LinkedIn, CTA |
| `defaultTheme` | `string` | Default theme name (default: `"dracula"`) |
| `defaultLang` | `Lang` | Default language: `"es"` or `"en"` |
| `themes` | `Record<string, Theme>` | Optional custom themes |
| `exit` | `ExitConfig` | Optional exit command configuration |

## Available Commands

| English | Spanish | Description |
|---------|---------|-------------|
| `about` | `sobremi` | About me |
| `skills` | `habilidades` | Technical skills |
| `projects` | `proyectos` | Featured projects |
| `experience` | `experiencia` | Work experience |
| `education` | `formacion` | Education |
| `contact` | `contacto` | Contact info |
| `theme [name]` | `tema [nombre]` | Change theme |
| `lang [es\|en]` | `idioma [es\|en]` | Change language |
| `clear` | `limpiar` | Clear terminal |
| `help` | `ayuda` | Show commands |

## Custom Themes

Add custom themes via the `themes` field in your config:

```ts
const config: TerminalConfig = {
  // ...
  themes: {
    ocean: {
      name: 'ocean',
      label: 'Ocean',
      bg: '#1b2838',
      text: '#c0d6e4',
      prompt: '#5fb3b3',
      accent: '#6699cc',
      comment: '#65737e',
      titleBar: '#15232d',
      selection: '#2b3f52',
    },
  },
};
```

Custom themes are merged with the 4 built-in themes and become available via the `theme` command.

## Exit Command

For integration with other projects (e.g., a visual portfolio with a terminal mode), configure the exit command:

```ts
const config: TerminalConfig = {
  // ...
  exit: {
    command: {
      es: { name: 'salir', description: 'Volver al portfolio visual' },
      en: { name: 'exit', description: 'Back to visual portfolio' },
    },
    action: () => {
      // Your custom exit logic
      console.log('Exiting terminal...');
    },
  },
};
```

## Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Start dev server |
| `npm run build` | Build template app to `dist/` |
| `npm run build:lib` | Build npm library to `dist/lib/` |
| `npm run lint` | Run ESLint |
| `npm run preview` | Preview production build |

## Tech Stack

- [React](https://react.dev/) 19
- [TypeScript](https://www.typescriptlang.org/) 5.9
- [Vite](https://vite.dev/) 6
- [Framer Motion](https://www.framer.com/motion/) 11
- CSS Modules

## License

MIT