# alxks4o/savina-yonashkova-portfolio architecture

> Architecture diagram of the GitHub repository alxks4o/savina-yonashkova-portfolio, 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/alxks4o/savina-yonashkova-portfolio
- Repository: https://github.com/alxks4o/savina-yonashkova-portfolio

## Overview

This is a static creative portfolio for presenting film, media and TV work, alongside an about page. A visitor starts at the portfolio, browses work cards, and can follow their links to category pages; the JavaScript builds those cards and handles their interactions. The tree also includes a showreel and CV. HTML was not sampled, so page-to-asset links and other page wiring are not asserted.

Main entry points: [`script.js`](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/script.js) (Page interactions), [`film.html`](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/film.html) (Film work), [`media.html`](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/media.html) (Media work), [`tv.html`](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/tv.html) (TV work)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Portfolio home<br/>[index.html]"]
  node_about["About<br/>[about.html]"]
  node_film["Film work<br/>[film.html]"]
  node_media["Media work<br/>[media.html]"]
  node_tv["TV work<br/>[tv.html]"]
end

subgraph group_interaction["Browser interactions"]
  node_sitejs["Page interactions<br/>[script.js]"]
end

subgraph group_assets["Portfolio assets"]
  node_filmassets["Film images"]
  node_mediaassets["Media images"]
  node_videoassets["Videography images"]
  node_showreel["Showreel video<br/>[showreel.mp4]"]
  node_cv["CV PDF"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_about
node_visitor -->|"opens"| node_film
node_visitor -->|"opens"| node_media
node_visitor -->|"opens"| node_tv
node_sitejs -->|"links cards"| node_film
node_sitejs -->|"links cards"| node_media
node_sitejs -->|"links cards"| node_tv
node_sitejs -->|"sets image paths"| node_filmassets
node_sitejs -->|"sets image paths"| node_mediaassets
node_sitejs -->|"sets image paths"| node_videoassets

click node_home "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/index.html"
click node_about "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/about.html"
click node_film "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/film.html"
click node_media "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/media.html"
click node_tv "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/tv.html"
click node_sitejs "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/script.js"
click node_filmassets "https://github.com/alxks4o/savina-yonashkova-portfolio/tree/main/assets/imgs/film"
click node_mediaassets "https://github.com/alxks4o/savina-yonashkova-portfolio/tree/main/assets/imgs/media"
click node_videoassets "https://github.com/alxks4o/savina-yonashkova-portfolio/tree/main/assets/imgs/videography"
click node_showreel "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/assets/background%20video/showreel.mp4"
click node_cv "https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/assets/Savina%20Yonashkova%20CV%20Production%20Manager.pdf"

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_about,node_film,node_media,node_tv toneBlue
class node_sitejs toneAmber
class node_filmassets,node_mediaassets,node_videoassets,node_showreel,node_cv toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio pages

- [Portfolio home](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/index.html): `index.html`
- [About](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/about.html): `about.html`
- [Film work](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/film.html): `film.html`
- [Media work](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/media.html): `media.html`
- [TV work](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/tv.html): `tv.html`

### Browser interactions

- [Page interactions](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/script.js): `script.js`

### Portfolio assets

- [Film images](https://github.com/alxks4o/savina-yonashkova-portfolio/tree/main/assets/imgs/film): `assets/imgs/film`
- [Media images](https://github.com/alxks4o/savina-yonashkova-portfolio/tree/main/assets/imgs/media): `assets/imgs/media`
- [Videography images](https://github.com/alxks4o/savina-yonashkova-portfolio/tree/main/assets/imgs/videography): `assets/imgs/videography`
- [Showreel video](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/assets/background%20video/showreel.mp4): `assets/background video/showreel.mp4`
- [CV PDF](https://github.com/alxks4o/savina-yonashkova-portfolio/blob/main/assets/Savina%20Yonashkova%20CV%20Production%20Manager.pdf): `assets/Savina Yonashkova CV Production Manager.pdf`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio home: opens
- Visitor → About: opens
- Visitor → Film work: opens
- Visitor → Media work: opens
- Visitor → TV work: opens
- Page interactions → Film work: links cards
- Page interactions → Media work: links cards
- Page interactions → TV work: links cards
- Page interactions → Film images: sets image paths
- Page interactions → Media images: sets image paths
- Page interactions → Videography images: sets image paths