# angeloeustaquio/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/angeloeustaquio/portfolio
- Repository: https://github.com/angeloeustaquio/portfolio

## Overview

This is a small browser-based paginated presentation. A visitor uses the arrow keys to move between pages; the script activates the selected page, updates the page counter, and scrolls to the top. The HTML and CSS contents were not provided, so their structure and styling cannot be described further.

Main entry points: [`script.js`](https://github.com/angeloeustaquio/portfolio/blob/main/script.js) (Page Navigation), [`index.html`](https://github.com/angeloeustaquio/portfolio/blob/main/index.html) (Page Content)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_visitor(("Visitor"))
node_navigation["Page Navigation<br/>[script.js]"]
node_page_content["Page Content<br/>[index.html]"]
node_page_counter["Page Counter<br/>[index.html]"]

node_visitor -->|"presses arrows"| node_navigation
node_navigation -->|"toggles active page"| node_page_content
node_navigation -->|"updates count"| node_page_counter

click node_navigation "https://github.com/angeloeustaquio/portfolio/blob/main/script.js"
click node_page_content "https://github.com/angeloeustaquio/portfolio/blob/main/index.html"
click node_page_counter "https://github.com/angeloeustaquio/portfolio/blob/main/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_visitor toneIndigo
class node_navigation,node_page_content,node_page_counter toneTeal
```

## Components

### Other components

- **Visitor**
- [Page Navigation](https://github.com/angeloeustaquio/portfolio/blob/main/script.js): `script.js`
- [Page Content](https://github.com/angeloeustaquio/portfolio/blob/main/index.html): `index.html`
- [Page Counter](https://github.com/angeloeustaquio/portfolio/blob/main/index.html): `index.html`

## Connections

- Visitor → Page Navigation: presses arrows (evidence: `script.js`)
- Page Navigation → Page Content: toggles active page (evidence: `script.js`)
- Page Navigation → Page Counter: updates count (evidence: `script.js`)