# kwrsahil/my-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/kwrsahil/my-portfolio
- Repository: https://github.com/kwrsahil/my-portfolio

## Overview

This is a static personal portfolio presenting Sahil Kumar Kunwar and his Shift Tracker project. Visitors browse the portfolio sections; browser-side JavaScript restores or detects a language preference, updates page interactions, and fetches the project’s latest tag for its version badge. The README documents bilingual content, responsive styling, SEO, and Cloudflare Pages hosting. The graph uses the supplied JavaScript excerpt and README; HTML and CSS were not excerpted, so their detailed wiring is not inferred.

Main entry points: [`index.html`](https://github.com/kwrsahil/my-portfolio/blob/main/index.html) (Portfolio sections), [`js/script.js`](https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js) (Interaction script), [`css/style.css`](https://github.com/kwrsahil/my-portfolio/blob/main/css/style.css) (Page styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio content"]
  node_portfolio["Portfolio sections<br/>[index.html]"]
  node_presentation["Page styling<br/>[style.css]"]
end

subgraph group_interaction["Browser interactions"]
  node_client["Interaction script<br/>[script.js]"]
  node_language["Language switching<br/>[script.js]"]
  node_scroll["Scroll effects<br/>[script.js]"]
  node_preference[("Language preference")]
end

subgraph group_project["Project showcase"]
  node_showcase["Shift Tracker card<br/>[index.html]"]
  node_version["Version badge<br/>[index.html]"]
  node_tags["GitHub tags API"]
end

subgraph group_delivery["Site delivery"]
  node_pages["Cloudflare Pages"]
end

node_visitor(("Visitor"))
node_browser["Browser locale"]

node_visitor -->|"browses"| node_portfolio
node_presentation -->|"styles"| node_portfolio
node_client -->|"updates"| node_portfolio
node_client -->|"runs"| node_language
node_language -->|"reads and writes"| node_preference
node_language -->|"detects locale"| node_browser
node_language -->|"sets language"| node_portfolio
node_client -->|"runs"| node_scroll
node_scroll -->|"observes and updates"| node_portfolio
node_portfolio -->|"presents"| node_showcase
node_client -->|"fetches tags"| node_tags
node_client -->|"updates badge"| node_version
node_pages -->|"serves static site"| node_portfolio

click node_portfolio "https://github.com/kwrsahil/my-portfolio/blob/main/index.html"
click node_presentation "https://github.com/kwrsahil/my-portfolio/blob/main/css/style.css"
click node_client "https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js"
click node_language "https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js"
click node_scroll "https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js"
click node_showcase "https://github.com/kwrsahil/my-portfolio/blob/main/index.html"
click node_version "https://github.com/kwrsahil/my-portfolio/blob/main/index.html"

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_presentation,node_browser toneBlue
class node_client,node_language,node_scroll,node_preference toneAmber
class node_showcase,node_version,node_tags toneMint
class node_pages toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio content

- [Portfolio sections](https://github.com/kwrsahil/my-portfolio/blob/main/index.html): `index.html`
- [Page styling](https://github.com/kwrsahil/my-portfolio/blob/main/css/style.css): `css/style.css`

### Browser interactions

- [Interaction script](https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js): `js/script.js`
- [Language switching](https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js): `js/script.js`
- [Scroll effects](https://github.com/kwrsahil/my-portfolio/blob/main/js/script.js): `js/script.js`
- **Language preference**

### Project showcase

- [Shift Tracker card](https://github.com/kwrsahil/my-portfolio/blob/main/index.html): `index.html`
- [Version badge](https://github.com/kwrsahil/my-portfolio/blob/main/index.html): `index.html`
- **GitHub tags API**

### Site delivery

- **Cloudflare Pages**

### Other components

- **Visitor**
- **Browser locale**

## Connections

- Visitor → Portfolio sections: browses (evidence: `README.md`)
- Page styling → Portfolio sections: styles (evidence: `README.md`)
- Interaction script → Portfolio sections: updates (evidence: `js/script.js`)
- Interaction script → Language switching: runs (evidence: `js/script.js`)
- Language switching → Language preference: reads and writes (evidence: `js/script.js`)
- Language switching → Browser locale: detects locale (evidence: `js/script.js`)
- Language switching → Portfolio sections: sets language (evidence: `README.md`)
- Interaction script → Scroll effects: runs (evidence: `js/script.js`)
- Scroll effects → Portfolio sections: observes and updates (evidence: `js/script.js`)
- Portfolio sections → Shift Tracker card: presents (evidence: `README.md`)
- Interaction script → GitHub tags API: fetches tags (evidence: `js/script.js`)
- Interaction script → Version badge: updates badge (evidence: `js/script.js`)
- Cloudflare Pages → Portfolio sections: serves static site (evidence: `README.md`)