# ahmedorun/portfolio- architecture

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

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

## Overview

This is a responsive, single-page developer portfolio. A visitor opens the portfolio to view its About, skills, and project-link sections; the portrait adds pointer tracking and a greeting, while content sections reveal on scroll. The graph keeps the page, its interaction logic, and visual assets distinct. The README documents the page capabilities and external assets; the HTML and stylesheet contents were not provided, so their wiring is not inferred.

Main entry points: [`index.html`](https://github.com/ahmedorun/portfolio-/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/ahmedorun/portfolio-/blob/main/script.js) (Portrait interaction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio experience"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_about["About section<br/>[index.html]"]
  node_skills["Skills section<br/>[index.html]"]
  node_projects["Project links<br/>[index.html]"]
end

subgraph group_interaction["Interactive behavior"]
  node_portrait_interaction["Portrait interaction<br/>[script.js]"]
  node_scroll_reveal["Scroll reveals<br/>[script.js]"]
end

subgraph group_assets["Visual assets"]
  node_portrait_asset["Portrait image"]
  node_google_fonts["Google Fonts"]
  node_unsplash_photo["Auto Haus preview"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_portfolio
node_portfolio -->|"presents"| node_about
node_portfolio -->|"presents"| node_skills
node_portfolio -->|"links to"| node_projects
node_portrait_interaction -->|"updates DOM"| node_portfolio
node_scroll_reveal -->|"reveals sections"| node_portfolio
node_portfolio -->|"uses portrait"| node_portrait_asset
node_portfolio -->|"uses typeface"| node_google_fonts
node_portfolio -->|"uses preview photo"| node_unsplash_photo

click node_portfolio "https://github.com/ahmedorun/portfolio-/blob/main/index.html"
click node_about "https://github.com/ahmedorun/portfolio-/blob/main/index.html"
click node_skills "https://github.com/ahmedorun/portfolio-/blob/main/index.html"
click node_projects "https://github.com/ahmedorun/portfolio-/blob/main/index.html"
click node_portrait_interaction "https://github.com/ahmedorun/portfolio-/blob/main/script.js"
click node_scroll_reveal "https://github.com/ahmedorun/portfolio-/blob/main/script.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_portfolio,node_about,node_skills,node_projects toneBlue
class node_portrait_interaction,node_scroll_reveal toneAmber
class node_portrait_asset,node_google_fonts,node_unsplash_photo toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Portfolio page](https://github.com/ahmedorun/portfolio-/blob/main/index.html): `index.html`
- [About section](https://github.com/ahmedorun/portfolio-/blob/main/index.html): `index.html`
- [Skills section](https://github.com/ahmedorun/portfolio-/blob/main/index.html): `index.html`
- [Project links](https://github.com/ahmedorun/portfolio-/blob/main/index.html): `index.html`

### Interactive behavior

- [Portrait interaction](https://github.com/ahmedorun/portfolio-/blob/main/script.js): `script.js`
- [Scroll reveals](https://github.com/ahmedorun/portfolio-/blob/main/script.js): `script.js`

### Visual assets

- **Portrait image**
- **Google Fonts**
- **Auto Haus preview**

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens (evidence: `README.md`)
- Portfolio page → About section: presents (evidence: `README.md`)
- Portfolio page → Skills section: presents (evidence: `README.md`)
- Portfolio page → Project links: links to (evidence: `README.md`)
- Portrait interaction → Portfolio page: updates DOM (evidence: `script.js`)
- Scroll reveals → Portfolio page: reveals sections (evidence: `script.js`)
- Portfolio page → Portrait image: uses portrait (evidence: `README.md`)
- Portfolio page → Google Fonts: uses typeface (evidence: `README.md`)
- Portfolio page → Auto Haus preview: uses preview photo (evidence: `README.md`)