# vishwajit-create/vishwajit-portfolio architecture

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

## Overview

This is a small personal portfolio site. Visitors browse the portfolio, explore GitHub-backed projects and filter them, or submit a contact form; submissions are saved locally and sent to Google Sheets. The sampled JavaScript shows page-load initialization, project rendering/filtering, and contact submission behavior. Other wiring and page structure are not fully shown, so the graph omits uncertain links and does not infer behavior from unsampled code.

Main entry points: [`index.html`](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/index.html) (Portfolio page), [`app.js`](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js) (Page initializer), [`style.css`](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/style.css) (Site styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio experience"]
  node_page["Portfolio page<br/>[index.html]"]
  node_styles["Site styling<br/>[style.css]"]
  node_initializer["Page initializer<br/>[app.js]"]
  node_site_interactions["Navigation and effects<br/>[app.js]"]
end

subgraph group_projects["Project showcase"]
  node_project_filter["Project filter<br/>[app.js]"]
  node_project_renderer["Project renderer<br/>[app.js]"]
  node_github_fetch["GitHub repository fetch<br/>[app.js]"]
end

subgraph group_contact["Contact"]
  node_contact_form["Contact submission<br/>[app.js]"]
  node_local_storage[("Browser local storage")]
end

node_visitor(("Visitor"))
node_github_api["GitHub API"]
node_sheets["Google Sheets endpoint"]

node_visitor -->|"visits"| node_page
node_page -->|"styled by"| node_styles
node_page -->|"loads"| node_initializer
node_initializer -->|"initializes"| node_site_interactions
node_initializer -->|"starts fetch"| node_github_fetch
node_github_fetch -->|"requests repositories"| node_github_api
node_project_filter -->|"rerenders"| node_project_renderer
node_contact_form -->|"saves messages"| node_local_storage
node_contact_form -.->|"submits message"| node_sheets

click node_page "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/index.html"
click node_styles "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/style.css"
click node_initializer "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js"
click node_site_interactions "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js"
click node_project_filter "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js"
click node_project_renderer "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js"
click node_github_fetch "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js"
click node_contact_form "https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.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,node_initializer,node_site_interactions toneBlue
class node_project_filter,node_project_renderer,node_github_fetch toneAmber
class node_contact_form,node_local_storage,node_github_api toneMint
class node_visitor,node_sheets toneIndigo
```

## Components

### Portfolio experience

- [Portfolio page](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/index.html): `index.html`
- [Site styling](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/style.css): `style.css`
- [Page initializer](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js): `app.js`
- [Navigation and effects](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js): `app.js`

### Project showcase

- [Project filter](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js): `app.js`
- [Project renderer](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js): `app.js`
- [GitHub repository fetch](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js): `app.js`

### Contact

- [Contact submission](https://github.com/vishwajit-create/vishwajit-portfolio/blob/main/app.js): `app.js`
- **Browser local storage**

### Other components

- **Visitor**
- **GitHub API**
- **Google Sheets endpoint**

## Connections

- Visitor → Portfolio page: visits
- Portfolio page → Site styling: styled by
- Portfolio page → Page initializer: loads
- Page initializer → Navigation and effects: initializes
- Page initializer → GitHub repository fetch: starts fetch
- GitHub repository fetch → GitHub API: requests repositories
- Project filter → Project renderer: rerenders
- Contact submission → Browser local storage: saves messages
- Contact submission → Google Sheets endpoint: submits message