# goodnestraced/goodnestrace architecture

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

- Interactive diagram: https://gitdiagram.com/goodnestraced/goodnestrace
- Repository: https://github.com/goodnestraced/goodnestrace

## Overview

Goodnestrace is a browser-based portfolio site. Its main workflow is hash-based navigation: the app initializes the router, which fetches a page fragment and inserts it into the app area; translations are then reapplied. Separate modules provide Discord presence, background music, and animated particles. The README gives no capability detail, so this map relies on the sampled JavaScript and tree; page content is represented by its existing HTML paths, without inferring additional behavior from unsampled markup.

Main entry points: [`js/router.js`](https://github.com/goodnestraced/goodnestrace/blob/main/js/router.js) (Hash router), [`js/app.js`](https://github.com/goodnestraced/goodnestrace/blob/main/js/app.js) (App initializer), [`js/lanyard.js`](https://github.com/goodnestraced/goodnestrace/blob/main/js/lanyard.js) (Discord presence), [`js/i18n.js`](https://github.com/goodnestraced/goodnestrace/blob/main/js/i18n.js) (Translation manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Site navigation"]
  node_app["App initializer<br/>[app.js]"]
  node_router["Hash router<br/>[router.js]"]
end

subgraph group_content["Portfolio pages"]
  node_home["Home page<br/>[home.html]"]
  node_services["Services page<br/>[services.html]"]
  node_projects["Projects page<br/>[projects.html]"]
  node_contact["Contact page<br/>[contact.html]"]
end

subgraph group_experience["Interactive features"]
  node_presence["Discord presence<br/>[lanyard.js]"]
  node_music["Background music<br/>[music.js]"]
  node_particles["Particle background<br/>[particles.js]"]
end

subgraph group_localization["Localization"]
  node_i18n["Translation manager<br/>[i18n.js]"]
  node_english["English translations<br/>[en.json]"]
  node_spanish["Spanish translations<br/>[es.json]"]
end

node_visitor(("Visitor"))
node_lanyard_api{{"Lanyard service"}}

node_app -->|"initializes"| node_particles
node_app -->|"initializes"| node_i18n
node_app -->|"initializes"| node_router
node_app -->|"initializes"| node_presence
node_app -->|"initializes"| node_music
node_visitor -->|"changes route"| node_router
node_router -->|"fetches fragment"| node_home
node_router -->|"fetches fragment"| node_services
node_router -->|"fetches fragment"| node_projects
node_router -->|"fetches fragment"| node_contact
node_router -->|"reapplies translations"| node_i18n
node_presence -->|"subscribes"| node_lanyard_api
node_presence -->|"updates presence UI"| node_home
node_presence -->|"updates presence UI"| node_contact
node_i18n -->|"loads on selection"| node_english
node_i18n -->|"loads on selection"| node_spanish

click node_app "https://github.com/goodnestraced/goodnestrace/blob/main/js/app.js"
click node_router "https://github.com/goodnestraced/goodnestrace/blob/main/js/router.js"
click node_home "https://github.com/goodnestraced/goodnestrace/blob/main/pages/home.html"
click node_services "https://github.com/goodnestraced/goodnestrace/blob/main/pages/services.html"
click node_projects "https://github.com/goodnestraced/goodnestrace/blob/main/pages/projects.html"
click node_contact "https://github.com/goodnestraced/goodnestrace/blob/main/pages/contact.html"
click node_presence "https://github.com/goodnestraced/goodnestrace/blob/main/js/lanyard.js"
click node_music "https://github.com/goodnestraced/goodnestrace/blob/main/js/music.js"
click node_particles "https://github.com/goodnestraced/goodnestrace/blob/main/js/particles.js"
click node_i18n "https://github.com/goodnestraced/goodnestrace/blob/main/js/i18n.js"
click node_english "https://github.com/goodnestraced/goodnestrace/blob/main/languages/en.json"
click node_spanish "https://github.com/goodnestraced/goodnestrace/blob/main/languages/es.json"

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_app,node_router toneBlue
class node_home,node_services,node_projects,node_contact toneAmber
class node_presence,node_music,node_particles toneMint
class node_i18n,node_english,node_spanish toneRose
class node_visitor,node_lanyard_api toneIndigo
```

## Components

### Site navigation

- [App initializer](https://github.com/goodnestraced/goodnestrace/blob/main/js/app.js): `js/app.js`
- [Hash router](https://github.com/goodnestraced/goodnestrace/blob/main/js/router.js): `js/router.js`

### Portfolio pages

- [Home page](https://github.com/goodnestraced/goodnestrace/blob/main/pages/home.html): `pages/home.html`
- [Services page](https://github.com/goodnestraced/goodnestrace/blob/main/pages/services.html): `pages/services.html`
- [Projects page](https://github.com/goodnestraced/goodnestrace/blob/main/pages/projects.html): `pages/projects.html`
- [Contact page](https://github.com/goodnestraced/goodnestrace/blob/main/pages/contact.html): `pages/contact.html`

### Interactive features

- [Discord presence](https://github.com/goodnestraced/goodnestrace/blob/main/js/lanyard.js): `js/lanyard.js`
- [Background music](https://github.com/goodnestraced/goodnestrace/blob/main/js/music.js): `js/music.js`
- [Particle background](https://github.com/goodnestraced/goodnestrace/blob/main/js/particles.js): `js/particles.js`

### Localization

- [Translation manager](https://github.com/goodnestraced/goodnestrace/blob/main/js/i18n.js): `js/i18n.js`
- [English translations](https://github.com/goodnestraced/goodnestrace/blob/main/languages/en.json): `languages/en.json`
- [Spanish translations](https://github.com/goodnestraced/goodnestrace/blob/main/languages/es.json): `languages/es.json`

### Other components

- **Visitor**
- **Lanyard service**

## Connections

- App initializer → Particle background: initializes (evidence: `js/app.js`)
- App initializer → Translation manager: initializes (evidence: `js/app.js`)
- App initializer → Hash router: initializes (evidence: `js/app.js`)
- App initializer → Discord presence: initializes (evidence: `js/app.js`)
- App initializer → Background music: initializes (evidence: `js/app.js`)
- Visitor → Hash router: changes route (evidence: `js/router.js`)
- Hash router → Home page: fetches fragment (evidence: `js/router.js`)
- Hash router → Services page: fetches fragment (evidence: `js/router.js`)
- Hash router → Projects page: fetches fragment (evidence: `js/router.js`)
- Hash router → Contact page: fetches fragment (evidence: `js/router.js`)
- Hash router → Translation manager: reapplies translations (evidence: `js/router.js`)
- Discord presence → Lanyard service: subscribes (evidence: `js/lanyard.js`)
- Discord presence → Home page: updates presence UI (evidence: `js/lanyard.js`)
- Discord presence → Contact page: updates presence UI (evidence: `js/lanyard.js`)
- Translation manager → English translations: loads on selection (evidence: `js/i18n.js`)
- Translation manager → Spanish translations: loads on selection (evidence: `js/i18n.js`)