# jmng1/formybestie architecture

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

- Interactive diagram: https://gitdiagram.com/jmng1/formybestie
- Repository: https://github.com/jmng1/formybestie

## Overview

This is a small static personal-memory website: visitors navigate its pages, browse dated photo and video memories in carousel or grid form, and listen to a playlist with playback and highlight controls. The JavaScript excerpt supports the letter countdown/lock, gallery rendering and navigation, and music-player behavior. The HTML and CSS establish the page structure and presentation; media files provide the memories and songs. Wiring for other page content is not described by the available excerpts.

Main entry points: [`script.js`](https://github.com/jmng1/formybestie/blob/main/script.js) (Interactive behavior), [`index.html`](https://github.com/jmng1/formybestie/blob/main/index.html) (Page content), [`style.css`](https://github.com/jmng1/formybestie/blob/main/style.css) (Visual styling), [`photos`](https://github.com/jmng1/formybestie/tree/main/photos) (Photo and video files)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Website interface"]
  node_html["Page content<br/>[index.html]"]
  node_styles["Visual styling<br/>[style.css]"]
  node_logic["Interactive behavior<br/>[script.js]"]
  node_letter["Letter countdown<br/>[script.js]"]
end

subgraph group_memories["Memory gallery"]
  node_gallery["Gallery controls<br/>[script.js]"]
  node_catalog["Memory catalog<br/>[script.js]"]
  node_media["Photo and video files"]
  node_carousel["Carousel and grid<br/>[script.js]"]
end

subgraph group_music["Music playback"]
  node_player["Playlist player<br/>[script.js]"]
  node_songs["Audio tracks"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_html
node_html -->|"loads script"| node_logic
node_html -->|"uses styles"| node_styles
node_logic -->|"checks lock"| node_letter
node_logic -->|"handles navigation"| node_gallery
node_gallery -->|"reads entries"| node_catalog
node_gallery -->|"updates views"| node_carousel
node_carousel -->|"loads images/video"| node_media
node_logic -->|"initializes playback"| node_player
node_player -->|"plays tracks"| node_songs

click node_html "https://github.com/jmng1/formybestie/blob/main/index.html"
click node_styles "https://github.com/jmng1/formybestie/blob/main/style.css"
click node_logic "https://github.com/jmng1/formybestie/blob/main/script.js"
click node_letter "https://github.com/jmng1/formybestie/blob/main/script.js"
click node_gallery "https://github.com/jmng1/formybestie/blob/main/script.js"
click node_catalog "https://github.com/jmng1/formybestie/blob/main/script.js"
click node_media "https://github.com/jmng1/formybestie/tree/main/photos"
click node_carousel "https://github.com/jmng1/formybestie/blob/main/script.js"
click node_player "https://github.com/jmng1/formybestie/blob/main/script.js"
click node_songs "https://github.com/jmng1/formybestie/tree/main/music"

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_html,node_styles,node_logic,node_letter toneBlue
class node_gallery,node_catalog,node_media,node_carousel toneAmber
class node_player,node_songs toneMint
class node_visitor toneIndigo
```

## Components

### Website interface

- [Page content](https://github.com/jmng1/formybestie/blob/main/index.html): `index.html`
- [Visual styling](https://github.com/jmng1/formybestie/blob/main/style.css): `style.css`
- [Interactive behavior](https://github.com/jmng1/formybestie/blob/main/script.js): `script.js`
- [Letter countdown](https://github.com/jmng1/formybestie/blob/main/script.js): `script.js`

### Memory gallery

- [Gallery controls](https://github.com/jmng1/formybestie/blob/main/script.js): `script.js`
- [Memory catalog](https://github.com/jmng1/formybestie/blob/main/script.js): `script.js`
- [Photo and video files](https://github.com/jmng1/formybestie/tree/main/photos): `photos`
- [Carousel and grid](https://github.com/jmng1/formybestie/blob/main/script.js): `script.js`

### Music playback

- [Playlist player](https://github.com/jmng1/formybestie/blob/main/script.js): `script.js`
- [Audio tracks](https://github.com/jmng1/formybestie/tree/main/music): `music`

### Other components

- **Visitor**

## Connections

- Visitor → Page content: opens site
- Page content → Interactive behavior: loads script
- Page content → Visual styling: uses styles
- Interactive behavior → Letter countdown: checks lock
- Interactive behavior → Gallery controls: handles navigation
- Gallery controls → Memory catalog: reads entries
- Gallery controls → Carousel and grid: updates views
- Carousel and grid → Photo and video files: loads images/video
- Interactive behavior → Playlist player: initializes playback
- Playlist player → Audio tracks: plays tracks