# yuji-saan/sabian-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/yuji-saan/sabian-portfolio
- Repository: https://github.com/yuji-saan/sabian-portfolio

## Overview

This is a browser-based personal portfolio. Visitors browse its pages and interactive project gallery; the JavaScript also supports sidebar toggling, category filtering, card pointer effects, and animated role text. The sampled script shows these behaviors manipulating DOM elements, but the HTML and CSS were not excerpted, so their structure and wiring to the script cannot be verified here.

Main entry points: [`index.html`](https://github.com/yuji-saan/sabian-portfolio/blob/main/index.html) (Portfolio Pages), [`js/script.js`](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js) (Sidebar Toggle)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio Site"]
  node_document["Portfolio Pages<br/>[index.html]"]
end

subgraph group_interaction["Page Interactions"]
  node_sidebar["Sidebar Toggle<br/>[script.js]"]
  node_gallery["Lightbox Gallery<br/>[script.js]"]
  node_filter["Project Filtering<br/>[script.js]"]
  node_navigation["Page Navigation<br/>[script.js]"]
end

subgraph group_presentation["Presentation"]
  node_effects["Card Effects<br/>[script.js]"]
  node_roletext["Animated Role Text<br/>[script.js]"]
  node_styles["Visual Styles<br/>[style.css]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"browses"| node_document
node_sidebar -->|"toggles sidebar"| node_document
node_gallery -->|"updates modal"| node_document
node_filter -->|"filters projects"| node_document
node_navigation -->|"switches pages"| node_document
node_effects -->|"updates card position"| node_document
node_roletext -->|"updates role text"| node_document

click node_document "https://github.com/yuji-saan/sabian-portfolio/blob/main/index.html"
click node_sidebar "https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js"
click node_gallery "https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js"
click node_filter "https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js"
click node_navigation "https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js"
click node_effects "https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js"
click node_roletext "https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js"
click node_styles "https://github.com/yuji-saan/sabian-portfolio/blob/main/css/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_document toneBlue
class node_sidebar,node_gallery,node_filter,node_navigation toneAmber
class node_effects,node_roletext,node_styles toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio Site

- [Portfolio Pages](https://github.com/yuji-saan/sabian-portfolio/blob/main/index.html): `index.html`

### Page Interactions

- [Sidebar Toggle](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js): `js/script.js`
- [Lightbox Gallery](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js): `js/script.js`
- [Project Filtering](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js): `js/script.js`
- [Page Navigation](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js): `js/script.js`

### Presentation

- [Card Effects](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js): `js/script.js`
- [Animated Role Text](https://github.com/yuji-saan/sabian-portfolio/blob/main/js/script.js): `js/script.js`
- [Visual Styles](https://github.com/yuji-saan/sabian-portfolio/blob/main/css/style.css): `css/style.css`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio Pages: browses
- Sidebar Toggle → Portfolio Pages: toggles sidebar (evidence: `js/script.js`)
- Lightbox Gallery → Portfolio Pages: updates modal (evidence: `js/script.js`)
- Project Filtering → Portfolio Pages: filters projects (evidence: `js/script.js`)
- Page Navigation → Portfolio Pages: switches pages (evidence: `js/script.js`)
- Card Effects → Portfolio Pages: updates card position (evidence: `js/script.js`)
- Animated Role Text → Portfolio Pages: updates role text (evidence: `js/script.js`)