# zaidxyz/studentportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/zaidxyz/studentportfolio
- Repository: https://github.com/zaidxyz/studentportfolio

## Overview

This is a small interactive webpage. Visitors can toggle dark mode and move a cursor glow; the script also reveals elements as they enter view. The JavaScript behavior is supported by the sampled source, but the HTML and CSS contents were not available, so their specific structure and styling are uncertain.

Main entry points: [`script.js`](https://github.com/zaidxyz/studentportfolio/blob/main/script.js) (Page interactions), [`index.html`](https://github.com/zaidxyz/studentportfolio/blob/main/index.html) (Page markup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page_runtime["Page runtime"]
  node_page["Page markup<br/>[index.html]"]
  node_interaction_script["Page interactions<br/>[script.js]"]
  node_page_styles["Page styles<br/>[style.css]"]
end

node_visitor(("Visitor"))
node_browser_observer["Intersection observer"]

node_visitor -->|"clicks or moves"| node_interaction_script
node_interaction_script -->|"updates classes and text"| node_page
node_interaction_script -->|"observes elements"| node_browser_observer
node_browser_observer -->|"reports intersections"| node_interaction_script
node_interaction_script -->|"reveals elements"| node_page

click node_page "https://github.com/zaidxyz/studentportfolio/blob/main/index.html"
click node_interaction_script "https://github.com/zaidxyz/studentportfolio/blob/main/script.js"
click node_page_styles "https://github.com/zaidxyz/studentportfolio/blob/main/style.css"

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_interaction_script,node_page_styles toneBlue
class node_visitor toneIndigo
class node_browser_observer toneMint
```

## Components

### Page runtime

- [Page markup](https://github.com/zaidxyz/studentportfolio/blob/main/index.html): `index.html`
- [Page interactions](https://github.com/zaidxyz/studentportfolio/blob/main/script.js): `script.js`
- [Page styles](https://github.com/zaidxyz/studentportfolio/blob/main/style.css): `style.css`

### Other components

- **Visitor**
- **Intersection observer**

## Connections

- Visitor → Page interactions: clicks or moves
- Page interactions → Page markup: updates classes and text
- Page interactions → Intersection observer: observes elements
- Intersection observer → Page interactions: reports intersections
- Page interactions → Page markup: reveals elements