# gbaeke/static-web architecture

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

- Interactive diagram: https://gitdiagram.com/gbaeke/static-web
- Repository: https://github.com/gbaeke/static-web

## Overview

Photon is a responsive, gradient-heavy single-page website template with pre-styled elements, built on Sass. The tree identifies page, styling, script, and font assets, but no source excerpts were provided, so their specific runtime interactions cannot be verified. The only relationship shown is the documented visitor-to-page interaction; Sass-to-CSS and page-to-asset links are omitted rather than inferred.

Main entry points: [`index.html`](https://github.com/gbaeke/static-web/blob/master/index.html) (Single page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page"]
  node_single_page["Single page<br/>[index.html]"]
end

subgraph group_presentation["Presentation"]
  node_sass_styles["Sass styles<br/>[main.scss]"]
  node_css_styles["CSS styles<br/>[main.css]"]
  node_icon_fonts["Icon fonts<br/>[FontAwesome.otf]"]
end

subgraph group_scripts["Scripts"]
  node_main_script["Main script<br/>[main.js]"]
  node_utility_script["Utility script<br/>[util.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_single_page

click node_single_page "https://github.com/gbaeke/static-web/blob/master/index.html"
click node_sass_styles "https://github.com/gbaeke/static-web/blob/master/assets/sass/main.scss"
click node_css_styles "https://github.com/gbaeke/static-web/blob/master/assets/css/main.css"
click node_icon_fonts "https://github.com/gbaeke/static-web/blob/master/assets/fonts/FontAwesome.otf"
click node_main_script "https://github.com/gbaeke/static-web/blob/master/assets/js/main.js"
click node_utility_script "https://github.com/gbaeke/static-web/blob/master/assets/js/util.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_single_page toneBlue
class node_sass_styles,node_css_styles,node_icon_fonts toneAmber
class node_main_script,node_utility_script toneMint
class node_visitor toneIndigo
```

## Components

### Page

- [Single page](https://github.com/gbaeke/static-web/blob/master/index.html): `index.html`

### Presentation

- [Sass styles](https://github.com/gbaeke/static-web/blob/master/assets/sass/main.scss): `assets/sass/main.scss`
- [CSS styles](https://github.com/gbaeke/static-web/blob/master/assets/css/main.css): `assets/css/main.css`
- [Icon fonts](https://github.com/gbaeke/static-web/blob/master/assets/fonts/FontAwesome.otf): `assets/fonts/FontAwesome.otf`

### Scripts

- [Main script](https://github.com/gbaeke/static-web/blob/master/assets/js/main.js): `assets/js/main.js`
- [Utility script](https://github.com/gbaeke/static-web/blob/master/assets/js/util.js): `assets/js/util.js`

### Other components

- **Visitor**

## Connections

- Visitor → Single page: views (evidence: `README.txt`)