# pramodkumar524/pramod-portfolio architecture

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

## Overview

This is a static personal portfolio: visitors browse the owner’s introduction, background, skills, projects, and contact options, with a resume download and client-side visual interactions. The README documents the major sections and features; sampled JavaScript confirms typing, theme persistence, scroll reveal, and image animation. HTML and CSS were not sampled, so their detailed wiring is based on the documented structure and file tree.

Main entry points: [`index.html`](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js) (Page interactions), [`resume.pdf`](https://github.com/pramodkumar524/pramod-portfolio/blob/main/resume.pdf) (Resume download), [`style.css`](https://github.com/pramodkumar524/pramod-portfolio/blob/main/style.css) (Responsive styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Portfolio content"]
  node_page["Portfolio page<br/>[index.html]"]
  node_home["Home introduction<br/>[index.html]"]
  node_about["About and education<br/>[index.html]"]
  node_skills["Skills cards<br/>[index.html]"]
  node_projects["Project showcase<br/>[index.html]"]
  node_contact["Contact UI<br/>[index.html]"]
  node_resume["Resume download<br/>[resume.pdf]"]
end

subgraph group_presentation["Page presentation"]
  node_styles["Responsive styling<br/>[style.css]"]
end

subgraph group_interaction["Client interactions"]
  node_interactions["Page interactions<br/>[script.js]"]
  node_typing["Typing animation<br/>[script.js]"]
  node_theme["Dark mode toggle<br/>[script.js]"]
  node_reveal["Scroll reveal<br/>[script.js]"]
  node_image["Profile image motion<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_storage[("Browser theme storage")]

node_visitor -->|"opens"| node_page
node_page -->|"loads styles"| node_styles
node_page -->|"loads script"| node_interactions
node_page -->|"presents"| node_home
node_page -->|"presents"| node_about
node_page -->|"presents"| node_skills
node_page -->|"presents"| node_projects
node_page -->|"presents"| node_contact
node_visitor -->|"downloads"| node_resume
node_interactions -->|"runs"| node_typing
node_interactions -->|"runs"| node_theme
node_interactions -->|"runs"| node_reveal
node_interactions -->|"runs"| node_image
node_theme -->|"reads and writes"| node_storage

click node_page "https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html"
click node_home "https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html"
click node_about "https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html"
click node_skills "https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html"
click node_projects "https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html"
click node_contact "https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html"
click node_resume "https://github.com/pramodkumar524/pramod-portfolio/blob/main/resume.pdf"
click node_styles "https://github.com/pramodkumar524/pramod-portfolio/blob/main/style.css"
click node_interactions "https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js"
click node_typing "https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js"
click node_theme "https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js"
click node_reveal "https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js"
click node_image "https://github.com/pramodkumar524/pramod-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_home,node_about,node_skills,node_projects,node_contact,node_resume toneBlue
class node_styles,node_storage toneAmber
class node_interactions,node_typing,node_theme,node_reveal,node_image toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio content

- [Portfolio page](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html): `index.html`
- [Home introduction](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html): `index.html`
- [About and education](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html): `index.html`
- [Skills cards](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html): `index.html`
- [Project showcase](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html): `index.html`
- [Contact UI](https://github.com/pramodkumar524/pramod-portfolio/blob/main/index.html): `index.html`
- [Resume download](https://github.com/pramodkumar524/pramod-portfolio/blob/main/resume.pdf): `resume.pdf`

### Page presentation

- [Responsive styling](https://github.com/pramodkumar524/pramod-portfolio/blob/main/style.css): `style.css`

### Client interactions

- [Page interactions](https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js): `script.js`
- [Typing animation](https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js): `script.js`
- [Dark mode toggle](https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js): `script.js`
- [Scroll reveal](https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js): `script.js`
- [Profile image motion](https://github.com/pramodkumar524/pramod-portfolio/blob/main/script.js): `script.js`

### Other components

- **Visitor**
- **Browser theme storage**

## Connections

- Visitor → Portfolio page: opens
- Portfolio page → Responsive styling: loads styles
- Portfolio page → Page interactions: loads script
- Portfolio page → Home introduction: presents
- Portfolio page → About and education: presents
- Portfolio page → Skills cards: presents
- Portfolio page → Project showcase: presents
- Portfolio page → Contact UI: presents
- Visitor → Resume download: downloads
- Page interactions → Typing animation: runs
- Page interactions → Dark mode toggle: runs
- Page interactions → Scroll reveal: runs
- Page interactions → Profile image motion: runs
- Dark mode toggle → Browser theme storage: reads and writes