# manoharsamvel24/portfolio architecture

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

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

## Overview

#### Purpose and Entry Point
This repository is a static personal portfolio site. It is served directly from `index.html`, with browser-side behavior in `script.js` and presentation in `style.css`. No backend, build system, application server, or package-managed runtime is present.

#### Document Shell and Content
`index.html` is the primary composition boundary: it defines the portfolio’s page structure, content sections, asset references, and links. Browser loading begins here and delegates styling and interaction to adjacent root-level files:
- `index.html`
- `style.css`
- `script.js`

#### Presentation Layer
`style.css` owns the visual system and responsive layout for the static document. It is consumed directly by the browser, rather than generated from a preprocessing or component pipeline.
- `style.css`
- `index.html`

#### Client-Side Interaction
`script.js` provides any dynamic behavior after document load, such as navigation, UI state, animations, or DOM event handling. Its boundary is the browser DOM defined in `index.html`; it has no indicated API or server integration.
- `script.js`
- `index.html`

#### Static Asset Boundary
Visual resources are stored under `assets/icons` and are referenced by page markup and/or CSS. Assets are deployed with the site as static files.
- `assets`
- `assets/icons`
- `index.html`

#### Deployment and Automation
GitHub Actions contains a static-site-oriented workflow, likely responsible for validation or deployment automation. The workflow is the repository’s only visible infrastructure integration and runs in GitHub-hosted CI rather than application runtime code.
- `.github/workflows/static.yml`

#### Runtime and Control Flow
A browser requests `index.html`, then loads linked CSS, JavaScript, and icon assets. CSS renders the document; JavaScript attaches behavior to existing DOM elements. Repository changes can trigger the GitHub Actions static workflow, after which the generated—or directly served—static files are deployable without a backend service.

Main entry points: [`index.html`](https://github.com/manoharsamvel24/portfolio/blob/main/index.html) (Portfolio document), [`style.css`](https://github.com/manoharsamvel24/portfolio/blob/main/style.css) (Visual system), [`script.js`](https://github.com/manoharsamvel24/portfolio/blob/main/script.js) (Client interaction), [`assets`](https://github.com/manoharsamvel24/portfolio/tree/main/assets) (Static assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Static site"]
  node_browser(("Browser<br/>runtime"))
  node_page["Portfolio document<br/>HTML entry point<br/>[index.html]"]
  node_styles["Visual system<br/>CSS<br/>[style.css]"]
  node_behavior["Client interaction<br/>browser JavaScript<br/>[script.js]"]
  node_dom["Page DOM<br/>browser DOM"]
  node_assets["Static assets<br/>asset directory"]
  node_icons["Icon resources<br/>icon assets"]
end

subgraph group_automation["Automation"]
  node_workflow{{"Static-site workflow<br/>GitHub Actions<br/>[static.yml]"}}
  node_deployment["Static deployment<br/>hosting output"]
end

node_browser -->|"requests"| node_page
node_page -->|"loads"| node_styles
node_page -->|"loads"| node_behavior
node_page -->|"references"| node_assets
node_assets -->|"contains"| node_icons
node_page -->|"creates"| node_dom
node_styles -->|"renders"| node_dom
node_behavior -->|"handles events"| node_dom
node_workflow -->|"deploys static files"| node_deployment
node_deployment -.->|"serves"| node_browser

click node_page "https://github.com/manoharsamvel24/portfolio/blob/main/index.html"
click node_styles "https://github.com/manoharsamvel24/portfolio/blob/main/style.css"
click node_behavior "https://github.com/manoharsamvel24/portfolio/blob/main/script.js"
click node_assets "https://github.com/manoharsamvel24/portfolio/tree/main/assets"
click node_icons "https://github.com/manoharsamvel24/portfolio/tree/main/assets/icons"
click node_workflow "https://github.com/manoharsamvel24/portfolio/blob/main/.github/workflows/static.yml"

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_browser,node_page,node_styles,node_behavior,node_dom,node_assets,node_icons toneBlue
class node_workflow,node_deployment toneAmber
```

## Components

### Static site

- **Browser**: runtime · Loads and renders the static portfolio.
- [Portfolio document](https://github.com/manoharsamvel24/portfolio/blob/main/index.html): HTML entry point · Defines page structure, content, links, and asset references. · `index.html`
- [Visual system](https://github.com/manoharsamvel24/portfolio/blob/main/style.css): CSS · Provides responsive presentation for the document. · `style.css`
- [Client interaction](https://github.com/manoharsamvel24/portfolio/blob/main/script.js): browser JavaScript · Attaches dynamic behavior to the existing DOM. · `script.js`
- **Page DOM**: browser DOM
- [Static assets](https://github.com/manoharsamvel24/portfolio/tree/main/assets): asset directory · Files deployed alongside the site. · `assets`
- [Icon resources](https://github.com/manoharsamvel24/portfolio/tree/main/assets/icons): icon assets · `assets/icons`

### Automation

- [Static-site workflow](https://github.com/manoharsamvel24/portfolio/blob/main/.github/workflows/static.yml): GitHub Actions · Runs repository automation for the static site. · `.github/workflows/static.yml`
- **Static deployment**: hosting output · Serves site files without a backend.

## Connections

- Browser → Portfolio document: requests
- Portfolio document → Visual system: loads
- Portfolio document → Client interaction: loads
- Portfolio document → Static assets: references
- Static assets → Icon resources: contains
- Portfolio document → Page DOM: creates
- Visual system → Page DOM: renders
- Client interaction → Page DOM: handles events
- Static-site workflow → Static deployment: deploys static files
- Static deployment → Browser: serves