# einstein123-dev/html-css-and-javascript-projects architecture

> Architecture diagram of the GitHub repository einstein123-dev/html-css-and-javascript-projects, 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/einstein123-dev/html-css-and-javascript-projects
- Repository: https://github.com/einstein123-dev/html-css-and-javascript-projects

## Overview

This repository is a collection of independent browser demos rather than one application. The tree identifies video, animation, music-player, quiz-game, and portfolio projects, but the README documents no workflows. Only the heart-animation script was shown with executable contents; other page and script relationships are therefore not inferred. The graph captures its visible mouse-triggered behavior and leaves the unsampled demos as separate components.

Main entry points: [`hearttrailing-animation/script.js`](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/script.js) (Mouse Animation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_video["Video Demo"]
  node_video_page["Video Page<br/>[index.html]"]
  node_video_logic["Video Script<br/>[app.js]"]
  node_video_asset["Video Asset"]
end

subgraph group_hearts["Heart Animation"]
  node_heart_page["Animation Page<br/>[index.html]"]
  node_heart_logic["Mouse Animation<br/>[script.js]"]
  node_heart_effect["Transient Hearts<br/>[script.js]"]
end

subgraph group_music["Music Player"]
  node_music_page["Player Page<br/>[index.html]"]
  node_music_logic["Player Script<br/>[script.js]"]
  node_music_asset["Audio Track"]
end

subgraph group_quiz["Quiz Game"]
  node_quiz_page["Quiz Page<br/>[index.html]"]
  node_quiz_logic["Quiz Script<br/>[scripts.js]"]
end

subgraph group_portfolio["Portfolio"]
  node_portfolio_page["Portfolio Page<br/>[index.html]"]
end

node_visitor(("Browser Visitor"))

node_visitor -->|"moves pointer"| node_heart_logic
node_heart_logic -->|"creates and removes"| node_heart_effect

click node_video_page "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/bd-video/index.html"
click node_video_logic "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/bd-video/app.js"
click node_video_asset "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/bd-video/asserts/4763824-uhd_3840_2160_24fps.mp4"
click node_heart_page "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/index.html"
click node_heart_logic "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/script.js"
click node_heart_effect "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/script.js"
click node_music_page "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/musicplayer/index.html"
click node_music_logic "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/musicplayer/script.js"
click node_music_asset "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/musicplayer/media/The%20Greatest%20-%20Sia.m4a"
click node_quiz_page "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/quizgame/index.html"
click node_quiz_logic "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/quizgame/scripts.js"
click node_portfolio_page "https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/porfolio/index.html"

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_video_page,node_video_logic,node_video_asset,node_visitor toneBlue
class node_heart_page,node_heart_logic,node_heart_effect toneAmber
class node_music_page,node_music_logic,node_music_asset toneMint
class node_quiz_page,node_quiz_logic toneRose
class node_portfolio_page toneIndigo
```

## Components

### Video Demo

- [Video Page](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/bd-video/index.html): `bd-video/index.html`
- [Video Script](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/bd-video/app.js): `bd-video/app.js`
- [Video Asset](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/bd-video/asserts/4763824-uhd_3840_2160_24fps.mp4): `bd-video/asserts/4763824-uhd_3840_2160_24fps.mp4`

### Heart Animation

- [Animation Page](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/index.html): `hearttrailing-animation/index.html`
- [Mouse Animation](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/script.js): `hearttrailing-animation/script.js`
- [Transient Hearts](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/hearttrailing-animation/script.js): `hearttrailing-animation/script.js`

### Music Player

- [Player Page](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/musicplayer/index.html): `musicplayer/index.html`
- [Player Script](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/musicplayer/script.js): `musicplayer/script.js`
- [Audio Track](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/musicplayer/media/The%20Greatest%20-%20Sia.m4a): `musicplayer/media/The Greatest - Sia.m4a`

### Quiz Game

- [Quiz Page](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/quizgame/index.html): `quizgame/index.html`
- [Quiz Script](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/quizgame/scripts.js): `quizgame/scripts.js`

### Portfolio

- [Portfolio Page](https://github.com/einstein123-dev/html-css-and-javascript-projects/blob/main/porfolio/index.html): `porfolio/index.html`

### Other components

- **Browser Visitor**

## Connections

- Browser Visitor → Mouse Animation: moves pointer (evidence: `hearttrailing-animation/script.js`)
- Mouse Animation → Transient Hearts: creates and removes (evidence: `hearttrailing-animation/script.js`)