# ahtashamilyas/ahtashamilyas.github.io architecture

> Architecture diagram of the GitHub repository ahtashamilyas/ahtashamilyas.github.io, 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/ahtashamilyas/ahtashamilyas.github.io
- Repository: https://github.com/ahtashamilyas/ahtashamilyas.github.io

## Overview

This is a static personal portfolio for an AI, machine-learning, and robotics professional. Visitors browse an animated hero and portfolio content, navigate sections, explore education and skills, and can submit a contact form. The sampled JavaScript shows these as independent DOM-driven features; no module-to-module orchestration is evidenced. The contact handler explicitly posts to Formspree. The HTML and CSS were not sampled, so page wiring and the precise content sections cannot be verified.

Main entry points: [`src/js/contact.js`](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/contact.js) (Contact form), [`src/js/nav.js`](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/nav.js) (Section navigation), [`src/js/tabs.js`](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/tabs.js) (Education tabs), [`src/js/modal.js`](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/modal.js) (Services modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_hero["Hero animation<br/>[hero.js]"]
  node_three_scene["3D hero scene<br/>[three-scene.js]"]
  node_navigation["Section navigation<br/>[nav.js]"]
end

subgraph group_content["Content interactions"]
  node_education["Education tabs<br/>[tabs.js]"]
  node_skill_bars["Skill bars<br/>[skills.js]"]
  node_counters["Animated counters<br/>[counters.js]"]
end

subgraph group_engagement["Visitor engagement"]
  node_contact["Contact form<br/>[contact.js]"]
  node_services_modal["Services modal<br/>[modal.js]"]
end

subgraph group_polish["Motion and polish"]
  node_cursor["Custom cursor<br/>[cursor.js]"]
  node_preloader["Page preloader<br/>[preloader.js]"]
  node_scroll_reveal["Scroll reveals<br/>[reveal.js]"]
end

node_visitor(("Visitor"))
node_formspree{{"Formspree"}}

node_visitor -->|"uses menu"| node_navigation
node_visitor -->|"selects tabs"| node_education
node_visitor -->|"submits message"| node_contact
node_visitor -->|"opens modal"| node_services_modal
node_contact -->|"posts form"| node_formspree

click node_hero "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/hero.js"
click node_three_scene "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/three-scene.js"
click node_navigation "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/nav.js"
click node_education "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/tabs.js"
click node_skill_bars "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/skills.js"
click node_counters "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/counters.js"
click node_contact "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/contact.js"
click node_services_modal "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/modal.js"
click node_cursor "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/cursor.js"
click node_preloader "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/preloader.js"
click node_scroll_reveal "https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/reveal.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_hero,node_three_scene,node_navigation toneBlue
class node_education,node_skill_bars,node_counters toneAmber
class node_contact,node_services_modal toneMint
class node_cursor,node_preloader,node_scroll_reveal toneRose
class node_visitor,node_formspree toneIndigo
```

## Components

### Portfolio presentation

- [Hero animation](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/hero.js): `src/js/hero.js`
- [3D hero scene](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/three-scene.js): `src/js/three-scene.js`
- [Section navigation](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/nav.js): `src/js/nav.js`

### Content interactions

- [Education tabs](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/tabs.js): `src/js/tabs.js`
- [Skill bars](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/skills.js): `src/js/skills.js`
- [Animated counters](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/counters.js): `src/js/counters.js`

### Visitor engagement

- [Contact form](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/contact.js): `src/js/contact.js`
- [Services modal](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/modal.js): `src/js/modal.js`

### Motion and polish

- [Custom cursor](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/cursor.js): `src/js/cursor.js`
- [Page preloader](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/preloader.js): `src/js/preloader.js`
- [Scroll reveals](https://github.com/ahtashamilyas/ahtashamilyas.github.io/blob/main/src/js/reveal.js): `src/js/reveal.js`

### Other components

- **Visitor**
- **Formspree**

## Connections

- Visitor → Section navigation: uses menu (evidence: `src/js/nav.js`)
- Visitor → Education tabs: selects tabs (evidence: `src/js/tabs.js`)
- Visitor → Contact form: submits message (evidence: `src/js/contact.js`)
- Visitor → Services modal: opens modal (evidence: `src/js/modal.js`)
- Contact form → Formspree: posts form (evidence: `src/js/contact.js`)