# its-abc/portfolio architecture

> Architecture diagram of the GitHub repository its-abc/portfolio, 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/its-abc/portfolio
- Repository: https://github.com/its-abc/portfolio

## Overview

This repository is a small static personal portfolio. Its browser-side script fills profile content and renders skills, project cards, and a roadmap; project filters, theme switching, and email copying provide interactive behavior. The page markup and styling are present in the tree, but were not excerpted, so their detailed structure and connections cannot be verified. The only evidenced external integrations are browser local storage and clipboard access.

Main entry points: [`script.js`](https://github.com/its-abc/portfolio/blob/main/script.js) (Theme toggle), [`index.html`](https://github.com/its-abc/portfolio/blob/main/index.html) (Page markup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_markup["Page markup<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
end

subgraph group_behavior["Page behavior"]
  node_portfolio["Portfolio content<br/>[script.js]"]
  node_rendering["Content rendering<br/>[script.js]"]
  node_project_filters["Project filters<br/>[script.js]"]
  node_theme_toggle["Theme toggle<br/>[script.js]"]
  node_email_copy["Email copying<br/>[script.js]"]
end

subgraph group_browser["Browser features"]
  node_local_storage[("Local storage")]
  node_clipboard["Clipboard API"]
end

node_visitor(("Visitor"))

node_visitor -->|"selects filter"| node_project_filters
node_visitor -->|"toggles theme"| node_theme_toggle
node_visitor -->|"copies email"| node_email_copy
node_portfolio -->|"provides content"| node_rendering
node_rendering -->|"updates elements"| node_markup
node_project_filters -->|"reloads projects"| node_rendering
node_theme_toggle -->|"persists theme"| node_local_storage
node_theme_toggle -->|"loads theme"| node_local_storage
node_email_copy -->|"writes email"| node_clipboard

click node_markup "https://github.com/its-abc/portfolio/blob/main/index.html"
click node_styles "https://github.com/its-abc/portfolio/blob/main/style.css"
click node_portfolio "https://github.com/its-abc/portfolio/blob/main/script.js"
click node_rendering "https://github.com/its-abc/portfolio/blob/main/script.js"
click node_project_filters "https://github.com/its-abc/portfolio/blob/main/script.js"
click node_theme_toggle "https://github.com/its-abc/portfolio/blob/main/script.js"
click node_email_copy "https://github.com/its-abc/portfolio/blob/main/script.js"

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_markup,node_styles toneBlue
class node_portfolio,node_rendering,node_project_filters,node_theme_toggle,node_email_copy toneAmber
class node_local_storage,node_clipboard toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Page markup](https://github.com/its-abc/portfolio/blob/main/index.html): `index.html`
- [Page styling](https://github.com/its-abc/portfolio/blob/main/style.css): `style.css`

### Page behavior

- [Portfolio content](https://github.com/its-abc/portfolio/blob/main/script.js): `script.js`
- [Content rendering](https://github.com/its-abc/portfolio/blob/main/script.js): `script.js`
- [Project filters](https://github.com/its-abc/portfolio/blob/main/script.js): `script.js`
- [Theme toggle](https://github.com/its-abc/portfolio/blob/main/script.js): `script.js`
- [Email copying](https://github.com/its-abc/portfolio/blob/main/script.js): `script.js`

### Browser features

- **Local storage**
- **Clipboard API**

### Other components

- **Visitor**

## Connections

- Visitor → Project filters: selects filter (evidence: `script.js`)
- Visitor → Theme toggle: toggles theme (evidence: `script.js`)
- Visitor → Email copying: copies email (evidence: `script.js`)
- Portfolio content → Content rendering: provides content (evidence: `script.js`)
- Content rendering → Page markup: updates elements (evidence: `script.js`)
- Project filters → Content rendering: reloads projects (evidence: `script.js`)
- Theme toggle → Local storage: persists theme (evidence: `script.js`)
- Theme toggle → Local storage: loads theme (evidence: `script.js`)
- Email copying → Clipboard API: writes email (evidence: `script.js`)