# montasir132/portfolio- architecture

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

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

## Overview

This is a static personal-portfolio website. A visitor browses the portfolio sections, uses navigation and project popups or sliders to explore content, and can submit the contact form; the form script posts to the action URL supplied by the page and displays the response. The tree and sampled JavaScript support these interaction paths, but README documentation is minimal and the HTML content and external dependencies were not sampled, so their exact content and wiring are not inferred.

Main entry points: [`index.html`](https://github.com/montasir132/portfolio-/blob/main/index.html) (Portfolio page), [`js/active.js`](https://github.com/montasir132/portfolio-/blob/main/js/active.js) (Page interactions), [`js/contact-form.js`](https://github.com/montasir132/portfolio-/blob/main/js/contact-form.js) (Contact submission), [`js/one-page-nav.js`](https://github.com/montasir132/portfolio-/blob/main/js/one-page-nav.js) (Section navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_page["Portfolio page<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
  node_responsive["Responsive styling<br/>[responsive.css]"]
  node_darkmode["Dark mode styling<br/>[dark-mode.css]"]
end

subgraph group_interactions["Visitor interactions"]
  node_navigation["Mobile navigation<br/>[main.js]"]
  node_onepage["Section navigation<br/>[one-page-nav.js]"]
  node_smooth["Smooth scrolling<br/>[smooth-scroll.js]"]
  node_active["Page interactions<br/>[active.js]"]
  node_backtop["Scroll and theme controls<br/>[backToTop.js]"]
end

subgraph group_content["Portfolio content"]
  node_popup["Project popups<br/>[magnific-popup.js]"]
  node_contact["Contact submission<br/>[contact-form.js]"]
  node_projects["Project collection<br/>[index.html]"]
  node_testimonials["Testimonials<br/>[index.html]"]
  node_brands["Brand carousel<br/>[index.html]"]
  node_profile["Profile document<br/>[montasir.pdf]"]
end

node_visitor(("Visitor"))
node_formservice(("Form endpoint"))

node_visitor -->|"browses"| node_page
node_page -->|"loads"| node_navigation
node_page -->|"loads"| node_active
node_page -->|"loads"| node_contact
node_page -->|"loads"| node_popup
node_page -->|"loads"| node_onepage
node_page -->|"loads"| node_smooth
node_page -->|"loads"| node_backtop
node_page -->|"styles"| node_styles
node_page -->|"styles"| node_responsive
node_page -->|"styles"| node_darkmode
node_visitor -->|"opens menu"| node_navigation
node_visitor -->|"chooses section"| node_onepage
node_onepage -->|"scrolls sections"| node_page
node_visitor -->|"scrolls page"| node_smooth
node_visitor -->|"uses controls"| node_backtop
node_backtop -->|"updates display"| node_page
node_active -->|"filters"| node_projects
node_active -->|"starts carousel"| node_testimonials
node_active -->|"starts carousel"| node_brands
node_visitor -->|"opens project"| node_popup
node_popup -->|"shows item"| node_projects
node_visitor -->|"submits form"| node_contact
node_contact -->|"posts form data"| node_formservice
node_formservice -->|"returns result"| node_contact
node_visitor -->|"views document"| node_profile

click node_page "https://github.com/montasir132/portfolio-/blob/main/index.html"
click node_styles "https://github.com/montasir132/portfolio-/blob/main/css/style.css"
click node_responsive "https://github.com/montasir132/portfolio-/blob/main/css/responsive.css"
click node_darkmode "https://github.com/montasir132/portfolio-/blob/main/css/dark-mode.css"
click node_navigation "https://github.com/montasir132/portfolio-/blob/main/js/main.js"
click node_onepage "https://github.com/montasir132/portfolio-/blob/main/js/one-page-nav.js"
click node_smooth "https://github.com/montasir132/portfolio-/blob/main/js/smooth-scroll.js"
click node_active "https://github.com/montasir132/portfolio-/blob/main/js/active.js"
click node_backtop "https://github.com/montasir132/portfolio-/blob/main/js/backToTop.js"
click node_popup "https://github.com/montasir132/portfolio-/blob/main/js/magnific-popup.js"
click node_contact "https://github.com/montasir132/portfolio-/blob/main/js/contact-form.js"
click node_projects "https://github.com/montasir132/portfolio-/blob/main/index.html"
click node_testimonials "https://github.com/montasir132/portfolio-/blob/main/index.html"
click node_brands "https://github.com/montasir132/portfolio-/blob/main/index.html"
click node_profile "https://github.com/montasir132/portfolio-/blob/main/images/montasir.pdf"

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_page,node_styles,node_responsive,node_darkmode toneBlue
class node_navigation,node_onepage,node_smooth,node_active,node_backtop toneAmber
class node_popup,node_contact,node_projects,node_testimonials,node_brands,node_profile toneMint
class node_visitor,node_formservice toneIndigo
```

## Components

### Portfolio site

- [Portfolio page](https://github.com/montasir132/portfolio-/blob/main/index.html): `index.html`
- [Page styling](https://github.com/montasir132/portfolio-/blob/main/css/style.css): `css/style.css`
- [Responsive styling](https://github.com/montasir132/portfolio-/blob/main/css/responsive.css): `css/responsive.css`
- [Dark mode styling](https://github.com/montasir132/portfolio-/blob/main/css/dark-mode.css): `css/dark-mode.css`

### Visitor interactions

- [Mobile navigation](https://github.com/montasir132/portfolio-/blob/main/js/main.js): `js/main.js`
- [Section navigation](https://github.com/montasir132/portfolio-/blob/main/js/one-page-nav.js): `js/one-page-nav.js`
- [Smooth scrolling](https://github.com/montasir132/portfolio-/blob/main/js/smooth-scroll.js): `js/smooth-scroll.js`
- [Page interactions](https://github.com/montasir132/portfolio-/blob/main/js/active.js): `js/active.js`
- [Scroll and theme controls](https://github.com/montasir132/portfolio-/blob/main/js/backToTop.js): `js/backToTop.js`

### Portfolio content

- [Project popups](https://github.com/montasir132/portfolio-/blob/main/js/magnific-popup.js): `js/magnific-popup.js`
- [Contact submission](https://github.com/montasir132/portfolio-/blob/main/js/contact-form.js): `js/contact-form.js`
- [Project collection](https://github.com/montasir132/portfolio-/blob/main/index.html): `index.html`
- [Testimonials](https://github.com/montasir132/portfolio-/blob/main/index.html): `index.html`
- [Brand carousel](https://github.com/montasir132/portfolio-/blob/main/index.html): `index.html`
- [Profile document](https://github.com/montasir132/portfolio-/blob/main/images/montasir.pdf): `images/montasir.pdf`

### Other components

- **Visitor**
- **Form endpoint**

## Connections

- Visitor → Portfolio page: browses
- Portfolio page → Mobile navigation: loads
- Portfolio page → Page interactions: loads
- Portfolio page → Contact submission: loads
- Portfolio page → Project popups: loads
- Portfolio page → Section navigation: loads
- Portfolio page → Smooth scrolling: loads
- Portfolio page → Scroll and theme controls: loads
- Portfolio page → Page styling: styles
- Portfolio page → Responsive styling: styles
- Portfolio page → Dark mode styling: styles
- Visitor → Mobile navigation: opens menu
- Visitor → Section navigation: chooses section
- Section navigation → Portfolio page: scrolls sections
- Visitor → Smooth scrolling: scrolls page
- Visitor → Scroll and theme controls: uses controls
- Scroll and theme controls → Portfolio page: updates display
- Page interactions → Project collection: filters
- Page interactions → Testimonials: starts carousel
- Page interactions → Brand carousel: starts carousel
- Visitor → Project popups: opens project
- Project popups → Project collection: shows item
- Visitor → Contact submission: submits form
- Contact submission → Form endpoint: posts form data
- Form endpoint → Contact submission: returns result
- Visitor → Profile document: views document