# zainab-arslan-dar/portfolio architecture

> Architecture diagram of the GitHub repository zainab-arslan-dar/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/zainab-arslan-dar/portfolio
- Repository: https://github.com/zainab-arslan-dar/portfolio

## Overview

This is a static personal portfolio: visitors browse the profile and project showcase, filter projects, and use contact options or submit a client-side form. The README describes the page’s major sections and design capabilities; the sampled JavaScript confirms project rendering and filtering, navigation behavior, hero animation, and form handling. HTML and CSS implementation details were not sampled, so their specific wiring is shown only where documented.

Main entry points: [`index.html`](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js) (Project rendering), [`style.css`](https://github.com/zainab-arslan-dar/portfolio/blob/main/style.css) (Visual design)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio content"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_styles["Visual design<br/>[style.css]"]
  node_hero["Hero and about<br/>[index.html]"]
  node_skills["Skill cards<br/>[index.html]"]
  node_project_section["Project showcase<br/>[index.html]"]
  node_contact_section["Contact section<br/>[index.html]"]
end

subgraph group_interaction["Page interactions"]
  node_project_data["Project catalog<br/>[script.js]"]
  node_project_render["Project rendering<br/>[script.js]"]
  node_project_filters["Project filters<br/>[script.js]"]
  node_contact_form["Contact form<br/>[index.html]"]
  node_form_handler["Form handler<br/>[script.js]"]
  node_form_confirmation["Form confirmation<br/>[index.html]"]
  node_navigation["Responsive navigation<br/>[script.js]"]
  node_scroll_nav["Scroll navigation<br/>[script.js]"]
  node_hero_graphic["Network graphic<br/>[script.js]"]
end

subgraph group_integrations["Contact links"]
  node_email["Email contact<br/>[index.html]"]
  node_linkedin["LinkedIn profile<br/>[index.html]"]
  node_github["GitHub profile<br/>[index.html]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_portfolio
node_portfolio -->|"styled by"| node_styles
node_portfolio -->|"presents"| node_hero
node_portfolio -->|"presents"| node_skills
node_portfolio -->|"presents"| node_project_section
node_portfolio -->|"presents"| node_contact_section
node_project_data -->|"supplies data"| node_project_render
node_project_render -->|"renders cards"| node_project_section
node_project_filters -->|"requests filtered render"| node_project_render
node_visitor -->|"selects category"| node_project_filters
node_visitor -->|"submits"| node_contact_form
node_contact_form -->|"handles submit"| node_form_handler
node_form_handler -->|"sets message"| node_form_confirmation
node_visitor -->|"toggles menu"| node_navigation
node_navigation -->|"updates menu state"| node_portfolio
node_scroll_nav -->|"updates active link"| node_portfolio
node_portfolio -->|"provides graphic targets"| node_hero_graphic
node_hero_graphic -->|"creates network graphic"| node_hero
node_visitor -->|"uses contact link"| node_email
node_visitor -->|"opens profile"| node_linkedin
node_visitor -->|"opens profile"| node_github

click node_portfolio "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_styles "https://github.com/zainab-arslan-dar/portfolio/blob/main/style.css"
click node_hero "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_skills "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_project_section "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_project_data "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_project_render "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_project_filters "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_contact_section "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_contact_form "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_form_handler "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_form_confirmation "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_navigation "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_scroll_nav "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_hero_graphic "https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js"
click node_email "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_linkedin "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"
click node_github "https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html"

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_styles,node_hero,node_skills,node_project_section,node_contact_section toneBlue
class node_project_data,node_project_render,node_project_filters,node_contact_form,node_form_handler,node_form_confirmation,node_navigation,node_scroll_nav,node_hero_graphic toneAmber
class node_email,node_linkedin,node_github toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [Visual design](https://github.com/zainab-arslan-dar/portfolio/blob/main/style.css): `style.css`
- [Hero and about](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [Skill cards](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [Project showcase](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [Contact section](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`

### Page interactions

- [Project catalog](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`
- [Project rendering](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`
- [Project filters](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`
- [Contact form](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [Form handler](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`
- [Form confirmation](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [Responsive navigation](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`
- [Scroll navigation](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`
- [Network graphic](https://github.com/zainab-arslan-dar/portfolio/blob/main/script.js): `script.js`

### Contact links

- [Email contact](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [LinkedIn profile](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`
- [GitHub profile](https://github.com/zainab-arslan-dar/portfolio/blob/main/index.html): `index.html`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens
- Portfolio page → Visual design: styled by
- Portfolio page → Hero and about: presents
- Portfolio page → Skill cards: presents
- Portfolio page → Project showcase: presents
- Portfolio page → Contact section: presents
- Project catalog → Project rendering: supplies data
- Project rendering → Project showcase: renders cards
- Project filters → Project rendering: requests filtered render
- Visitor → Project filters: selects category
- Visitor → Contact form: submits
- Contact form → Form handler: handles submit
- Form handler → Form confirmation: sets message
- Visitor → Responsive navigation: toggles menu
- Responsive navigation → Portfolio page: updates menu state
- Scroll navigation → Portfolio page: updates active link
- Portfolio page → Network graphic: provides graphic targets
- Network graphic → Hero and about: creates network graphic
- Visitor → Email contact: uses contact link
- Visitor → LinkedIn profile: opens profile
- Visitor → GitHub profile: opens profile