# dhanraj18-art/portfolio architecture

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

## Overview

This is a small static portfolio site. Visitors browse project cards, filter them by category, and can view project details in a modal with technology, feature, architecture, and external-link information. The sampled JavaScript supports the filtering and modal rendering; the excerpt does not show how project cards invoke the modal or how the HTML connects to the script, so those links are omitted.

Main entry points: [`script.js`](https://github.com/dhanraj18-art/portfolio/blob/main/script.js) (Project Detail Modal), [`index.html`](https://github.com/dhanraj18-art/portfolio/blob/main/index.html) (Portfolio Page), [`resume.pdf`](https://github.com/dhanraj18-art/portfolio/blob/main/resume.pdf) (Resume PDF)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio Site"]
  node_page["Portfolio Page<br/>[index.html]"]
  node_project_cards["Project Cards<br/>[index.html]"]
end

subgraph group_content["Project Content"]
  node_projects["Project Records<br/>[script.js]"]
  node_resume["Resume PDF<br/>[resume.pdf]"]
  node_github["Project GitHub Links<br/>[script.js]"]
end

subgraph group_interaction["Visitor Interactions"]
  node_filtering["Project Filtering<br/>[script.js]"]
  node_modal["Project Detail Modal<br/>[script.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"browses"| node_page
node_visitor -->|"selects filter"| node_filtering
node_filtering -->|"shows or hides"| node_project_cards
node_projects -->|"renders details"| node_modal
node_modal -->|"renders links"| node_github
node_visitor -->|"views details"| node_modal
node_visitor -.->|"opens"| node_resume

click node_page "https://github.com/dhanraj18-art/portfolio/blob/main/index.html"
click node_projects "https://github.com/dhanraj18-art/portfolio/blob/main/script.js"
click node_filtering "https://github.com/dhanraj18-art/portfolio/blob/main/script.js"
click node_project_cards "https://github.com/dhanraj18-art/portfolio/blob/main/index.html"
click node_modal "https://github.com/dhanraj18-art/portfolio/blob/main/script.js"
click node_resume "https://github.com/dhanraj18-art/portfolio/blob/main/resume.pdf"
click node_github "https://github.com/dhanraj18-art/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_page,node_project_cards toneBlue
class node_projects,node_resume,node_github toneAmber
class node_filtering,node_modal toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio Site

- [Portfolio Page](https://github.com/dhanraj18-art/portfolio/blob/main/index.html): `index.html`
- [Project Cards](https://github.com/dhanraj18-art/portfolio/blob/main/index.html): `index.html`

### Project Content

- [Project Records](https://github.com/dhanraj18-art/portfolio/blob/main/script.js): `script.js`
- [Resume PDF](https://github.com/dhanraj18-art/portfolio/blob/main/resume.pdf): `resume.pdf`
- [Project GitHub Links](https://github.com/dhanraj18-art/portfolio/blob/main/script.js): `script.js`

### Visitor Interactions

- [Project Filtering](https://github.com/dhanraj18-art/portfolio/blob/main/script.js): `script.js`
- [Project Detail Modal](https://github.com/dhanraj18-art/portfolio/blob/main/script.js): `script.js`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio Page: browses
- Visitor → Project Filtering: selects filter
- Project Filtering → Project Cards: shows or hides
- Project Records → Project Detail Modal: renders details
- Project Detail Modal → Project GitHub Links: renders links
- Visitor → Project Detail Modal: views details
- Visitor → Resume PDF: opens