# riofiar/design-portfolio architecture

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

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

## Overview

This is a small static personal portfolio site: its pages and assets are the product, with `script.js` adding browser-side interactions. The sampled script implements animated tab/gallery switching, skill-bar animation, and portfolio-item popups. The HTML and CSS were not sampled, so their detailed structure and wiring cannot be verified; the graph avoids inferring links among pages or assets.

Main entry points: [`script.js`](https://github.com/riofiar/design-portfolio/blob/main/script.js) (UI interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio site"]
  node_home["Home page<br/>[index.html]"]
  node_about["About page<br/>[about.html]"]
  node_portfolio["Portfolio page<br/>[portfolio.html]"]
  node_contact["Contact page<br/>[contact.html]"]
  node_styles["Site styling<br/>[style.css]"]
  node_images["Image assets"]
end

subgraph group_behavior["Browser interactions"]
  node_interaction["UI interactions<br/>[script.js]"]
  node_tabs["Tab switching<br/>[script.js]"]
  node_skillbars["Skill animation<br/>[script.js]"]
  node_popup["Portfolio popup<br/>[script.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"triggers events"| node_interaction
node_interaction -->|"handles tab clicks"| node_tabs
node_interaction -->|"animates fills"| node_skillbars
node_interaction -->|"handles item clicks"| node_popup

click node_home "https://github.com/riofiar/design-portfolio/blob/main/index.html"
click node_about "https://github.com/riofiar/design-portfolio/blob/main/about.html"
click node_portfolio "https://github.com/riofiar/design-portfolio/blob/main/portfolio.html"
click node_contact "https://github.com/riofiar/design-portfolio/blob/main/contact.html"
click node_styles "https://github.com/riofiar/design-portfolio/blob/main/style.css"
click node_images "https://github.com/riofiar/design-portfolio/tree/main/img"
click node_interaction "https://github.com/riofiar/design-portfolio/blob/main/script.js"
click node_tabs "https://github.com/riofiar/design-portfolio/blob/main/script.js"
click node_skillbars "https://github.com/riofiar/design-portfolio/blob/main/script.js"
click node_popup "https://github.com/riofiar/design-portfolio/blob/main/script.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_home,node_about,node_portfolio,node_contact,node_styles,node_images toneBlue
class node_interaction,node_tabs,node_skillbars,node_popup toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Home page](https://github.com/riofiar/design-portfolio/blob/main/index.html): `index.html`
- [About page](https://github.com/riofiar/design-portfolio/blob/main/about.html): `about.html`
- [Portfolio page](https://github.com/riofiar/design-portfolio/blob/main/portfolio.html): `portfolio.html`
- [Contact page](https://github.com/riofiar/design-portfolio/blob/main/contact.html): `contact.html`
- [Site styling](https://github.com/riofiar/design-portfolio/blob/main/style.css): `style.css`
- [Image assets](https://github.com/riofiar/design-portfolio/tree/main/img): `img`

### Browser interactions

- [UI interactions](https://github.com/riofiar/design-portfolio/blob/main/script.js): `script.js`
- [Tab switching](https://github.com/riofiar/design-portfolio/blob/main/script.js): `script.js`
- [Skill animation](https://github.com/riofiar/design-portfolio/blob/main/script.js): `script.js`
- [Portfolio popup](https://github.com/riofiar/design-portfolio/blob/main/script.js): `script.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → UI interactions: triggers events (evidence: `script.js`)
- UI interactions → Tab switching: handles tab clicks (evidence: `script.js`)
- UI interactions → Skill animation: animates fills (evidence: `script.js`)
- UI interactions → Portfolio popup: handles item clicks (evidence: `script.js`)