# rustomordiz/website architecture

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

- Interactive diagram: https://gitdiagram.com/rustomordiz/website
- Repository: https://github.com/rustomordiz/website

## Overview

This is a static portfolio website. A visitor views the portfolio and can use its page controls to switch sections, follow a URL hash to a section, and toggle the light theme; project pages and certificate materials provide portfolio content. The sampled JavaScript shows those interactions, but the HTML wiring and page-to-page links were not inspected, so relationships beyond the demonstrated DOM behavior are omitted or marked unverified.

Main entry points: [`index.html`](https://github.com/rustomordiz/website/blob/main/index.html) (Portfolio page), [`app.js`](https://github.com/rustomordiz/website/blob/main/app.js) (Page interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_interactions["Page interactions<br/>[app.js]"]
end

subgraph group_content["Portfolio content"]
  node_project_pages["Project pages"]
  node_certificates["Certificates"]
  node_images["Portfolio images"]
end

subgraph group_presentation["Presentation"]
  node_styles["Page styles<br/>[style.scss]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"views"| node_portfolio
node_portfolio -.->|"uses controls"| node_interactions
node_interactions -->|"updates sections"| node_portfolio
node_interactions -->|"toggles theme"| node_portfolio

click node_portfolio "https://github.com/rustomordiz/website/blob/main/index.html"
click node_interactions "https://github.com/rustomordiz/website/blob/main/app.js"
click node_project_pages "https://github.com/rustomordiz/website/tree/main/projects"
click node_certificates "https://github.com/rustomordiz/website/tree/main/docs/certificates"
click node_images "https://github.com/rustomordiz/website/tree/main/img"
click node_styles "https://github.com/rustomordiz/website/blob/main/styles/style.scss"

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_interactions toneBlue
class node_project_pages,node_certificates,node_images toneAmber
class node_styles toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Portfolio page](https://github.com/rustomordiz/website/blob/main/index.html): `index.html`
- [Page interactions](https://github.com/rustomordiz/website/blob/main/app.js): `app.js`

### Portfolio content

- [Project pages](https://github.com/rustomordiz/website/tree/main/projects): `projects`
- [Certificates](https://github.com/rustomordiz/website/tree/main/docs/certificates): `docs/certificates`
- [Portfolio images](https://github.com/rustomordiz/website/tree/main/img): `img`

### Presentation

- [Page styles](https://github.com/rustomordiz/website/blob/main/styles/style.scss): `styles/style.scss`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views
- Portfolio page → Page interactions: uses controls
- Page interactions → Portfolio page: updates sections (evidence: `app.js`)
- Page interactions → Portfolio page: toggles theme (evidence: `app.js`)