# codewithsadee/pfolio architecture

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

- Interactive diagram: https://gitdiagram.com/codewithsadee/pfolio
- Repository: https://github.com/codewithsadee/pfolio

## Overview

Pfolio is a responsive personal portfolio website. The principal visitor workflow is opening the portfolio page to view its content; the README identifies HTML, CSS, and JavaScript as the technologies used to build the site. The tree also contains a text file and image assets, but their runtime roles are not documented. No source excerpts were provided, so the graph shows only the documented relationship between the site and its HTML, CSS, and JavaScript parts; it does not infer specific page wiring or interactions.

Main entry points: [`index.html`](https://github.com/codewithsadee/pfolio/blob/master/index.html) (Portfolio page), [`assets/css/style.css`](https://github.com/codewithsadee/pfolio/blob/master/assets/css/style.css) (Site styling), [`assets/js/script.js`](https://github.com/codewithsadee/pfolio/blob/master/assets/js/script.js) (Site behavior)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio site"]
  node_website["Portfolio page<br/>[index.html]"]
  node_styles["Site styling<br/>[style.css]"]
  node_interactions["Site behavior<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_website
node_website -->|"uses CSS"| node_styles
node_website -->|"uses JavaScript"| node_interactions

click node_website "https://github.com/codewithsadee/pfolio/blob/master/index.html"
click node_styles "https://github.com/codewithsadee/pfolio/blob/master/assets/css/style.css"
click node_interactions "https://github.com/codewithsadee/pfolio/blob/master/assets/js/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_website,node_styles,node_interactions toneBlue
class node_visitor toneIndigo
```

## Components

### Portfolio site

- [Portfolio page](https://github.com/codewithsadee/pfolio/blob/master/index.html): `index.html`
- [Site styling](https://github.com/codewithsadee/pfolio/blob/master/assets/css/style.css): `assets/css/style.css`
- [Site behavior](https://github.com/codewithsadee/pfolio/blob/master/assets/js/script.js): `assets/js/script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: opens (evidence: `README.md`)
- Portfolio page → Site styling: uses CSS (evidence: `README.md`)
- Portfolio page → Site behavior: uses JavaScript (evidence: `README.md`)