# fardiiin/fardiiin.github.io architecture

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

- Interactive diagram: https://gitdiagram.com/fardiiin/fardiiin.github.io
- Repository: https://github.com/fardiiin/fardiiin.github.io

## Overview

This is a static portfolio site. Visitors read the page, filter its projects, choose an appearance, and follow project or contact links. The sampled app.js confirms theme persistence and project filtering; other page, styling, asset, and external-service relationships are documented in the README rather than sampled source.

Main entry points: [`index.html`](https://github.com/fardiiin/fardiiin.github.io/blob/main/index.html) (Portfolio page), [`app.js`](https://github.com/fardiiin/fardiiin.github.io/blob/main/app.js) (Theme and filters), [`style.css`](https://github.com/fardiiin/fardiiin.github.io/blob/main/style.css) (Responsive styles), [`assets`](https://github.com/fardiiin/fardiiin.github.io/tree/main/assets) (Local images)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_visitor(("Visitor"))
node_page["Portfolio page<br/>[index.html]"]
node_styles["Responsive styles<br/>[style.css]"]
node_behavior["Theme and filters<br/>[app.js]"]
node_preferences[("Browser storage")]
node_assets["Local images"]
node_projects["GitHub projects"]
node_email["Email application"]
node_fonts["Google Fonts"]

node_visitor -->|"views"| node_page
node_behavior -->|"updates controls"| node_page
node_behavior -->|"reads and writes"| node_preferences
node_styles -->|"styles"| node_page
node_page -->|"uses images"| node_assets
node_page -->|"links to"| node_projects
node_page -->|"opens contact"| node_email
node_page -->|"loads fonts"| node_fonts

click node_page "https://github.com/fardiiin/fardiiin.github.io/blob/main/index.html"
click node_styles "https://github.com/fardiiin/fardiiin.github.io/blob/main/style.css"
click node_behavior "https://github.com/fardiiin/fardiiin.github.io/blob/main/app.js"
click node_assets "https://github.com/fardiiin/fardiiin.github.io/tree/main/assets"

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_visitor,node_projects,node_email,node_fonts toneIndigo
class node_page,node_styles,node_behavior,node_assets toneTeal
class node_preferences toneAmber
```

## Components

### Other components

- **Visitor**
- [Portfolio page](https://github.com/fardiiin/fardiiin.github.io/blob/main/index.html): `index.html`
- [Responsive styles](https://github.com/fardiiin/fardiiin.github.io/blob/main/style.css): `style.css`
- [Theme and filters](https://github.com/fardiiin/fardiiin.github.io/blob/main/app.js): `app.js`
- **Browser storage**
- [Local images](https://github.com/fardiiin/fardiiin.github.io/tree/main/assets): `assets`
- **GitHub projects**
- **Email application**
- **Google Fonts**

## Connections

- Visitor → Portfolio page: views (evidence: `README.md`)
- Theme and filters → Portfolio page: updates controls (evidence: `app.js`)
- Theme and filters → Browser storage: reads and writes (evidence: `app.js`)
- Responsive styles → Portfolio page: styles (evidence: `README.md`)
- Portfolio page → Local images: uses images (evidence: `README.md`)
- Portfolio page → GitHub projects: links to (evidence: `README.md`)
- Portfolio page → Email application: opens contact (evidence: `README.md`)
- Portfolio page → Google Fonts: loads fonts (evidence: `README.md`)