# engineer-ahmed-said-official/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/engineer-ahmed-said-official/portfolio
- Repository: https://github.com/engineer-ahmed-said-official/portfolio

## Overview

This repository is a personal portfolio and CV website. Visitors browse the home page, projects, desktop-app showcases, certifications and contact/review pages; the browser scripts add interactive presentation, project-image browsing, and review sharing. Reviews can load from Firebase, while Firebase configuration initializes the optional remote integration. The tree and excerpts support these major features, but the README is empty and the HTML pages and unsampled portions of script.js were not inspected, so page-to-script wiring beyond the sampled behavior is shown conservatively.

Main entry points: [`index.html`](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/index.html) (Home portfolio), [`script.js`](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js) (Project galleries), [`firebase-config.js`](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/firebase-config.js) (Firebase setup), [`projects.html`](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/projects.html) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home portfolio<br/>[index.html]"]
  node_projects["Projects<br/>[projects.html]"]
  node_desktop["Desktop apps<br/>[desktop-apps.html]"]
  node_certs["Certifications"]
  node_reviews["Reviews<br/>[reviews.html]"]
  node_contact["Contact<br/>[contact.html]"]
end

subgraph group_interactions["Browser interactions"]
  node_site_ui["Theme and navigation<br/>[script.js]"]
  node_navbar["Navigation effects<br/>[navbar.js]"]
  node_carousel["Project galleries<br/>[script.js]"]
  node_review_ui["Review interactions<br/>[script.js]"]
  node_code_window["Code examples<br/>[code-window.js]"]
  node_typing["Typing effect<br/>[typing.js]"]
  node_scroll_fx["Scroll animations<br/>[common.js]"]
  node_particles["Particle backdrop<br/>[particles-init.js]"]
end

subgraph group_content["Portfolio content"]
  node_gallery_images["Project images"]
  node_credentials["CV and certificates"]
end

subgraph group_integrations["External services"]
  node_firebase_config["Firebase setup<br/>[firebase-config.js]"]
  node_firebase[("Firebase services")]
  node_browser_store[("Browser local storage")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_projects
node_visitor -->|"opens"| node_desktop
node_visitor -->|"opens"| node_certs
node_visitor -->|"opens"| node_reviews
node_visitor -->|"opens"| node_contact
node_home -->|"supports navigation"| node_navbar
node_home -->|"runs interactions"| node_site_ui
node_home -->|"runs effect"| node_typing
node_home -->|"runs animations"| node_scroll_fx
node_home -->|"configures backdrop"| node_particles
node_home -->|"opens examples"| node_code_window
node_projects -->|"runs galleries"| node_carousel
node_desktop -->|"runs galleries"| node_carousel
node_carousel -->|"checks and displays"| node_gallery_images
node_certs -->|"presents documents"| node_credentials
node_reviews -->|"runs review UI"| node_review_ui
node_review_ui -.->|"reads reviews"| node_firebase
node_firebase_config -.->|"initializes"| node_firebase
node_firebase_config -.->|"triggers loading"| node_review_ui
node_site_ui -->|"saves theme"| node_browser_store

click node_home "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/index.html"
click node_projects "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/projects.html"
click node_desktop "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/desktop-apps.html"
click node_certs "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/certifications.html"
click node_reviews "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/reviews.html"
click node_contact "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/contact.html"
click node_site_ui "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js"
click node_navbar "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/navbar.js"
click node_carousel "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js"
click node_review_ui "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js"
click node_code_window "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/code-window.js"
click node_typing "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/typing.js"
click node_scroll_fx "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/common.js"
click node_particles "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/particles-init.js"
click node_gallery_images "https://github.com/engineer-ahmed-said-official/portfolio/tree/main/images/desktop-apps"
click node_credentials "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/Ahmed_Said_Bashir_CV.pdf"
click node_firebase_config "https://github.com/engineer-ahmed-said-official/portfolio/blob/main/firebase-config.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_home,node_projects,node_desktop,node_certs,node_reviews,node_contact toneBlue
class node_site_ui,node_navbar,node_carousel,node_review_ui,node_code_window,node_typing,node_scroll_fx,node_particles toneAmber
class node_gallery_images,node_credentials toneMint
class node_firebase_config,node_firebase,node_browser_store toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio pages

- [Home portfolio](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/index.html): `index.html`
- [Projects](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/projects.html): `projects.html`
- [Desktop apps](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/desktop-apps.html): `desktop-apps.html`
- [Certifications](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/certifications.html): `certifications.html`
- [Reviews](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/reviews.html): `reviews.html`
- [Contact](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/contact.html): `contact.html`

### Browser interactions

- [Theme and navigation](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js): `script.js`
- [Navigation effects](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/navbar.js): `navbar.js`
- [Project galleries](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js): `script.js`
- [Review interactions](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/script.js): `script.js`
- [Code examples](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/code-window.js): `code-window.js`
- [Typing effect](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/typing.js): `typing.js`
- [Scroll animations](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/common.js): `common.js`
- [Particle backdrop](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/particles-init.js): `particles-init.js`

### Portfolio content

- [Project images](https://github.com/engineer-ahmed-said-official/portfolio/tree/main/images/desktop-apps): `images/desktop-apps`
- [CV and certificates](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/Ahmed_Said_Bashir_CV.pdf): `Ahmed_Said_Bashir_CV.pdf`

### External services

- [Firebase setup](https://github.com/engineer-ahmed-said-official/portfolio/blob/main/firebase-config.js): `firebase-config.js`
- **Firebase services**
- **Browser local storage**

### Other components

- **Visitor**

## Connections

- Visitor → Home portfolio: opens
- Visitor → Projects: opens
- Visitor → Desktop apps: opens
- Visitor → Certifications: opens
- Visitor → Reviews: opens
- Visitor → Contact: opens
- Home portfolio → Navigation effects: supports navigation
- Home portfolio → Theme and navigation: runs interactions
- Home portfolio → Typing effect: runs effect
- Home portfolio → Scroll animations: runs animations
- Home portfolio → Particle backdrop: configures backdrop
- Home portfolio → Code examples: opens examples
- Projects → Project galleries: runs galleries
- Desktop apps → Project galleries: runs galleries
- Project galleries → Project images: checks and displays
- Certifications → CV and certificates: presents documents
- Reviews → Review interactions: runs review UI
- Review interactions → Firebase services: reads reviews
- Firebase setup → Firebase services: initializes
- Firebase setup → Review interactions: triggers loading
- Theme and navigation → Browser local storage: saves theme