# kinlievenice/silver-horizons architecture

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

- Interactive diagram: https://gitdiagram.com/kinlievenice/silver-horizons
- Repository: https://github.com/kinlievenice/silver-horizons

## Overview

This repository is a Vue microsite for Silver Horizons, an event and visitor-information experience. Visitors enter through the home scroll story, then navigate to the itinerary, people, and practical-info pages. Those pages present event content, schedule status, attendee information, venue/lookbook/travel guidance, and FAQs. The map and visual components support the home story and page presentation. Edges follow sampled imports, routing, and documented behavior; unsampled page wiring and content details are not inferred.

Main entry points: [`frontend/src/views/HomeView.vue`](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/HomeView.vue) (Home Story), [`frontend/src/App.vue`](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/App.vue) (App Shell), [`frontend/src/views/ItineraryView.vue`](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/ItineraryView.vue) (Itinerary Page), [`frontend/src/views/InfoView.vue`](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/InfoView.vue) (Info Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Site Experience"]
  node_app["App Shell<br/>[App.vue]"]
  node_home["Home Story<br/>[HomeView.vue]"]
  node_itinerary_view["Itinerary Page<br/>[ItineraryView.vue]"]
  node_people_view["People Page<br/>[PeopleView.vue]"]
  node_info_view["Info Page<br/>[InfoView.vue]"]
  node_gallery["Part Gallery<br/>[PartGallery.vue]"]
  node_nav["App Navigation<br/>[AppNav.vue]"]
end

subgraph group_content["Event Content"]
  node_event_content["Event Details<br/>[event.js]"]
  node_itinerary_content["Itinerary Data<br/>[itinerary.js]"]
  node_people_content["People Data<br/>[people.js]"]
  node_branches["Branch Data<br/>[branches.js]"]
  node_info_content["Info Data<br/>[info.js]"]
  node_philippines_map["Philippines Map<br/>[phMap.js]"]
end

subgraph group_interaction["Scroll And Schedule"]
  node_schedule["Schedule Helpers<br/>[schedule.js]"]
  node_smooth_scroll["Smooth Scrolling<br/>[smoothScroll.js]"]
  node_scenes["Scroll Scenes<br/>[useScenes.js]"]
  node_autoplay["Story Autoplay<br/>[useAutoplay.js]"]
  node_countdown["Countdown<br/>[Countdown.vue]"]
  node_timeline_stop["Timeline Stop<br/>[TimelineStop.vue]"]
end

subgraph group_visual["Visual Components"]
  node_ribbon["Ribbon Art<br/>[Ribbon.vue]"]
  node_horizon_glow["Horizon Glow<br/>[HorizonGlow.vue]"]
  node_sparkle["Sparkle Art<br/>[Sparkle.vue]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_nav
node_app -->|"reads contact"| node_info_content
node_app -->|"reads credits"| node_itinerary_content
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_itinerary_view
node_app -->|"routes to"| node_people_view
node_app -->|"routes to"| node_info_view
node_app -->|"controls scroll"| node_smooth_scroll
node_nav -->|"uses"| node_smooth_scroll
node_home -->|"reads event"| node_event_content
node_home -->|"reads itinerary"| node_itinerary_content
node_home -->|"reads map"| node_philippines_map
node_home -->|"reads branches"| node_branches
node_home -->|"uses"| node_scenes
node_home -->|"uses"| node_autoplay
node_home -->|"renders"| node_countdown
node_home -->|"renders"| node_ribbon
node_home -->|"renders"| node_sparkle
node_home -->|"renders"| node_horizon_glow
node_itinerary_view -->|"reads schedule"| node_itinerary_content
node_itinerary_view -->|"uses dates"| node_schedule
node_itinerary_view -->|"renders"| node_timeline_stop
node_itinerary_view -->|"renders"| node_gallery
node_itinerary_view -->|"renders"| node_ribbon
node_itinerary_view -->|"renders"| node_sparkle
node_itinerary_view -->|"renders"| node_horizon_glow
node_timeline_stop -->|"uses time helpers"| node_schedule
node_timeline_stop -->|"renders"| node_sparkle
node_gallery -->|"renders"| node_sparkle
node_gallery -->|"uses"| node_smooth_scroll
node_countdown -->|"uses time helpers"| node_schedule
node_autoplay -->|"checks scrolling"| node_smooth_scroll
node_info_view -->|"reads event"| node_event_content
node_info_view -->|"reads info"| node_info_content
node_info_view -->|"renders"| node_ribbon
node_info_view -->|"renders"| node_sparkle
node_info_view -->|"renders"| node_horizon_glow
node_people_view -->|"reads people"| node_people_content
node_people_content -->|"imports"| node_branches

click node_app "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/App.vue"
click node_home "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/HomeView.vue"
click node_itinerary_view "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/ItineraryView.vue"
click node_people_view "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/PeopleView.vue"
click node_info_view "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/InfoView.vue"
click node_event_content "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/event.js"
click node_itinerary_content "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/itinerary.js"
click node_people_content "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/people.js"
click node_branches "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/branches.js"
click node_info_content "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/info.js"
click node_philippines_map "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/phMap.js"
click node_schedule "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/schedule.js"
click node_smooth_scroll "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/smoothScroll.js"
click node_scenes "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/useScenes.js"
click node_autoplay "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/useAutoplay.js"
click node_countdown "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/Countdown.vue"
click node_timeline_stop "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/TimelineStop.vue"
click node_gallery "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/PartGallery.vue"
click node_ribbon "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/Ribbon.vue"
click node_horizon_glow "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/HorizonGlow.vue"
click node_sparkle "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/Sparkle.vue"
click node_nav "https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/AppNav.vue"

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_home,node_itinerary_view,node_people_view,node_info_view,node_gallery,node_nav toneBlue
class node_event_content,node_itinerary_content,node_people_content,node_branches,node_info_content,node_philippines_map toneAmber
class node_schedule,node_smooth_scroll,node_scenes,node_autoplay,node_countdown,node_timeline_stop toneMint
class node_ribbon,node_horizon_glow,node_sparkle toneRose
class node_visitor toneIndigo
```

## Components

### Site Experience

- [App Shell](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Home Story](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/HomeView.vue): `frontend/src/views/HomeView.vue`
- [Itinerary Page](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/ItineraryView.vue): `frontend/src/views/ItineraryView.vue`
- [People Page](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/PeopleView.vue): `frontend/src/views/PeopleView.vue`
- [Info Page](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/views/InfoView.vue): `frontend/src/views/InfoView.vue`
- [Part Gallery](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/PartGallery.vue): `frontend/src/components/PartGallery.vue`
- [App Navigation](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/AppNav.vue): `frontend/src/components/AppNav.vue`

### Event Content

- [Event Details](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/event.js): `frontend/src/content/event.js`
- [Itinerary Data](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/itinerary.js): `frontend/src/content/itinerary.js`
- [People Data](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/people.js): `frontend/src/content/people.js`
- [Branch Data](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/branches.js): `frontend/src/content/branches.js`
- [Info Data](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/info.js): `frontend/src/content/info.js`
- [Philippines Map](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/content/phMap.js): `frontend/src/content/phMap.js`

### Scroll And Schedule

- [Schedule Helpers](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/schedule.js): `frontend/src/lib/schedule.js`
- [Smooth Scrolling](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/smoothScroll.js): `frontend/src/lib/smoothScroll.js`
- [Scroll Scenes](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/useScenes.js): `frontend/src/lib/useScenes.js`
- [Story Autoplay](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/lib/useAutoplay.js): `frontend/src/lib/useAutoplay.js`
- [Countdown](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/Countdown.vue): `frontend/src/components/Countdown.vue`
- [Timeline Stop](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/TimelineStop.vue): `frontend/src/components/TimelineStop.vue`

### Visual Components

- [Ribbon Art](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/Ribbon.vue): `frontend/src/components/Ribbon.vue`
- [Horizon Glow](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/HorizonGlow.vue): `frontend/src/components/HorizonGlow.vue`
- [Sparkle Art](https://github.com/kinlievenice/silver-horizons/blob/main/frontend/src/components/Sparkle.vue): `frontend/src/components/Sparkle.vue`

### Other components

- **Visitor**

## Connections

- Visitor → App Shell: opens site
- App Shell → App Navigation: renders (evidence: `frontend/src/App.vue`)
- App Shell → Info Data: reads contact (evidence: `frontend/src/App.vue`)
- App Shell → Itinerary Data: reads credits (evidence: `frontend/src/App.vue`)
- App Shell → Home Story: routes to (evidence: `frontend/src/main.js`)
- App Shell → Itinerary Page: routes to (evidence: `frontend/src/main.js`)
- App Shell → People Page: routes to (evidence: `frontend/src/main.js`)
- App Shell → Info Page: routes to (evidence: `frontend/src/main.js`)
- App Shell → Smooth Scrolling: controls scroll (evidence: `frontend/src/main.js`)
- App Navigation → Smooth Scrolling: uses (evidence: `frontend/src/components/AppNav.vue`)
- Home Story → Event Details: reads event (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Itinerary Data: reads itinerary (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Philippines Map: reads map (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Branch Data: reads branches (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Scroll Scenes: uses (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Story Autoplay: uses (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Countdown: renders (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Ribbon Art: renders (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Sparkle Art: renders (evidence: `frontend/src/views/HomeView.vue`)
- Home Story → Horizon Glow: renders (evidence: `frontend/src/views/HomeView.vue`)
- Itinerary Page → Itinerary Data: reads schedule (evidence: `frontend/src/views/ItineraryView.vue`)
- Itinerary Page → Schedule Helpers: uses dates (evidence: `frontend/src/views/ItineraryView.vue`)
- Itinerary Page → Timeline Stop: renders (evidence: `frontend/src/views/ItineraryView.vue`)
- Itinerary Page → Part Gallery: renders (evidence: `frontend/src/views/ItineraryView.vue`)
- Itinerary Page → Ribbon Art: renders (evidence: `frontend/src/views/ItineraryView.vue`)
- Itinerary Page → Sparkle Art: renders (evidence: `frontend/src/views/ItineraryView.vue`)
- Itinerary Page → Horizon Glow: renders (evidence: `frontend/src/views/ItineraryView.vue`)
- Timeline Stop → Schedule Helpers: uses time helpers (evidence: `frontend/src/components/TimelineStop.vue`)
- Timeline Stop → Sparkle Art: renders (evidence: `frontend/src/components/TimelineStop.vue`)
- Part Gallery → Sparkle Art: renders (evidence: `frontend/src/components/PartGallery.vue`)
- Part Gallery → Smooth Scrolling: uses (evidence: `frontend/src/components/PartGallery.vue`)
- Countdown → Schedule Helpers: uses time helpers (evidence: `frontend/src/components/Countdown.vue`)
- Story Autoplay → Smooth Scrolling: checks scrolling (evidence: `frontend/src/lib/useAutoplay.js`)
- Info Page → Event Details: reads event (evidence: `frontend/src/views/InfoView.vue`)
- Info Page → Info Data: reads info (evidence: `frontend/src/views/InfoView.vue`)
- Info Page → Ribbon Art: renders (evidence: `frontend/src/views/InfoView.vue`)
- Info Page → Sparkle Art: renders (evidence: `frontend/src/views/InfoView.vue`)
- Info Page → Horizon Glow: renders (evidence: `frontend/src/views/InfoView.vue`)
- People Page → People Data: reads people (evidence: `frontend/src/views/PeopleView.vue`)
- People Data → Branch Data: imports (evidence: `frontend/src/content/people.js`)