# amr-ma7moud/room-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/amr-ma7moud/room-portfolio
- Repository: https://github.com/amr-ma7moud/room-portfolio

## Overview

This is an interactive escape-room portfolio: visitors explore a spatial room, open portfolio panels, and can use an in-room terminal. The graph follows the documented room-to-panel workflow and sampled terminal behavior, while retaining documented tour, map, and hidden-terminal features. Source excerpts are partial, and the README references a portfolio data file not present in the supplied tree; details and wiring for those unsampled areas are therefore limited.

Main entry points: [`src/routes/index.tsx`](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/routes/index.tsx) (Room route), [`src/components/room/Terminal.tsx`](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/Terminal.tsx) (Terminal interface), [`src/components/room/panels/ProjectsPanel.tsx`](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ProjectsPanel.tsx) (Projects panel), [`src/server.ts`](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/server.ts) (Request server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Room experience"]
  node_room_route["Room route<br/>[index.tsx]"]
  node_hitboxes["Room hitboxes<br/>[Hitbox.tsx]"]
  node_modal["Glass modal<br/>[GlassModal.tsx]"]
  node_nav["Navigation dock<br/>[NavDock.tsx]"]
  node_map["Room map<br/>[MapOverlay.tsx]"]
  node_tour["Spotlight tour<br/>[SpotlightTour.tsx]"]
end

subgraph group_portfolio["Portfolio panels"]
  node_about["About panel<br/>[AboutPanel.tsx]"]
  node_resume["Resume panel<br/>[ResumePanel.tsx]"]
  node_skills["Skills panel<br/>[SkillsPanel.tsx]"]
  node_projects["Projects panel<br/>[ProjectsPanel.tsx]"]
  node_project_detail["Project detail<br/>[ProjectDetail.tsx]"]
  node_project_images["Project images<br/>[projectImages.ts]"]
  node_certificates["Certificates panel"]
  node_testimonials["Testimonials panel"]
  node_contact_panel["Contact panel<br/>[ContactPanel.tsx]"]
end

subgraph group_terminal["Interactive terminal"]
  node_terminal["Terminal interface<br/>[Terminal.tsx]"]
  node_terminal_fs["Virtual filesystem<br/>[fs.ts]"]
  node_terminal_commands["Command helpers<br/>[commands.ts]"]
  node_snake["Snake game<br/>[SnakeGame.tsx]"]
  node_matrix["Matrix effect<br/>[CMatrix.tsx]"]
end

subgraph group_contact["Contact and runtime"]
  node_contact_action["Contact action<br/>[contact.ts]"]
  node_email_template["Email template<br/>[email-template.tsx]"]
  node_server["Request server<br/>[server.ts]"]
  node_error_capture["Error capture<br/>[error-capture.ts]"]
  node_error_page["Error page<br/>[error-page.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens portfolio"| node_room_route
node_room_route -->|"renders hotspots"| node_hitboxes
node_room_route -->|"renders controls"| node_nav
node_room_route -->|"opens map"| node_map
node_room_route -->|"starts tour"| node_tour
node_hitboxes -->|"selects panel"| node_room_route
node_room_route -->|"shows overlay"| node_modal
node_room_route -->|"loads panel"| node_about
node_room_route -->|"loads panel"| node_resume
node_room_route -->|"loads panel"| node_skills
node_room_route -->|"loads panel"| node_projects
node_room_route -->|"loads panel"| node_certificates
node_room_route -->|"loads panel"| node_testimonials
node_room_route -->|"loads panel"| node_contact_panel
node_projects -->|"shows selection"| node_project_detail
node_project_images -->|"resolves images"| node_projects
node_room_route -->|"opens terminal"| node_terminal
node_terminal -->|"resolves paths"| node_terminal_fs
node_terminal -->|"uses helpers"| node_terminal_commands
node_terminal -->|"renders game"| node_snake
node_terminal -->|"renders effect"| node_matrix
node_visitor -.->|"submits message"| node_contact_action
node_server -->|"consumes captured error"| node_error_capture
node_server -->|"renders failure page"| node_error_page

click node_room_route "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/routes/index.tsx"
click node_hitboxes "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/Hitbox.tsx"
click node_modal "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/GlassModal.tsx"
click node_nav "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/NavDock.tsx"
click node_map "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/MapOverlay.tsx"
click node_tour "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/SpotlightTour.tsx"
click node_about "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/AboutPanel.tsx"
click node_resume "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ResumePanel.tsx"
click node_skills "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/SkillsPanel.tsx"
click node_projects "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ProjectsPanel.tsx"
click node_project_detail "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ProjectDetail.tsx"
click node_project_images "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/data/projectImages.ts"
click node_certificates "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/CertificatesPanel.tsx"
click node_testimonials "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/TestimonialsPanel.tsx"
click node_contact_panel "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ContactPanel.tsx"
click node_terminal "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/Terminal.tsx"
click node_terminal_fs "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/fs.ts"
click node_terminal_commands "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/commands.ts"
click node_snake "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/SnakeGame.tsx"
click node_matrix "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/CMatrix.tsx"
click node_contact_action "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/actions/contact.ts"
click node_email_template "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/actions/email-template.tsx"
click node_server "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/server.ts"
click node_error_capture "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/lib/error-capture.ts"
click node_error_page "https://github.com/amr-ma7moud/room-portfolio/blob/main/src/lib/error-page.ts"

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_room_route,node_hitboxes,node_modal,node_nav,node_map,node_tour toneBlue
class node_about,node_resume,node_skills,node_projects,node_project_detail,node_project_images,node_certificates,node_testimonials,node_contact_panel toneAmber
class node_terminal,node_terminal_fs,node_terminal_commands,node_snake,node_matrix toneMint
class node_contact_action,node_email_template,node_server,node_error_capture,node_error_page toneRose
class node_visitor toneIndigo
```

## Components

### Room experience

- [Room route](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [Room hitboxes](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/Hitbox.tsx): `src/components/room/Hitbox.tsx`
- [Glass modal](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/GlassModal.tsx): `src/components/room/GlassModal.tsx`
- [Navigation dock](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/NavDock.tsx): `src/components/room/NavDock.tsx`
- [Room map](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/MapOverlay.tsx): `src/components/room/MapOverlay.tsx`
- [Spotlight tour](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/SpotlightTour.tsx): `src/components/room/SpotlightTour.tsx`

### Portfolio panels

- [About panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/AboutPanel.tsx): `src/components/room/panels/AboutPanel.tsx`
- [Resume panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ResumePanel.tsx): `src/components/room/panels/ResumePanel.tsx`
- [Skills panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/SkillsPanel.tsx): `src/components/room/panels/SkillsPanel.tsx`
- [Projects panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ProjectsPanel.tsx): `src/components/room/panels/ProjectsPanel.tsx`
- [Project detail](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ProjectDetail.tsx): `src/components/room/panels/ProjectDetail.tsx`
- [Project images](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/data/projectImages.ts): `src/data/projectImages.ts`
- [Certificates panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/CertificatesPanel.tsx): `src/components/room/panels/CertificatesPanel.tsx`
- [Testimonials panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/TestimonialsPanel.tsx): `src/components/room/panels/TestimonialsPanel.tsx`
- [Contact panel](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/panels/ContactPanel.tsx): `src/components/room/panels/ContactPanel.tsx`

### Interactive terminal

- [Terminal interface](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/Terminal.tsx): `src/components/room/Terminal.tsx`
- [Virtual filesystem](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/fs.ts): `src/components/room/terminal/fs.ts`
- [Command helpers](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/commands.ts): `src/components/room/terminal/commands.ts`
- [Snake game](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/SnakeGame.tsx): `src/components/room/terminal/SnakeGame.tsx`
- [Matrix effect](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/components/room/terminal/CMatrix.tsx): `src/components/room/terminal/CMatrix.tsx`

### Contact and runtime

- [Contact action](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/actions/contact.ts): `src/actions/contact.ts`
- [Email template](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/actions/email-template.tsx): `src/actions/email-template.tsx`
- [Request server](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/server.ts): `src/server.ts`
- [Error capture](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/lib/error-capture.ts): `src/lib/error-capture.ts`
- [Error page](https://github.com/amr-ma7moud/room-portfolio/blob/main/src/lib/error-page.ts): `src/lib/error-page.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Room route: opens portfolio
- Room route → Room hitboxes: renders hotspots
- Room route → Navigation dock: renders controls
- Room route → Room map: opens map
- Room route → Spotlight tour: starts tour
- Room hitboxes → Room route: selects panel
- Room route → Glass modal: shows overlay
- Room route → About panel: loads panel
- Room route → Resume panel: loads panel
- Room route → Skills panel: loads panel
- Room route → Projects panel: loads panel
- Room route → Certificates panel: loads panel
- Room route → Testimonials panel: loads panel
- Room route → Contact panel: loads panel
- Projects panel → Project detail: shows selection
- Project images → Projects panel: resolves images
- Room route → Terminal interface: opens terminal
- Terminal interface → Virtual filesystem: resolves paths
- Terminal interface → Command helpers: uses helpers
- Terminal interface → Snake game: renders game
- Terminal interface → Matrix effect: renders effect
- Visitor → Contact action: submits message
- Request server → Error capture: consumes captured error
- Request server → Error page: renders failure page