# scratcher42/site-web architecture

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

- Interactive diagram: https://gitdiagram.com/scratcher42/site-web
- Repository: https://github.com/scratcher42/site-web

## Overview

This is a Vue website for a creator’s channel. Visitors use the navigation to reach an introduction, social-link page, favorites page, legal notices, and changelog; the router selects the page shown inside the shared shell. Sampled code also shows interactive color changes on several pages and hover audio on link cards. The Linktree and favorites components are present in the tree, but their implementations were not sampled, so their internal wiring is not asserted.

Main entry points: [`src/route.js`](https://github.com/scratcher42/site-web/blob/main/src/route.js) (Route table), [`src/App.vue`](https://github.com/scratcher42/site-web/blob/main/src/App.vue) (App shell), [`src/main.js`](https://github.com/scratcher42/site-web/blob/main/src/main.js) (Vue entry), [`src/services/randomColorProvider.js`](https://github.com/scratcher42/site-web/blob/main/src/services/randomColorProvider.js) (Random color)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["Vue entry<br/>[main.js]"]
  node_shell["App shell<br/>[App.vue]"]
  node_router["Route table<br/>[route.js]"]
  node_navbar["Navigation bar<br/>[NavBar.vue]"]
  node_footer["Site footer<br/>[MyFooter.vue]"]
end

subgraph group_pages["Site pages"]
  node_home["Home page<br/>[Home.vue]"]
  node_linktree["Linktree page<br/>[LinksList.vue]"]
  node_favorites["Favorites page<br/>[CoupCoeur.vue]"]
  node_legal["Legal page<br/>[Legal.vue]"]
  node_changelog["Changelog page<br/>[Changelogs.vue]"]
  node_notfound["Not found<br/>[NotFound.vue]"]
  node_linkbox["Social link card<br/>[LinkBox.vue]"]
end

subgraph group_services["Page services"]
  node_socialdata["Social link data"]
  node_color["Random color"]
  node_audio["Hover sound<br/>[lily_atk_01.ogg]"]
end

node_visitor(("Visitor"))
node_socialsites(("External social sites"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"creates app"| node_shell
node_entry -->|"installs router"| node_router
node_shell -->|"renders"| node_navbar
node_shell -->|"shows route view"| node_router
node_shell -->|"renders"| node_footer
node_navbar -->|"navigates"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_linktree
node_router -->|"routes to"| node_favorites
node_router -->|"routes to"| node_legal
node_router -->|"routes to"| node_changelog
node_router -->|"routes to"| node_notfound
node_home -->|"requests color"| node_color
node_legal -->|"requests color"| node_color
node_changelog -->|"requests color"| node_color
node_linkbox -->|"plays on hover"| node_audio
node_linkbox -->|"opens link"| node_socialsites

click node_entry "https://github.com/scratcher42/site-web/blob/main/src/main.js"
click node_shell "https://github.com/scratcher42/site-web/blob/main/src/App.vue"
click node_router "https://github.com/scratcher42/site-web/blob/main/src/route.js"
click node_navbar "https://github.com/scratcher42/site-web/blob/main/src/components/NavBar.vue"
click node_footer "https://github.com/scratcher42/site-web/blob/main/src/components/MyFooter.vue"
click node_home "https://github.com/scratcher42/site-web/blob/main/src/components/Home.vue"
click node_linktree "https://github.com/scratcher42/site-web/blob/main/src/components/LinksList.vue"
click node_favorites "https://github.com/scratcher42/site-web/blob/main/src/components/CoupCoeur.vue"
click node_legal "https://github.com/scratcher42/site-web/blob/main/src/components/Legal.vue"
click node_changelog "https://github.com/scratcher42/site-web/blob/main/src/components/Changelogs.vue"
click node_notfound "https://github.com/scratcher42/site-web/blob/main/src/components/NotFound.vue"
click node_linkbox "https://github.com/scratcher42/site-web/blob/main/src/components/LinkBox.vue"
click node_socialdata "https://github.com/scratcher42/site-web/blob/main/src/services/socialMediasService.js"
click node_color "https://github.com/scratcher42/site-web/blob/main/src/services/randomColorProvider.js"
click node_audio "https://github.com/scratcher42/site-web/blob/main/src/sounds/lily_atk_01.ogg"

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_entry,node_shell,node_router,node_navbar,node_footer toneBlue
class node_home,node_linktree,node_favorites,node_legal,node_changelog,node_notfound,node_linkbox toneAmber
class node_socialdata,node_color,node_audio toneMint
class node_visitor,node_socialsites toneIndigo
```

## Components

### Application shell

- [Vue entry](https://github.com/scratcher42/site-web/blob/main/src/main.js): `src/main.js`
- [App shell](https://github.com/scratcher42/site-web/blob/main/src/App.vue): `src/App.vue`
- [Route table](https://github.com/scratcher42/site-web/blob/main/src/route.js): `src/route.js`
- [Navigation bar](https://github.com/scratcher42/site-web/blob/main/src/components/NavBar.vue): `src/components/NavBar.vue`
- [Site footer](https://github.com/scratcher42/site-web/blob/main/src/components/MyFooter.vue): `src/components/MyFooter.vue`

### Site pages

- [Home page](https://github.com/scratcher42/site-web/blob/main/src/components/Home.vue): `src/components/Home.vue`
- [Linktree page](https://github.com/scratcher42/site-web/blob/main/src/components/LinksList.vue): `src/components/LinksList.vue`
- [Favorites page](https://github.com/scratcher42/site-web/blob/main/src/components/CoupCoeur.vue): `src/components/CoupCoeur.vue`
- [Legal page](https://github.com/scratcher42/site-web/blob/main/src/components/Legal.vue): `src/components/Legal.vue`
- [Changelog page](https://github.com/scratcher42/site-web/blob/main/src/components/Changelogs.vue): `src/components/Changelogs.vue`
- [Not found](https://github.com/scratcher42/site-web/blob/main/src/components/NotFound.vue): `src/components/NotFound.vue`
- [Social link card](https://github.com/scratcher42/site-web/blob/main/src/components/LinkBox.vue): `src/components/LinkBox.vue`

### Page services

- [Social link data](https://github.com/scratcher42/site-web/blob/main/src/services/socialMediasService.js): `src/services/socialMediasService.js`
- [Random color](https://github.com/scratcher42/site-web/blob/main/src/services/randomColorProvider.js): `src/services/randomColorProvider.js`
- [Hover sound](https://github.com/scratcher42/site-web/blob/main/src/sounds/lily_atk_01.ogg): `src/sounds/lily_atk_01.ogg`

### Other components

- **Visitor**
- **External social sites**

## Connections

- Visitor → Vue entry: opens site
- Vue entry → App shell: creates app
- Vue entry → Route table: installs router
- App shell → Navigation bar: renders
- App shell → Route table: shows route view
- App shell → Site footer: renders
- Navigation bar → Route table: navigates
- Route table → Home page: routes to
- Route table → Linktree page: routes to
- Route table → Favorites page: routes to
- Route table → Legal page: routes to
- Route table → Changelog page: routes to
- Route table → Not found: routes to
- Home page → Random color: requests color
- Legal page → Random color: requests color
- Changelog page → Random color: requests color
- Social link card → Hover sound: plays on hover
- Social link card → External social sites: opens link