# joekogit/joekonet-portfolio architecture

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

## Overview

joeko.net is a one-page personal portfolio presented as a small design-system document. A visitor views the business card and career changelog, then can adjust its appearance and explore interactive demonstrations. The README identifies the HTML, stylesheet, and script as the site’s core; the sampled script supports distinct controls, readouts, motion, navigation, and copy interactions. The HTML and stylesheet were not sampled, so links involving their specific contents rely on README descriptions rather than inspected markup or CSS.

Main entry points: [`index.html`](https://github.com/joekogit/joekonet-portfolio/blob/main/index.html) (Portfolio page), [`src/main.js`](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js) (Style controls), [`src/styles/site.css`](https://github.com/joekogit/joekonet-portfolio/blob/main/src/styles/site.css) (Site styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio page"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_career["Career changelog<br/>[index.html]"]
end

subgraph group_design["Design system"]
  node_styles["Site styles<br/>[site.css]"]
end

subgraph group_interaction["Page interactions"]
  node_controls["Style controls<br/>[main.js]"]
  node_readouts["Token and size readouts<br/>[main.js]"]
  node_frame["Frame width control<br/>[main.js]"]
  node_motion["Motion demo<br/>[main.js]"]
  node_docnav["Section navigation<br/>[main.js]"]
  node_copy["Copy controls<br/>[main.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio
node_portfolio -->|"presents"| node_career
node_portfolio -->|"styled by"| node_styles
node_visitor -->|"adjusts"| node_controls
node_controls -->|"sets CSS properties"| node_styles
node_controls -->|"refreshes"| node_readouts
node_visitor -->|"resizes"| node_frame
node_visitor -->|"replays"| node_motion
node_visitor -->|"navigates"| node_docnav
node_visitor -->|"copies text"| node_copy

click node_portfolio "https://github.com/joekogit/joekonet-portfolio/blob/main/index.html"
click node_career "https://github.com/joekogit/joekonet-portfolio/blob/main/index.html"
click node_styles "https://github.com/joekogit/joekonet-portfolio/blob/main/src/styles/site.css"
click node_controls "https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js"
click node_readouts "https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js"
click node_frame "https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js"
click node_motion "https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js"
click node_docnav "https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js"
click node_copy "https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.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_portfolio,node_career toneBlue
class node_styles toneAmber
class node_controls,node_readouts,node_frame,node_motion,node_docnav,node_copy toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio page

- [Portfolio page](https://github.com/joekogit/joekonet-portfolio/blob/main/index.html): `index.html`
- [Career changelog](https://github.com/joekogit/joekonet-portfolio/blob/main/index.html): `index.html`

### Design system

- [Site styles](https://github.com/joekogit/joekonet-portfolio/blob/main/src/styles/site.css): `src/styles/site.css`

### Page interactions

- [Style controls](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js): `src/main.js`
- [Token and size readouts](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js): `src/main.js`
- [Frame width control](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js): `src/main.js`
- [Motion demo](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js): `src/main.js`
- [Section navigation](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js): `src/main.js`
- [Copy controls](https://github.com/joekogit/joekonet-portfolio/blob/main/src/main.js): `src/main.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views (evidence: `README.md`)
- Portfolio page → Career changelog: presents (evidence: `README.md`)
- Portfolio page → Site styles: styled by (evidence: `README.md`)
- Visitor → Style controls: adjusts (evidence: `README.md`)
- Style controls → Site styles: sets CSS properties (evidence: `src/main.js`)
- Style controls → Token and size readouts: refreshes (evidence: `src/main.js`)
- Visitor → Frame width control: resizes (evidence: `src/main.js`)
- Visitor → Motion demo: replays (evidence: `src/main.js`)
- Visitor → Section navigation: navigates (evidence: `src/main.js`)
- Visitor → Copy controls: copies text (evidence: `src/main.js`)