# aristrahatsuyu/lyntrix architecture

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

- Interactive diagram: https://gitdiagram.com/aristrahatsuyu/lyntrix
- Repository: https://github.com/aristrahatsuyu/lyntrix

## Overview

Lyntrix is a customizable personal-resume and identity showcase, with an embedded music player as a substantial secondary experience. The principal workflow is a visitor opening the home page, viewing animated background and profile content, then following showcased links; visitors can also operate the music card and its playlist/lyrics controls. The page composition and audio internals are visible in sampled source; other resume sections and configuration behavior are represented only at the documented or directory level.

Main entry points: [`pages/index.vue`](https://github.com/aristrahatsuyu/lyntrix/blob/main/pages/index.vue) (Home page), [`composables/audio/useAudioPlayer.ts`](https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioPlayer.ts) (Audio player), [`components/MusicCard.vue`](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/MusicCard.vue) (Music card), [`app.vue`](https://github.com/aristrahatsuyu/lyntrix/blob/main/app.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Resume presentation"]
  node_home["Home page<br/>[index.vue]"]
  node_profile_content["Profile content<br/>[Content.vue]"]
  node_banner["Identity banner<br/>[Banner.vue]"]
  node_background["Background display<br/>[FlowImage.vue]"]
  node_footer["Footer and links<br/>[Footer.vue]"]
  node_profile_data["Profile starter data<br/>[profile.temp.json]"]
end

subgraph group_experience["Motion and theming"]
  node_app_shell["App shell<br/>[app.vue]"]
  node_mode_switch["Theme switch<br/>[ModeSwitch.vue]"]
  node_cursor["Custom cursor<br/>[Cursor.vue]"]
  node_particles["Particle effects<br/>[Particles.vue]"]
  node_scroll_plugin["Smooth scrolling<br/>[lenis.client.ts]"]
end

subgraph group_music_ui["Music experience"]
  node_music_card["Music card<br/>[MusicCard.vue]"]
  node_stacked_panel["Playlist and lyrics<br/>[StackedPanel.vue]"]
  node_album_cover["Album artwork<br/>[AlbumCover.vue]"]
end

subgraph group_audio["Audio runtime"]
  node_player["Audio player<br/>[useAudioPlayer.ts]"]
  node_playlist["Playlist controller"]
  node_equalizer["Audio equalizer"]
  node_buffer_cache[("Buffer state cache")]
  node_art_cache[("Artwork cache<br/>[useArtworkCache.ts]")]
end

node_visitor(("Visitor"))
node_media_sources(("Audio and artwork sources"))
node_browser_audio["Browser audio APIs"]

node_visitor -->|"opens"| node_home
node_app_shell -->|"renders"| node_home
node_app_shell -->|"renders"| node_mode_switch
node_app_shell -->|"renders"| node_cursor
node_home -->|"renders"| node_particles
node_home -->|"renders"| node_background
node_home -->|"renders"| node_banner
node_home -->|"renders"| node_profile_content
node_home -->|"renders"| node_footer
node_profile_data -.->|"configures"| node_profile_content
node_home -.->|"uses scrolling"| node_scroll_plugin
node_profile_content -.->|"presents"| node_music_card
node_music_card -.->|"renders controls"| node_stacked_panel
node_music_card -.->|"renders artwork"| node_album_cover
node_music_card -.->|"uses playback"| node_player
node_stacked_panel -.->|"controls queue"| node_playlist
node_playlist -->|"controls tracks"| node_player
node_player -->|"uses processing"| node_equalizer
node_player -->|"stores buffer state"| node_buffer_cache
node_player -->|"loads artwork"| node_art_cache
node_player -->|"plays audio"| node_browser_audio
node_player -.->|"loads tracks"| node_media_sources
node_art_cache -.->|"fetches artwork"| node_media_sources
node_album_cover -.->|"uses cached art"| node_art_cache

click node_home "https://github.com/aristrahatsuyu/lyntrix/blob/main/pages/index.vue"
click node_profile_content "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Content.vue"
click node_banner "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Banner.vue"
click node_background "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/FlowImage.vue"
click node_footer "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Footer.vue"
click node_profile_data "https://github.com/aristrahatsuyu/lyntrix/blob/main/assets/profile.temp.json"
click node_app_shell "https://github.com/aristrahatsuyu/lyntrix/blob/main/app.vue"
click node_mode_switch "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/ModeSwitch.vue"
click node_cursor "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Cursor.vue"
click node_particles "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Particles.vue"
click node_scroll_plugin "https://github.com/aristrahatsuyu/lyntrix/blob/main/plugins/lenis.client.ts"
click node_music_card "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/MusicCard.vue"
click node_stacked_panel "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/StackedPanel.vue"
click node_album_cover "https://github.com/aristrahatsuyu/lyntrix/blob/main/components/AlbumCover.vue"
click node_player "https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioPlayer.ts"
click node_playlist "https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/usePlaylistController.ts"
click node_equalizer "https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioEqualizer.ts"
click node_buffer_cache "https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioBufferCache.ts"
click node_art_cache "https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useArtworkCache.ts"

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_home,node_profile_content,node_banner,node_background,node_footer,node_profile_data,node_browser_audio toneBlue
class node_app_shell,node_mode_switch,node_cursor,node_particles,node_scroll_plugin toneAmber
class node_music_card,node_stacked_panel,node_album_cover toneMint
class node_player,node_playlist,node_equalizer,node_buffer_cache,node_art_cache toneRose
class node_visitor,node_media_sources toneIndigo
```

## Components

### Resume presentation

- [Home page](https://github.com/aristrahatsuyu/lyntrix/blob/main/pages/index.vue): `pages/index.vue`
- [Profile content](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Content.vue): `components/Content.vue`
- [Identity banner](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Banner.vue): `components/Banner.vue`
- [Background display](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/FlowImage.vue): `components/FlowImage.vue`
- [Footer and links](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Footer.vue): `components/Footer.vue`
- [Profile starter data](https://github.com/aristrahatsuyu/lyntrix/blob/main/assets/profile.temp.json): `assets/profile.temp.json`

### Motion and theming

- [App shell](https://github.com/aristrahatsuyu/lyntrix/blob/main/app.vue): `app.vue`
- [Theme switch](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/ModeSwitch.vue): `components/ModeSwitch.vue`
- [Custom cursor](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Cursor.vue): `components/Cursor.vue`
- [Particle effects](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/Particles.vue): `components/Particles.vue`
- [Smooth scrolling](https://github.com/aristrahatsuyu/lyntrix/blob/main/plugins/lenis.client.ts): `plugins/lenis.client.ts`

### Music experience

- [Music card](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/MusicCard.vue): `components/MusicCard.vue`
- [Playlist and lyrics](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/StackedPanel.vue): `components/StackedPanel.vue`
- [Album artwork](https://github.com/aristrahatsuyu/lyntrix/blob/main/components/AlbumCover.vue): `components/AlbumCover.vue`

### Audio runtime

- [Audio player](https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioPlayer.ts): `composables/audio/useAudioPlayer.ts`
- [Playlist controller](https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/usePlaylistController.ts): `composables/audio/usePlaylistController.ts`
- [Audio equalizer](https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioEqualizer.ts): `composables/audio/useAudioEqualizer.ts`
- [Buffer state cache](https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useAudioBufferCache.ts): `composables/audio/useAudioBufferCache.ts`
- [Artwork cache](https://github.com/aristrahatsuyu/lyntrix/blob/main/composables/audio/useArtworkCache.ts): `composables/audio/useArtworkCache.ts`

### Other components

- **Visitor**
- **Audio and artwork sources**
- **Browser audio APIs**

## Connections

- Visitor → Home page: opens
- App shell → Home page: renders
- App shell → Theme switch: renders
- App shell → Custom cursor: renders
- Home page → Particle effects: renders
- Home page → Background display: renders
- Home page → Identity banner: renders
- Home page → Profile content: renders
- Home page → Footer and links: renders
- Profile starter data → Profile content: configures
- Home page → Smooth scrolling: uses scrolling
- Profile content → Music card: presents
- Music card → Playlist and lyrics: renders controls
- Music card → Album artwork: renders artwork
- Music card → Audio player: uses playback
- Playlist and lyrics → Playlist controller: controls queue
- Playlist controller → Audio player: controls tracks
- Audio player → Audio equalizer: uses processing
- Audio player → Buffer state cache: stores buffer state
- Audio player → Artwork cache: loads artwork
- Audio player → Browser audio APIs: plays audio
- Audio player → Audio and artwork sources: loads tracks
- Artwork cache → Audio and artwork sources: fetches artwork
- Album artwork → Artwork cache: uses cached art