# navnee1h/terminal-portfolio architecture

> Architecture diagram of the GitHub repository navnee1h/terminal-portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/navnee1h/terminal-portfolio
- Repository: https://github.com/navnee1h/terminal-portfolio

## Overview

This is a React terminal-style personal portfolio. The browser mounts the app, which supplies global styling and the selected theme to the terminal; users enter commands, the terminal parses and dispatches them to portfolio and utility views, and selected commands can open external links or update the theme. The README documents responsive, keyboard-friendly interaction and the command set. The graph follows the sampled dispatch code; unsampled command implementations are represented by their paths, without inferring their internal behavior.

Main entry points: [`src/components/Terminal.tsx`](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/Terminal.tsx) (Command terminal), [`src/App.tsx`](https://github.com/navnee1h/terminal-portfolio/blob/main/src/App.tsx) (App shell), [`src/styles/theme.ts`](https://github.com/navnee1h/terminal-portfolio/blob/main/src/styles/theme.ts) (Theme definitions), [`src/components/commands/Themes.tsx`](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Themes.tsx) (Theme command)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_main["React entry<br/>[main.tsx]"]
  node_approot["App shell<br/>[App.tsx]"]
  node_theme["Theme definitions<br/>[theme.ts]"]
  node_global["Global styles<br/>[global.ts]"]
end

subgraph group_terminal["Terminal interaction"]
  node_terminalcore["Command terminal<br/>[Terminal.tsx]"]
  node_welcome["Welcome screen<br/>[Welcome.tsx]"]
end

subgraph group_portfolio["Portfolio commands"]
  node_about["About<br/>[About.tsx]"]
  node_education["Education<br/>[Education.tsx]"]
  node_projects["Projects<br/>[Projects.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
  node_socials["Social links<br/>[Socials.tsx]"]
end

subgraph group_utilities["Terminal utilities"]
  node_help["Help<br/>[Help.tsx]"]
  node_themes["Theme command<br/>[Themes.tsx]"]
  node_time["Time command<br/>[Time.tsx]"]
  node_shortcuts["Keyboard shortcuts<br/>[Shortcuts.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_main
node_main -->|"mounts"| node_approot
node_approot -->|"renders"| node_terminalcore
node_approot -->|"selects theme"| node_theme
node_approot -->|"applies styles"| node_global
node_terminalcore -->|"reads themes"| node_theme
node_global -->|"uses colors"| node_theme
node_terminalcore -->|"renders"| node_welcome
node_terminalcore -->|"dispatches about"| node_about
node_terminalcore -->|"dispatches education"| node_education
node_terminalcore -->|"dispatches projects"| node_projects
node_terminalcore -->|"dispatches skills"| node_skills
node_terminalcore -->|"dispatches contact"| node_contact
node_terminalcore -->|"dispatches socials"| node_socials
node_terminalcore -->|"dispatches help"| node_help
node_terminalcore -->|"dispatches themes"| node_themes
node_terminalcore -->|"dispatches time"| node_time
node_terminalcore -->|"dispatches shortcuts"| node_shortcuts
node_themes -->|"reads options"| node_theme
node_themes -->|"updates selection"| node_approot
node_projects -->|"opens project link"| node_visitor
node_socials -->|"opens social link"| node_visitor
node_welcome -->|"requests help"| node_terminalcore

click node_main "https://github.com/navnee1h/terminal-portfolio/blob/main/src/main.tsx"
click node_approot "https://github.com/navnee1h/terminal-portfolio/blob/main/src/App.tsx"
click node_theme "https://github.com/navnee1h/terminal-portfolio/blob/main/src/styles/theme.ts"
click node_global "https://github.com/navnee1h/terminal-portfolio/blob/main/src/styles/global.ts"
click node_terminalcore "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/Terminal.tsx"
click node_welcome "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/Welcome.tsx"
click node_about "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/About.tsx"
click node_education "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Education.tsx"
click node_projects "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Projects.tsx"
click node_skills "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Skills.tsx"
click node_contact "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Contact.tsx"
click node_socials "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Socials.tsx"
click node_help "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Help.tsx"
click node_themes "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Themes.tsx"
click node_time "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Time.tsx"
click node_shortcuts "https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Shortcuts.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_approot,node_theme,node_global toneBlue
class node_terminalcore,node_welcome toneAmber
class node_about,node_education,node_projects,node_skills,node_contact,node_socials toneMint
class node_help,node_themes,node_time,node_shortcuts toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/navnee1h/terminal-portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/navnee1h/terminal-portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Theme definitions](https://github.com/navnee1h/terminal-portfolio/blob/main/src/styles/theme.ts): `src/styles/theme.ts`
- [Global styles](https://github.com/navnee1h/terminal-portfolio/blob/main/src/styles/global.ts): `src/styles/global.ts`

### Terminal interaction

- [Command terminal](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/Terminal.tsx): `src/components/Terminal.tsx`
- [Welcome screen](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/Welcome.tsx): `src/components/Welcome.tsx`

### Portfolio commands

- [About](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/About.tsx): `src/components/commands/About.tsx`
- [Education](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Education.tsx): `src/components/commands/Education.tsx`
- [Projects](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Projects.tsx): `src/components/commands/Projects.tsx`
- [Skills](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Skills.tsx): `src/components/commands/Skills.tsx`
- [Contact](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Contact.tsx): `src/components/commands/Contact.tsx`
- [Social links](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Socials.tsx): `src/components/commands/Socials.tsx`

### Terminal utilities

- [Help](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Help.tsx): `src/components/commands/Help.tsx`
- [Theme command](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Themes.tsx): `src/components/commands/Themes.tsx`
- [Time command](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Time.tsx): `src/components/commands/Time.tsx`
- [Keyboard shortcuts](https://github.com/navnee1h/terminal-portfolio/blob/main/src/components/commands/Shortcuts.tsx): `src/components/commands/Shortcuts.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site (evidence: `README.md`)
- React entry → App shell: mounts (evidence: `src/main.tsx`)
- App shell → Command terminal: renders (evidence: `src/App.tsx`)
- App shell → Theme definitions: selects theme (evidence: `src/App.tsx`)
- App shell → Global styles: applies styles (evidence: `src/App.tsx`)
- Command terminal → Theme definitions: reads themes (evidence: `src/components/Terminal.tsx`)
- Global styles → Theme definitions: uses colors (evidence: `src/styles/global.ts`)
- Command terminal → Welcome screen: renders (evidence: `src/components/Terminal.tsx`)
- Command terminal → About: dispatches about (evidence: `src/components/Terminal.tsx`)
- Command terminal → Education: dispatches education (evidence: `src/components/Terminal.tsx`)
- Command terminal → Projects: dispatches projects (evidence: `src/components/Terminal.tsx`)
- Command terminal → Skills: dispatches skills (evidence: `src/components/Terminal.tsx`)
- Command terminal → Contact: dispatches contact (evidence: `src/components/Terminal.tsx`)
- Command terminal → Social links: dispatches socials (evidence: `src/components/Terminal.tsx`)
- Command terminal → Help: dispatches help (evidence: `src/components/Terminal.tsx`)
- Command terminal → Theme command: dispatches themes (evidence: `src/components/Terminal.tsx`)
- Command terminal → Time command: dispatches time (evidence: `src/components/Terminal.tsx`)
- Command terminal → Keyboard shortcuts: dispatches shortcuts (evidence: `src/components/Terminal.tsx`)
- Theme command → Theme definitions: reads options (evidence: `src/components/commands/Themes.tsx`)
- Theme command → App shell: updates selection
- Projects → Visitor: opens project link (evidence: `src/components/commands/Projects.tsx`)
- Social links → Visitor: opens social link (evidence: `src/components/commands/Socials.tsx`)
- Welcome screen → Command terminal: requests help (evidence: `src/components/Welcome.tsx`)