# abedmallahsc-ui/abedlabs-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/abedmallahsc-ui/abedlabs-portfolio
- Repository: https://github.com/abedmallahsc-ui/abedlabs-portfolio

## Overview

This repository is a portfolio website with an embedded AI chat and a project-request flow. A visitor interacts with the browser UI; chat messages are sent to the API route, which requests a completion from OpenRouter and returns a reply. The project form sends its fields through EmailJS. The sampled sources show these interactions, but the README is empty and the page markup and styling were not sampled, so their detailed capabilities are not inferred.

Main entry points: [`script.js`](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/script.js) (Interactive behavior), [`index.html`](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/index.html) (Portfolio page), [`api/chat.js`](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/api/chat.js) (Chat API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Website presentation"]
  node_page["Portfolio page<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
end

subgraph group_interaction["Visitor interactions"]
  node_browser["Interactive behavior<br/>[script.js]"]
  node_emailjs["EmailJS"]
end

subgraph group_services["Chat services"]
  node_chat_api["Chat API<br/>[chat.js]"]
  node_openrouter["OpenRouter"]
end

node_visitor(("Visitor"))

node_visitor -.->|"uses"| node_page
node_page -.->|"loads behavior"| node_browser
node_browser -->|"posts history"| node_chat_api
node_chat_api -->|"requests completion"| node_openrouter
node_browser -->|"sends project details"| node_emailjs

click node_page "https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/index.html"
click node_styles "https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/style.css"
click node_browser "https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/script.js"
click node_chat_api "https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/api/chat.js"

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_page,node_styles toneBlue
class node_browser,node_emailjs toneAmber
class node_chat_api,node_openrouter toneMint
class node_visitor toneIndigo
```

## Components

### Website presentation

- [Portfolio page](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/index.html): `index.html`
- [Page styling](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/style.css): `style.css`

### Visitor interactions

- [Interactive behavior](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/script.js): `script.js`
- **EmailJS**

### Chat services

- [Chat API](https://github.com/abedmallahsc-ui/abedlabs-portfolio/blob/main/api/chat.js): `api/chat.js`
- **OpenRouter**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: uses
- Portfolio page → Interactive behavior: loads behavior
- Interactive behavior → Chat API: posts history (evidence: `script.js`)
- Chat API → OpenRouter: requests completion (evidence: `api/chat.js`)
- Interactive behavior → EmailJS: sends project details (evidence: `script.js`)