# greeshmita-23/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/greeshmita-23/portfolio-website
- Repository: https://github.com/greeshmita-23/portfolio-website

## Overview

This is a React single-page personal portfolio for presenting the owner’s background, skills, career history, projects, credentials, and contact options. A visitor enters through the app shell, explores its portfolio sections, can search and filter projects and open project details, browse GitHub repositories and statistics, access a resume, and initiate contact by email. The graph follows the documented app composition and the sampled project/contact interactions; unsampled section internals are represented by their components rather than inferred connections.

Main entry points: [`src/App.jsx`](https://github.com/greeshmita-23/portfolio-website/blob/main/src/App.jsx) (App composition), [`src/components/Projects.jsx`](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Projects.jsx) (Project collection), [`src/components/GitHubProjects.jsx`](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/GitHubProjects.jsx) (GitHub repositories), [`src/components/GithubStats.jsx`](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/GithubStats.jsx) (GitHub statistics)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Portfolio Shell"]
  node_app["App composition<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer links<br/>[Footer.jsx]"]
end

subgraph group_profile["Profile and Career"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_about["Background<br/>[About.jsx]"]
  node_skills["Technical skills<br/>[Skills.jsx]"]
  node_experience["Experience timeline<br/>[Experience.jsx]"]
end

subgraph group_work["Projects and GitHub"]
  node_projects["Project collection<br/>[Projects.jsx]"]
  node_projectcard["Project cards<br/>[ProjectCard.jsx]"]
  node_projectfilter["Project filter<br/>[ProjectFilter.jsx]"]
  node_projectsearch["Project search<br/>[ProjectSearch.jsx]"]
  node_projectmodal["Project details<br/>[ProjectModal.jsx]"]
  node_githubprojects["GitHub repositories<br/>[GitHubProjects.jsx]"]
  node_githubstats["GitHub statistics<br/>[GithubStats.jsx]"]
end

subgraph group_connect["Credentials and Contact"]
  node_certificates["Certificates<br/>[Certificates.jsx]"]
  node_certmodal["Certificate details"]
  node_achievements["Achievements<br/>[Achievements.jsx]"]
  node_resume["Resume access<br/>[Resume.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
end

node_visitor(("Portfolio visitor"))
node_github(("GitHub service"))
node_email(("Email application"))

node_visitor -->|"opens portfolio"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_githubprojects
node_app -->|"renders"| node_githubstats
node_app -->|"renders"| node_certificates
node_app -->|"renders"| node_achievements
node_app -->|"renders"| node_resume
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_projects -->|"renders"| node_projectcard
node_projects -->|"renders"| node_projectfilter
node_projects -->|"renders"| node_projectsearch
node_projects -->|"renders"| node_projectmodal
node_certificates -->|"opens details"| node_certmodal
node_githubprojects -->|"fetches repositories"| node_github
node_githubstats -.->|"shows statistics"| node_github
node_contact -->|"opens prepared email"| node_email

click node_app "https://github.com/greeshmita-23/portfolio-website/blob/main/src/App.jsx"
click node_navbar "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/About.jsx"
click node_skills "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Skills.jsx"
click node_experience "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Experience.jsx"
click node_projects "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Projects.jsx"
click node_projectcard "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectCard.jsx"
click node_projectfilter "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectFilter.jsx"
click node_projectsearch "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectSearch.jsx"
click node_projectmodal "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectModal.jsx"
click node_githubprojects "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/GitHubProjects.jsx"
click node_githubstats "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/GithubStats.jsx"
click node_certificates "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Certificates.jsx"
click node_certmodal "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/CertificateModal.jsx"
click node_achievements "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Achievements.jsx"
click node_resume "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Resume.jsx"
click node_contact "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Footer.jsx"

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_app,node_navbar,node_footer toneBlue
class node_hero,node_about,node_skills,node_experience toneAmber
class node_projects,node_projectcard,node_projectfilter,node_projectsearch,node_projectmodal,node_githubprojects,node_githubstats toneMint
class node_certificates,node_certmodal,node_achievements,node_resume,node_contact toneRose
class node_visitor,node_github,node_email toneIndigo
```

## Components

### Portfolio Shell

- [App composition](https://github.com/greeshmita-23/portfolio-website/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer links](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Profile and Career

- [Introduction](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Background](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Technical skills](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Experience timeline](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`

### Projects and GitHub

- [Project collection](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Project cards](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectCard.jsx): `src/components/ProjectCard.jsx`
- [Project filter](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectFilter.jsx): `src/components/ProjectFilter.jsx`
- [Project search](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectSearch.jsx): `src/components/ProjectSearch.jsx`
- [Project details](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/ProjectModal.jsx): `src/components/ProjectModal.jsx`
- [GitHub repositories](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/GitHubProjects.jsx): `src/components/GitHubProjects.jsx`
- [GitHub statistics](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/GithubStats.jsx): `src/components/GithubStats.jsx`

### Credentials and Contact

- [Certificates](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Certificates.jsx): `src/components/Certificates.jsx`
- [Certificate details](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/CertificateModal.jsx): `src/components/CertificateModal.jsx`
- [Achievements](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Achievements.jsx): `src/components/Achievements.jsx`
- [Resume access](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Resume.jsx): `src/components/Resume.jsx`
- [Contact form](https://github.com/greeshmita-23/portfolio-website/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Other components

- **Portfolio visitor**
- **GitHub service**
- **Email application**

## Connections

- Portfolio visitor → App composition: opens portfolio (evidence: `README.md`)
- App composition → Navigation: renders (evidence: `src/App.jsx`)
- App composition → Introduction: renders (evidence: `src/App.jsx`)
- App composition → Background: renders (evidence: `src/App.jsx`)
- App composition → Technical skills: renders (evidence: `src/App.jsx`)
- App composition → Experience timeline: renders (evidence: `src/App.jsx`)
- App composition → Project collection: renders (evidence: `src/App.jsx`)
- App composition → GitHub repositories: renders (evidence: `src/App.jsx`)
- App composition → GitHub statistics: renders (evidence: `src/App.jsx`)
- App composition → Certificates: renders (evidence: `src/App.jsx`)
- App composition → Achievements: renders (evidence: `src/App.jsx`)
- App composition → Resume access: renders (evidence: `src/App.jsx`)
- App composition → Contact form: renders (evidence: `src/App.jsx`)
- App composition → Footer links: renders (evidence: `src/App.jsx`)
- Project collection → Project cards: renders (evidence: `src/components/Projects.jsx`)
- Project collection → Project filter: renders (evidence: `src/components/Projects.jsx`)
- Project collection → Project search: renders (evidence: `src/components/Projects.jsx`)
- Project collection → Project details: renders (evidence: `src/components/Projects.jsx`)
- Certificates → Certificate details: opens details (evidence: `src/components/Certificates.jsx`)
- GitHub repositories → GitHub service: fetches repositories (evidence: `src/components/GitHubProjects.jsx`)
- GitHub statistics → GitHub service: shows statistics (evidence: `README.md`)
- Contact form → Email application: opens prepared email (evidence: `src/components/Contact.jsx`)