# issaloubani/issaloubani.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/issaloubani/issaloubani.github.io
- Repository: https://github.com/issaloubani/issaloubani.github.io

## Overview

This repository is a static Astro portfolio. Visitors browse the portfolio and CV, then can open project pages; the project collection supports the portfolio’s published and work entries. The README also documents an interaction-triggered Arabizi transliteration demo. The graph includes those documented capabilities, but page and component implementations were not sampled, so uncertain runtime connections are omitted rather than inferred.

Main entry points: [`src/content/projects`](https://github.com/issaloubani/issaloubani.github.io/tree/main/src/content/projects) (Project entries), [`src/components/ArabiziDemo.astro`](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/components/ArabiziDemo.astro) (Arabizi demo), [`src/pages/work/[...slug].astro`](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/work/%5B...slug%5D.astro) (Project page), [`gen_content.py`](https://github.com/issaloubani/issaloubani.github.io/blob/main/gen_content.py) (Content generator)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_home["Portfolio home<br/>[index.astro]"]
  node_cv["CV page<br/>[cv.astro]"]
  node_project_page["Project page<br/>[&#91;...slug&#93;.astro]"]
  node_base_layout["Base layout<br/>[Base.astro]"]
  node_global_styles["Global styles<br/>[global.css]"]
  node_globe["Globe component<br/>[Globe.astro]"]
  node_media["Project media"]
end

subgraph group_content["Project content"]
  node_project_collection[("Project collection<br/>[content.config.ts]")]
  node_project_markdown["Project entries"]
  node_content_generator["Content generator<br/>[gen_content.py]"]
end

subgraph group_demo["Interactive demo"]
  node_arabizi_demo["Arabizi demo<br/>[ArabiziDemo.astro]"]
  node_arabizi_runtime["Transliterator runtime<br/>[arabizi.js]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"browses"| node_home
node_visitor -.->|"opens"| node_cv
node_visitor -.->|"opens"| node_project_page
node_project_markdown -->|"validated by"| node_project_collection
node_project_markdown -->|"provides page content"| node_project_page
node_content_generator -->|"writes entries"| node_project_markdown
node_visitor -->|"uses"| node_arabizi_demo
node_arabizi_demo -->|"loads on interaction"| node_arabizi_runtime

click node_home "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/index.astro"
click node_cv "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/cv.astro"
click node_project_page "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/work/%5B...slug%5D.astro"
click node_base_layout "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/layouts/Base.astro"
click node_global_styles "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/styles/global.css"
click node_globe "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/components/Globe.astro"
click node_project_collection "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/content.config.ts"
click node_project_markdown "https://github.com/issaloubani/issaloubani.github.io/tree/main/src/content/projects"
click node_content_generator "https://github.com/issaloubani/issaloubani.github.io/blob/main/gen_content.py"
click node_arabizi_demo "https://github.com/issaloubani/issaloubani.github.io/blob/main/src/components/ArabiziDemo.astro"
click node_arabizi_runtime "https://github.com/issaloubani/issaloubani.github.io/blob/main/public/arabizi/arabizi.js"
click node_media "https://github.com/issaloubani/issaloubani.github.io/tree/main/public/media"

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_home,node_cv,node_project_page,node_base_layout,node_global_styles,node_globe,node_media toneBlue
class node_project_collection,node_project_markdown,node_content_generator toneAmber
class node_arabizi_demo,node_arabizi_runtime toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Portfolio home](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/index.astro): `src/pages/index.astro`
- [CV page](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/cv.astro): `src/pages/cv.astro`
- [Project page](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/pages/work/%5B...slug%5D.astro): `src/pages/work/[...slug].astro`
- [Base layout](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/layouts/Base.astro): `src/layouts/Base.astro`
- [Global styles](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/styles/global.css): `src/styles/global.css`
- [Globe component](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/components/Globe.astro): `src/components/Globe.astro`
- [Project media](https://github.com/issaloubani/issaloubani.github.io/tree/main/public/media): `public/media`

### Project content

- [Project collection](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/content.config.ts): `src/content.config.ts`
- [Project entries](https://github.com/issaloubani/issaloubani.github.io/tree/main/src/content/projects): `src/content/projects`
- [Content generator](https://github.com/issaloubani/issaloubani.github.io/blob/main/gen_content.py): `gen_content.py`

### Interactive demo

- [Arabizi demo](https://github.com/issaloubani/issaloubani.github.io/blob/main/src/components/ArabiziDemo.astro): `src/components/ArabiziDemo.astro`
- [Transliterator runtime](https://github.com/issaloubani/issaloubani.github.io/blob/main/public/arabizi/arabizi.js): `public/arabizi/arabizi.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio home: browses
- Visitor → CV page: opens
- Visitor → Project page: opens
- Project entries → Project collection: validated by (evidence: `src/content.config.ts`)
- Project entries → Project page: provides page content (evidence: `README.md`)
- Content generator → Project entries: writes entries (evidence: `gen_content.py`)
- Visitor → Arabizi demo: uses (evidence: `README.md`)
- Arabizi demo → Transliterator runtime: loads on interaction (evidence: `README.md`)