# mahmoudabdullah228/mahmoud-abdullah-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/mahmoudabdullah228/mahmoud-abdullah-portfolio
- Repository: https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio

## Overview

This is a static personal portfolio: visitors browse the profile, skills, projects, learning timeline, community work, and contact options. The page is implemented in HTML/CSS, with JavaScript handling interactive behavior and contact-form submission. The README documents several sections and capabilities; source excerpts confirm selected JavaScript behavior, but do not expose the full HTML or CSS, so links between individual page sections and styling details are not inferred.

Main entry points: [`index.html`](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js) (Mobile navigation), [`images`](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/tree/main/images) (Portfolio imagery), [`style.css`](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/style.css) (Layout and styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Portfolio content"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_hero["Hero and profile<br/>[index.html]"]
  node_skills["Skills terminal<br/>[index.html]"]
  node_projects["Projects gallery<br/>[index.html]"]
  node_journey["Learning journey<br/>[index.html]"]
  node_community["Community and mentorship<br/>[index.html]"]
  node_contact["Contact section<br/>[index.html]"]
end

subgraph group_presentation["Visual presentation"]
  node_assets["Portfolio imagery"]
  node_styles["Layout and styling<br/>[style.css]"]
end

subgraph group_interaction["Browser interactions"]
  node_navigation["Mobile navigation<br/>[script.js]"]
  node_cursor["Custom cursor<br/>[script.js]"]
  node_reveals["Scroll reveals<br/>[script.js]"]
  node_certificates["Certificate cards<br/>[script.js]"]
  node_contactform["Contact form handler<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_formsubmit["FormSubmit service"]

node_visitor -->|"browses"| node_portfolio
node_portfolio -->|"presents"| node_hero
node_portfolio -->|"presents"| node_skills
node_portfolio -->|"presents"| node_projects
node_portfolio -->|"presents"| node_journey
node_portfolio -->|"presents"| node_community
node_portfolio -->|"presents"| node_contact
node_portfolio -->|"uses images"| node_assets
node_portfolio -->|"styled by"| node_styles
node_portfolio -.->|"loads script"| node_navigation
node_navigation -->|"toggles menu"| node_portfolio
node_cursor -->|"updates cursor"| node_portfolio
node_reveals -->|"reveals sections"| node_portfolio
node_certificates -->|"handles cards"| node_portfolio
node_contact -->|"submits to"| node_contactform
node_contactform -->|"posts message"| node_formsubmit

click node_portfolio "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_hero "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_skills "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_projects "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_journey "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_community "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_contact "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html"
click node_assets "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/tree/main/images"
click node_styles "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/style.css"
click node_navigation "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js"
click node_cursor "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js"
click node_reveals "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js"
click node_certificates "https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js"
click node_contactform "https://github.com/mahmoudabdullah228/mahmoud-abdullah-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_hero,node_skills,node_projects,node_journey,node_community,node_contact toneBlue
class node_assets,node_styles toneAmber
class node_navigation,node_cursor,node_reveals,node_certificates,node_contactform toneMint
class node_visitor,node_formsubmit toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`
- [Hero and profile](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`
- [Skills terminal](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`
- [Projects gallery](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`
- [Learning journey](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`
- [Community and mentorship](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`
- [Contact section](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/index.html): `index.html`

### Visual presentation

- [Portfolio imagery](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/tree/main/images): `images`
- [Layout and styling](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/style.css): `style.css`

### Browser interactions

- [Mobile navigation](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js): `script.js`
- [Custom cursor](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js): `script.js`
- [Scroll reveals](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js): `script.js`
- [Certificate cards](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js): `script.js`
- [Contact form handler](https://github.com/mahmoudabdullah228/mahmoud-abdullah-portfolio/blob/main/script.js): `script.js`

### Other components

- **Visitor**
- **FormSubmit service**

## Connections

- Visitor → Portfolio page: browses (evidence: `README.md`)
- Portfolio page → Hero and profile: presents (evidence: `README.md`)
- Portfolio page → Skills terminal: presents (evidence: `README.md`)
- Portfolio page → Projects gallery: presents (evidence: `README.md`)
- Portfolio page → Learning journey: presents (evidence: `README.md`)
- Portfolio page → Community and mentorship: presents (evidence: `README.md`)
- Portfolio page → Contact section: presents (evidence: `README.md`)
- Portfolio page → Portfolio imagery: uses images (evidence: `README.md`)
- Portfolio page → Layout and styling: styled by (evidence: `README.md`)
- Portfolio page → Mobile navigation: loads script
- Mobile navigation → Portfolio page: toggles menu (evidence: `script.js`)
- Custom cursor → Portfolio page: updates cursor (evidence: `script.js`)
- Scroll reveals → Portfolio page: reveals sections (evidence: `script.js`)
- Certificate cards → Portfolio page: handles cards (evidence: `script.js`)
- Contact section → Contact form handler: submits to (evidence: `script.js`)
- Contact form handler → FormSubmit service: posts message (evidence: `script.js`)