# devaddict012/my-portfolio architecture

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

## Overview

This is a personal portfolio website for presenting its owner's projects, skills, and experience. A visitor views the portfolio page; JavaScript adds theme, scrolling, navigation, and reveal interactions, while the README identifies HTML and CSS as the responsive presentation layer. The sampled script confirms browser-side behavior and theme persistence. The HTML and stylesheets were not sampled, so their detailed structure and links to the résumé PDFs cannot be verified; the PDFs are included as portfolio materials.

Main entry points: [`index.html`](https://github.com/devaddict012/my-portfolio/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/devaddict012/my-portfolio/blob/main/script.js) (Page interactions), [`style.css`](https://github.com/devaddict012/my-portfolio/blob/main/style.css) (Responsive styles), [`mediaqueries.css`](https://github.com/devaddict012/my-portfolio/blob/main/mediaqueries.css) (Media queries)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_portfolio["Portfolio page<br/>[index.html]"]
  node_styles["Responsive styles<br/>[style.css]"]
  node_media_styles["Media queries<br/>[mediaqueries.css]"]
end

subgraph group_interaction["Browser interactions"]
  node_interactions["Page interactions<br/>[script.js]"]
  node_theme_store[("Browser local storage")]
end

subgraph group_materials["Portfolio materials"]
  node_orat_tile_cv["ORATILE CV<br/>[ORATILE CV.pdf]"]
  node_thomas_cv["THOMAS CV<br/>[THOMAS CV.pdf]"]
  node_github_image["GitHub image<br/>[github.jfif]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_portfolio
node_interactions -->|"updates DOM"| node_portfolio
node_interactions -->|"reads and writes"| node_theme_store
node_portfolio -->|"uses styling"| node_styles
node_portfolio -->|"uses responsive CSS"| node_media_styles

click node_portfolio "https://github.com/devaddict012/my-portfolio/blob/main/index.html"
click node_styles "https://github.com/devaddict012/my-portfolio/blob/main/style.css"
click node_media_styles "https://github.com/devaddict012/my-portfolio/blob/main/mediaqueries.css"
click node_interactions "https://github.com/devaddict012/my-portfolio/blob/main/script.js"
click node_orat_tile_cv "https://github.com/devaddict012/my-portfolio/blob/main/assets/ORATILE%20CV.pdf"
click node_thomas_cv "https://github.com/devaddict012/my-portfolio/blob/main/assets/THOMAS%20CV.pdf"
click node_github_image "https://github.com/devaddict012/my-portfolio/blob/main/assets/github.jfif"

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_portfolio,node_styles,node_media_styles toneBlue
class node_interactions,node_theme_store toneAmber
class node_orat_tile_cv,node_thomas_cv,node_github_image toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

- [Portfolio page](https://github.com/devaddict012/my-portfolio/blob/main/index.html): `index.html`
- [Responsive styles](https://github.com/devaddict012/my-portfolio/blob/main/style.css): `style.css`
- [Media queries](https://github.com/devaddict012/my-portfolio/blob/main/mediaqueries.css): `mediaqueries.css`

### Browser interactions

- [Page interactions](https://github.com/devaddict012/my-portfolio/blob/main/script.js): `script.js`
- **Browser local storage**

### Portfolio materials

- [ORATILE CV](https://github.com/devaddict012/my-portfolio/blob/main/assets/ORATILE%20CV.pdf): `assets/ORATILE CV.pdf`
- [THOMAS CV](https://github.com/devaddict012/my-portfolio/blob/main/assets/THOMAS%20CV.pdf): `assets/THOMAS CV.pdf`
- [GitHub image](https://github.com/devaddict012/my-portfolio/blob/main/assets/github.jfif): `assets/github.jfif`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio page: views (evidence: `README.md`)
- Page interactions → Portfolio page: updates DOM (evidence: `script.js`)
- Page interactions → Browser local storage: reads and writes (evidence: `script.js`)
- Portfolio page → Responsive styles: uses styling (evidence: `README.md`)
- Portfolio page → Media queries: uses responsive CSS (evidence: `README.md`)