# yowlshi/angelo-automates-portfolio architecture

> Architecture diagram of the GitHub repository yowlshi/angelo-automates-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/yowlshi/angelo-automates-portfolio
- Repository: https://github.com/yowlshi/angelo-automates-portfolio

## Overview

This is a static personal portfolio for presenting Angelo Torrevillas’s work and enabling visitors to explore case studies or request a booking. The main workflow is browsing the page, filtering or expanding the builds catalog, opening a case study in a dialog, and optionally loading a booking calendar. The sampled JavaScript supports those interactions and progressive enhancement; the HTML and CSS contents were not sampled, so their detailed structure and styling are inferred only from the tree and JavaScript hooks.

Main entry points: [`index.html`](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html) (Portfolio page), [`js/site.js`](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/js/site.js) (Page interactions), [`assets/images/projects`](https://github.com/yowlshi/angelo-automates-portfolio/tree/main/assets/images/projects) (Project images), [`assets/images/profile`](https://github.com/yowlshi/angelo-automates-portfolio/tree/main/assets/images/profile) (Profile images)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Portfolio content"]
  node_page["Portfolio page<br/>[index.html]"]
  node_builds["Build catalog<br/>[index.html]"]
  node_cases["Case studies<br/>[index.html]"]
  node_booking["Booking link<br/>[index.html]"]
end

subgraph group_interaction["Page interactions"]
  node_behavior["Page interactions<br/>[site.js]"]
  node_styles["Site styles<br/>[site.css]"]
end

subgraph group_media["Portfolio media"]
  node_project_media["Project images"]
  node_profile_media["Profile images"]
end

node_visitor(("Visitor"))
node_calendar["Booking calendar"]
node_browser_storage[("Browser storage")]

node_visitor -->|"browses"| node_page
node_page -->|"presents"| node_builds
node_page -->|"presents"| node_cases
node_page -->|"offers"| node_booking
node_page -->|"enables"| node_behavior
node_behavior -->|"filters"| node_builds
node_behavior -->|"opens dialog"| node_cases
node_behavior -->|"loads on request"| node_booking
node_page -->|"displays"| node_project_media
node_page -->|"displays"| node_profile_media
node_behavior -->|"writes theme"| node_browser_storage
node_behavior -.->|"loads iframe"| node_calendar

click node_page "https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html"
click node_builds "https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html"
click node_cases "https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html"
click node_booking "https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html"
click node_behavior "https://github.com/yowlshi/angelo-automates-portfolio/blob/main/js/site.js"
click node_styles "https://github.com/yowlshi/angelo-automates-portfolio/blob/main/css/site.css"
click node_project_media "https://github.com/yowlshi/angelo-automates-portfolio/tree/main/assets/images/projects"
click node_profile_media "https://github.com/yowlshi/angelo-automates-portfolio/tree/main/assets/images/profile"

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_page,node_builds,node_cases,node_booking toneBlue
class node_behavior,node_styles,node_browser_storage toneAmber
class node_project_media,node_profile_media toneMint
class node_visitor,node_calendar toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html): `index.html`
- [Build catalog](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html): `index.html`
- [Case studies](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html): `index.html`
- [Booking link](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/index.html): `index.html`

### Page interactions

- [Page interactions](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/js/site.js): `js/site.js`
- [Site styles](https://github.com/yowlshi/angelo-automates-portfolio/blob/main/css/site.css): `css/site.css`

### Portfolio media

- [Project images](https://github.com/yowlshi/angelo-automates-portfolio/tree/main/assets/images/projects): `assets/images/projects`
- [Profile images](https://github.com/yowlshi/angelo-automates-portfolio/tree/main/assets/images/profile): `assets/images/profile`

### Other components

- **Visitor**
- **Booking calendar**
- **Browser storage**

## Connections

- Visitor → Portfolio page: browses
- Portfolio page → Build catalog: presents
- Portfolio page → Case studies: presents
- Portfolio page → Booking link: offers
- Portfolio page → Page interactions: enables
- Page interactions → Build catalog: filters
- Page interactions → Case studies: opens dialog
- Page interactions → Booking link: loads on request
- Portfolio page → Project images: displays
- Portfolio page → Profile images: displays
- Page interactions → Browser storage: writes theme
- Page interactions → Booking calendar: loads iframe