# krrishpallod/portfolio- architecture

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

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

## Overview

This is a browser-based portfolio site. Visitors browse its page, use interactive navigation and project filters, adjust the theme, and submit a contact form; the form displays a local confirmation rather than sending a message to a service. The sampled script also animates introductory text, reveals content on scroll, tracks the active section, and sets the current year. The tree lists the page and styles, but only script.js was excerpted, so page structure and script-loading details cannot be verified.

Main entry points: [`index.html`](https://github.com/krrishpallod/portfolio-/blob/main/index.html) (Portfolio page), [`script.js`](https://github.com/krrishpallod/portfolio-/blob/main/script.js) (Theme toggle)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_page["Portfolio page<br/>[index.html]"]
  node_styles["Page styling<br/>[style.css]"]
end

subgraph group_interactions["Page interactions"]
  node_navigation["Mobile navigation<br/>[script.js]"]
  node_theme["Theme toggle<br/>[script.js]"]
  node_intro["Typing intro<br/>[script.js]"]
  node_projects["Project filter<br/>[script.js]"]
  node_scroll["Scroll effects<br/>[script.js]"]
  node_contact["Contact form<br/>[script.js]"]
  node_year["Current year<br/>[script.js]"]
end

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

node_visitor -->|"browses"| node_page
node_navigation -->|"toggles menu"| node_page
node_theme -->|"updates theme"| node_page
node_theme -->|"saves preference"| node_storage
node_storage -->|"restores preference"| node_theme
node_intro -->|"animates text"| node_page
node_projects -->|"filters cards"| node_page
node_scroll -->|"updates on scroll"| node_page
node_contact -->|"validates and confirms"| node_page
node_year -->|"sets displayed year"| node_page

click node_page "https://github.com/krrishpallod/portfolio-/blob/main/index.html"
click node_styles "https://github.com/krrishpallod/portfolio-/blob/main/style.css"
click node_navigation "https://github.com/krrishpallod/portfolio-/blob/main/script.js"
click node_theme "https://github.com/krrishpallod/portfolio-/blob/main/script.js"
click node_intro "https://github.com/krrishpallod/portfolio-/blob/main/script.js"
click node_projects "https://github.com/krrishpallod/portfolio-/blob/main/script.js"
click node_scroll "https://github.com/krrishpallod/portfolio-/blob/main/script.js"
click node_contact "https://github.com/krrishpallod/portfolio-/blob/main/script.js"
click node_year "https://github.com/krrishpallod/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_styles toneBlue
class node_navigation,node_theme,node_intro,node_projects,node_scroll,node_contact,node_year,node_storage toneAmber
class node_visitor toneIndigo
```

## Components

### Portfolio presentation

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

### Page interactions

- [Mobile navigation](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`
- [Theme toggle](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`
- [Typing intro](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`
- [Project filter](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`
- [Scroll effects](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`
- [Contact form](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`
- [Current year](https://github.com/krrishpallod/portfolio-/blob/main/script.js): `script.js`

### Other components

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

## Connections

- Visitor → Portfolio page: browses
- Mobile navigation → Portfolio page: toggles menu (evidence: `script.js`)
- Theme toggle → Portfolio page: updates theme (evidence: `script.js`)
- Theme toggle → Browser storage: saves preference (evidence: `script.js`)
- Browser storage → Theme toggle: restores preference (evidence: `script.js`)
- Typing intro → Portfolio page: animates text (evidence: `script.js`)
- Project filter → Portfolio page: filters cards (evidence: `script.js`)
- Scroll effects → Portfolio page: updates on scroll (evidence: `script.js`)
- Contact form → Portfolio page: validates and confirms (evidence: `script.js`)
- Current year → Portfolio page: sets displayed year (evidence: `script.js`)