# hiccup21/portfolio architecture

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

## Overview

This is a small, client-side portfolio site. Visitors browse the page, filter its project cards, and follow available project links. The JavaScript also provides cursor, scroll, reveal, counter, and mobile-menu interactions. The README is empty, and the HTML and CSS were not sampled, so the graph avoids assuming their loading or markup details beyond the DOM elements the JavaScript accesses.

Main entry points: [`PORTFOLIO/index.js`](https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.js) (Interactions and rendering), [`PORTFOLIO/index.html`](https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.html) (Page document)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_html["Page document<br/>[index.html]"]
  node_css["Page styles<br/>[index.css]"]
end

subgraph group_behavior["Page behavior"]
  node_js["Interactions and rendering<br/>[index.js]"]
  node_catalog["Project catalog<br/>[index.js]"]
end

node_visitor(("Visitor"))
node_destinations["Project destinations"]

node_visitor -->|"views"| node_html
node_visitor -->|"interacts"| node_js
node_js -->|"updates DOM"| node_html
node_js -->|"reads projects"| node_catalog
node_js -->|"renders links"| node_destinations
node_visitor -->|"follows links"| node_destinations

click node_html "https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.html"
click node_css "https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.css"
click node_js "https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.js"
click node_catalog "https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.js"

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_html,node_css toneBlue
class node_js,node_catalog toneAmber
class node_visitor,node_destinations toneIndigo
```

## Components

### Portfolio page

- [Page document](https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.html): `PORTFOLIO/index.html`
- [Page styles](https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.css): `PORTFOLIO/index.css`

### Page behavior

- [Interactions and rendering](https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.js): `PORTFOLIO/index.js`
- [Project catalog](https://github.com/hiccup21/portfolio/blob/main/PORTFOLIO/index.js): `PORTFOLIO/index.js`

### Other components

- **Visitor**
- **Project destinations**

## Connections

- Visitor → Page document: views
- Visitor → Interactions and rendering: interacts
- Interactions and rendering → Page document: updates DOM
- Interactions and rendering → Project catalog: reads projects
- Interactions and rendering → Project destinations: renders links
- Visitor → Project destinations: follows links