# ruka-byte/amp-website architecture

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

- Interactive diagram: https://gitdiagram.com/ruka-byte/amp-website
- Repository: https://github.com/ruka-byte/amp-website

## Overview

This is a small static gym website. Visitors browse the page and can use its navigation, smooth in-page scrolling, reveal-on-scroll effects, and inquiry modal. The sampled JavaScript implements those interactions by querying and updating page elements. The HTML and CSS were not excerpted, so their detailed content and wiring to the script are not verified.

Main entry points: [`index.html`](https://github.com/ruka-byte/amp-website/blob/main/index.html) (Gym Page), [`amp.js`](https://github.com/ruka-byte/amp-website/blob/main/amp.js) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Website"]
  node_page["Gym Page<br/>[index.html]"]
  node_styles["Page Styles<br/>[amp.css]"]
end

subgraph group_behavior["Page Interactions"]
  node_navigation["Navigation<br/>[amp.js]"]
  node_scroll["Scroll Effects<br/>[amp.js]"]
  node_inquiry["Inquiry Modal<br/>[amp.js]"]
end

node_visitor(("Visitor"))

node_navigation -->|"scrolls and toggles"| node_page
node_scroll -->|"reveals elements"| node_page
node_inquiry -->|"opens and closes"| node_page
node_visitor -->|"clicks links"| node_navigation
node_visitor -->|"requests inquiry"| node_inquiry

click node_page "https://github.com/ruka-byte/amp-website/blob/main/index.html"
click node_styles "https://github.com/ruka-byte/amp-website/blob/main/amp.css"
click node_navigation "https://github.com/ruka-byte/amp-website/blob/main/amp.js"
click node_scroll "https://github.com/ruka-byte/amp-website/blob/main/amp.js"
click node_inquiry "https://github.com/ruka-byte/amp-website/blob/main/amp.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_page,node_styles toneBlue
class node_navigation,node_scroll,node_inquiry toneAmber
class node_visitor toneIndigo
```

## Components

### Website

- [Gym Page](https://github.com/ruka-byte/amp-website/blob/main/index.html): `index.html`
- [Page Styles](https://github.com/ruka-byte/amp-website/blob/main/amp.css): `amp.css`

### Page Interactions

- [Navigation](https://github.com/ruka-byte/amp-website/blob/main/amp.js): `amp.js`
- [Scroll Effects](https://github.com/ruka-byte/amp-website/blob/main/amp.js): `amp.js`
- [Inquiry Modal](https://github.com/ruka-byte/amp-website/blob/main/amp.js): `amp.js`

### Other components

- **Visitor**

## Connections

- Navigation → Gym Page: scrolls and toggles (evidence: `amp.js`)
- Scroll Effects → Gym Page: reveals elements (evidence: `amp.js`)
- Inquiry Modal → Gym Page: opens and closes (evidence: `amp.js`)
- Visitor → Navigation: clicks links (evidence: `amp.js`)
- Visitor → Inquiry Modal: requests inquiry (evidence: `amp.js`)