# marcosfabricio3/project_onda_utu architecture

> Architecture diagram of the GitHub repository marcosfabricio3/project_onda_utu, 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/marcosfabricio3/project_onda_utu
- Repository: https://github.com/marcosfabricio3/project_onda_utu

## Overview

ONDA is a static historical tribute website. Its documented user-facing purpose is to present the company’s legacy through an interactive timeline; the repository also includes pages for the site, a game, and journeys, plus JavaScript modules whose filenames indicate interactive features. The README documents these capabilities but no source excerpts were provided, so relationships between individual pages and scripts are not asserted.

Main entry points: [`docs/index.html`](https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/index.html) (Home Page), [`assets/js/timeline.js`](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/timeline.js) (Historical Timeline)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Site Pages"]
  node_home["Home Page<br/>[index.html]"]
  node_game["Game Page<br/>[juego.html]"]
  node_journeys["Journeys Page<br/>[trayectos.html]"]
end

subgraph group_interactions["Interactive Features"]
  node_timeline["Historical Timeline<br/>[timeline.js]"]
  node_carousel["Image Carousel<br/>[carousel.js]"]
  node_navigation["Responsive Navigation<br/>[navigation.js]"]
  node_filters["Content Filters<br/>[filters.js]"]
  node_map["Map Interaction<br/>[map.js]"]
  node_quiz["Quiz Interaction<br/>[quiz.js]"]
end

subgraph group_presentation["Visual Presentation"]
  node_styles["Modular Styles"]
  node_responsive["Responsive Styles<br/>[responsive.css]"]
end

node_visitor(("Website Visitor"))

node_visitor -->|"views site"| node_home
node_home -->|"presents timeline"| node_timeline

click node_home "https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/index.html"
click node_game "https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/juego.html"
click node_journeys "https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/trayectos.html"
click node_timeline "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/timeline.js"
click node_carousel "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/carousel.js"
click node_navigation "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/navigation.js"
click node_filters "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/filters.js"
click node_map "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/map.js"
click node_quiz "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/quiz.js"
click node_styles "https://github.com/marcosfabricio3/project_onda_utu/tree/main/assets/css"
click node_responsive "https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/css/layout/responsive.css"

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_game,node_journeys toneBlue
class node_timeline,node_carousel,node_navigation,node_filters,node_map,node_quiz toneAmber
class node_styles,node_responsive toneMint
class node_visitor toneIndigo
```

## Components

### Site Pages

- [Home Page](https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/index.html): `docs/index.html`
- [Game Page](https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/juego.html): `docs/juego.html`
- [Journeys Page](https://github.com/marcosfabricio3/project_onda_utu/blob/main/docs/trayectos.html): `docs/trayectos.html`

### Interactive Features

- [Historical Timeline](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/timeline.js): `assets/js/timeline.js`
- [Image Carousel](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/carousel.js): `assets/js/carousel.js`
- [Responsive Navigation](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/navigation.js): `assets/js/navigation.js`
- [Content Filters](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/filters.js): `assets/js/filters.js`
- [Map Interaction](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/map.js): `assets/js/map.js`
- [Quiz Interaction](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/js/quiz.js): `assets/js/quiz.js`

### Visual Presentation

- [Modular Styles](https://github.com/marcosfabricio3/project_onda_utu/tree/main/assets/css): `assets/css`
- [Responsive Styles](https://github.com/marcosfabricio3/project_onda_utu/blob/main/assets/css/layout/responsive.css): `assets/css/layout/responsive.css`

### Other components

- **Website Visitor**

## Connections

- Website Visitor → Home Page: views site (evidence: `README.md`)
- Home Page → Historical Timeline: presents timeline (evidence: `README.md`)