# eomtaejun/swjb_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/eomtaejun/swjb_portfolio
- Repository: https://github.com/eomtaejun/swjb_portfolio

## Overview

This is a small static portfolio site. A visitor scrolls or hovers over page elements, and the JavaScript responds with header, progress, blur, reveal, and back-to-top effects. The tree contains HTML, CSS, JavaScript, and images, but only script.js was excerpted; the graph therefore focuses on interactions visible in that file and does not infer page sections or asset wiring beyond its selectors.

Main entry points: [`script.js`](https://github.com/eomtaejun/swjb_portfolio/blob/main/script.js) (Interaction handlers), [`index.html`](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html) (Scroll header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_page["Portfolio page<br/>[index.html]"]
  node_header["Scroll header<br/>[index.html]"]
  node_progress["Reading progress<br/>[index.html]"]
  node_hero["Hero blur<br/>[index.html]"]
  node_mouse["Mouse hint<br/>[index.html]"]
  node_about["About reveal<br/>[index.html]"]
  node_top["Back-to-top button<br/>[index.html]"]
end

subgraph group_behavior["Interactive behavior"]
  node_controller["Interaction handlers<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"scrolls or hovers"| node_controller
node_controller -->|"updates on scroll"| node_header
node_controller -->|"sets width"| node_progress
node_controller -->|"sets blur"| node_hero
node_controller -->|"toggles hint"| node_mouse
node_controller -->|"reveals text"| node_about
node_controller -->|"toggles display"| node_top

click node_page "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"
click node_controller "https://github.com/eomtaejun/swjb_portfolio/blob/main/script.js"
click node_header "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"
click node_progress "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"
click node_hero "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"
click node_mouse "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"
click node_about "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"
click node_top "https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html"

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_header,node_progress,node_hero,node_mouse,node_about,node_top toneBlue
class node_controller toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Portfolio page](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`
- [Scroll header](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`
- [Reading progress](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`
- [Hero blur](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`
- [Mouse hint](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`
- [About reveal](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`
- [Back-to-top button](https://github.com/eomtaejun/swjb_portfolio/blob/main/index.html): `index.html`

### Interactive behavior

- [Interaction handlers](https://github.com/eomtaejun/swjb_portfolio/blob/main/script.js): `script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Interaction handlers: scrolls or hovers (evidence: `script.js`)
- Interaction handlers → Scroll header: updates on scroll (evidence: `script.js`)
- Interaction handlers → Reading progress: sets width (evidence: `script.js`)
- Interaction handlers → Hero blur: sets blur (evidence: `script.js`)
- Interaction handlers → Mouse hint: toggles hint (evidence: `script.js`)
- Interaction handlers → About reveal: reveals text (evidence: `script.js`)
- Interaction handlers → Back-to-top button: toggles display (evidence: `script.js`)