# polserrano/portfolio architecture

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

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

## Overview

This is a small personal portfolio site. Visitors view the portfolio and can navigate its menu or use the contact action to copy an email address, with a mail link as fallback. The sampled JavaScript also updates the header on scroll and reveals content as it enters view. The README provides no further feature details, and the HTML, styles, and project assets were not sampled, so their wiring and contents are not inferred.

Main entry points: [`index.html`](https://github.com/polserrano/portfolio/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/polserrano/portfolio/blob/main/script.js) (Email action)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_visitor(("Visitor"))
node_portfolio["Portfolio page<br/>[index.html]"]
node_navigation["Menu controls<br/>[script.js]"]
node_scroll["Scroll header<br/>[script.js]"]
node_reveals["Content reveals<br/>[script.js]"]
node_contact["Email action<br/>[script.js]"]
node_styles["Page styling<br/>[style.css]"]
node_projects["Project assets"]
node_clipboard["Clipboard API"]
node_mail["Mail handler"]

node_visitor -->|"views"| node_portfolio
node_visitor -->|"toggles menu"| node_navigation
node_visitor -->|"copies email"| node_contact
node_navigation -->|"updates menu state"| node_portfolio
node_scroll -->|"updates header state"| node_portfolio
node_reveals -->|"reveals sections"| node_portfolio
node_contact -->|"writes email"| node_clipboard
node_contact -->|"opens fallback"| node_mail

click node_portfolio "https://github.com/polserrano/portfolio/blob/main/index.html"
click node_navigation "https://github.com/polserrano/portfolio/blob/main/script.js"
click node_scroll "https://github.com/polserrano/portfolio/blob/main/script.js"
click node_reveals "https://github.com/polserrano/portfolio/blob/main/script.js"
click node_contact "https://github.com/polserrano/portfolio/blob/main/script.js"
click node_styles "https://github.com/polserrano/portfolio/blob/main/style.css"
click node_projects "https://github.com/polserrano/portfolio/tree/main/assets/projects"

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_portfolio,node_navigation,node_scroll,node_reveals,node_contact,node_styles,node_projects toneTeal
class node_clipboard,node_mail toneMint
```

## Components

### Other components

- **Visitor**
- [Portfolio page](https://github.com/polserrano/portfolio/blob/main/index.html): `index.html`
- [Menu controls](https://github.com/polserrano/portfolio/blob/main/script.js): `script.js`
- [Scroll header](https://github.com/polserrano/portfolio/blob/main/script.js): `script.js`
- [Content reveals](https://github.com/polserrano/portfolio/blob/main/script.js): `script.js`
- [Email action](https://github.com/polserrano/portfolio/blob/main/script.js): `script.js`
- [Page styling](https://github.com/polserrano/portfolio/blob/main/style.css): `style.css`
- [Project assets](https://github.com/polserrano/portfolio/tree/main/assets/projects): `assets/projects`
- **Clipboard API**
- **Mail handler**

## Connections

- Visitor → Portfolio page: views
- Visitor → Menu controls: toggles menu
- Visitor → Email action: copies email
- Menu controls → Portfolio page: updates menu state
- Scroll header → Portfolio page: updates header state
- Content reveals → Portfolio page: reveals sections
- Email action → Clipboard API: writes email
- Email action → Mail handler: opens fallback