# bennetkowin/kowin-creative architecture

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

- Interactive diagram: https://gitdiagram.com/bennetkowin/kowin-creative
- Repository: https://github.com/bennetkowin/kowin-creative

## Overview

Kowin Creative is a dependency-free portfolio website opened in a browser. Its visible page is the user entry point; the sampled JavaScript adds menu, scrolling, section-navigation, and image-lightbox interactions. The source excerpts do not include `index.html`, so the page-to-script and stylesheet wiring, and the PDF’s role, cannot be confirmed.

Main entry points: [`index.html`](https://github.com/bennetkowin/kowin-creative/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/bennetkowin/kowin-creative/blob/main/script.js) (Navigation controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_visitor(("Visitor"))
node_page["Portfolio page<br/>[index.html]"]
node_navigation["Navigation controls<br/>[script.js]"]
node_scroll["Scroll effects<br/>[script.js]"]
node_lightbox["Image lightbox<br/>[script.js]"]
node_section_tracking["Section tracking<br/>[script.js]"]

node_visitor -->|"opens"| node_page
node_navigation -->|"updates menu"| node_page
node_scroll -->|"updates visibility"| node_page
node_lightbox -->|"shows images"| node_page
node_section_tracking -->|"marks sections"| node_page

click node_page "https://github.com/bennetkowin/kowin-creative/blob/main/index.html"
click node_navigation "https://github.com/bennetkowin/kowin-creative/blob/main/script.js"
click node_scroll "https://github.com/bennetkowin/kowin-creative/blob/main/script.js"
click node_lightbox "https://github.com/bennetkowin/kowin-creative/blob/main/script.js"
click node_section_tracking "https://github.com/bennetkowin/kowin-creative/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_visitor toneIndigo
class node_page,node_navigation,node_scroll,node_lightbox,node_section_tracking toneTeal
```

## Components

### Other components

- **Visitor**
- [Portfolio page](https://github.com/bennetkowin/kowin-creative/blob/main/index.html): `index.html`
- [Navigation controls](https://github.com/bennetkowin/kowin-creative/blob/main/script.js): `script.js`
- [Scroll effects](https://github.com/bennetkowin/kowin-creative/blob/main/script.js): `script.js`
- [Image lightbox](https://github.com/bennetkowin/kowin-creative/blob/main/script.js): `script.js`
- [Section tracking](https://github.com/bennetkowin/kowin-creative/blob/main/script.js): `script.js`

## Connections

- Visitor → Portfolio page: opens
- Navigation controls → Portfolio page: updates menu
- Scroll effects → Portfolio page: updates visibility
- Image lightbox → Portfolio page: shows images
- Section tracking → Portfolio page: marks sections