# qotjdals123/seongminbae.github.io architecture

> Architecture diagram of the GitHub repository qotjdals123/seongminbae.github.io, 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/qotjdals123/seongminbae.github.io
- Repository: https://github.com/qotjdals123/seongminbae.github.io

## Overview

This is a static personal portfolio/resume site. The intended user journey is to view the portfolio, explore career details and an interactive timeline, and optionally produce a print-friendly resume. The sampled JavaScript also renders certification, contribution, and activity sections. The README is empty, and the HTML and data file were not sampled, so connections between the page, script, and data are shown as unverified rather than asserted.

Main entry points: [`script.js`](https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js) (Portfolio sections), [`index.html`](https://github.com/qotjdals123/seongminbae.github.io/blob/master/index.html) (Portfolio page), [`data.json`](https://github.com/qotjdals123/seongminbae.github.io/blob/master/data.json) (Portfolio data), [`print.css`](https://github.com/qotjdals123/seongminbae.github.io/blob/master/print.css) (Print styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio"]
  node_site["Portfolio page<br/>[index.html]"]
  node_records[("Portfolio data<br/>[data.json]")]
  node_sections["Portfolio sections<br/>[script.js]"]
end

subgraph group_interactions["Career interactions"]
  node_project_detail["Project details<br/>[script.js]"]
  node_career_timeline["Career timeline<br/>[script.js]"]
  node_section_navigation["Section navigation<br/>[script.js]"]
end

subgraph group_output["Resume output"]
  node_print_layout["Print layout<br/>[script.js]"]
  node_print_styles["Print styling<br/>[print.css]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens"| node_site
node_site -.->|"loads"| node_sections
node_sections -.->|"reads"| node_records
node_sections -.->|"opens"| node_project_detail
node_sections -.->|"opens"| node_career_timeline
node_sections -.->|"updates"| node_section_navigation
node_visitor -.->|"prints"| node_print_layout
node_print_layout -.->|"uses"| node_print_styles

click node_site "https://github.com/qotjdals123/seongminbae.github.io/blob/master/index.html"
click node_records "https://github.com/qotjdals123/seongminbae.github.io/blob/master/data.json"
click node_sections "https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js"
click node_project_detail "https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js"
click node_career_timeline "https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js"
click node_section_navigation "https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js"
click node_print_layout "https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js"
click node_print_styles "https://github.com/qotjdals123/seongminbae.github.io/blob/master/print.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_site,node_records,node_sections toneBlue
class node_project_detail,node_career_timeline,node_section_navigation toneAmber
class node_print_layout,node_print_styles toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio

- [Portfolio page](https://github.com/qotjdals123/seongminbae.github.io/blob/master/index.html): `index.html`
- [Portfolio data](https://github.com/qotjdals123/seongminbae.github.io/blob/master/data.json): `data.json`
- [Portfolio sections](https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js): `script.js`

### Career interactions

- [Project details](https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js): `script.js`
- [Career timeline](https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js): `script.js`
- [Section navigation](https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js): `script.js`

### Resume output

- [Print layout](https://github.com/qotjdals123/seongminbae.github.io/blob/master/script.js): `script.js`
- [Print styling](https://github.com/qotjdals123/seongminbae.github.io/blob/master/print.css): `print.css`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens
- Portfolio page → Portfolio sections: loads
- Portfolio sections → Portfolio data: reads
- Portfolio sections → Project details: opens (evidence: `script.js`)
- Portfolio sections → Career timeline: opens (evidence: `script.js`)
- Portfolio sections → Section navigation: updates (evidence: `script.js`)
- Visitor → Print layout: prints
- Print layout → Print styling: uses