# whisperedshadow/portfolio architecture

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

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

## Overview

This repository is a React personal portfolio: visitors browse Durai Pon Singh’s profile, education, skills and projects, then can contact him or use the chat assistant. The main route flow is browser entry → shared navigation/app shell → route selection → portfolio page; the home page also loads and animates a 3D robot. Contact submission and chatbot replies call external services. The README describes Express, Mailjet and MySQL, but no backend or database implementation appears in the supplied tree, so those are not represented as implemented components.

Main entry points: [`src/Components/Routes/Routings.jsx`](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/Routes/Routings.jsx) (Route selector), [`src/Components/SEO/SEO.jsx`](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/SEO/SEO.jsx) (SEO metadata), [`src/Components/pages/contact/Contact.jsx`](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/contact/Contact.jsx) (Contact form), [`src/App.jsx`](https://github.com/whisperedshadow/portfolio/blob/main/src/App.jsx) (React app shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_app["React app shell<br/>[App.jsx]"]
  node_navigation["Header navigation<br/>[header.jsx]"]
  node_routes["Route selector<br/>[Routings.jsx]"]
end

subgraph group_portfolio["Portfolio pages"]
  node_home["Home / 3D hero<br/>[Home.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_education["Education history<br/>[Education.jsx]"]
  node_skills["Skills catalogue<br/>[Skills.jsx]"]
  node_skillcards["Skill cards<br/>[skill.jsx]"]
  node_projects["Projects showcase<br/>[Projects.jsx]"]
  node_projectcard["Project detail<br/>[Project.jsx]"]
end

subgraph group_engagement["Visitor interaction"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_chatbot["Chat assistant<br/>[ChatBot.jsx]"]
end

subgraph group_metadata["Page metadata"]
  node_seo["SEO metadata<br/>[SEO.jsx]"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_backend["Email backend"]
node_gemini["Gemini API"]
node_robotasset["Robot model<br/>[robot.glb]"]

node_visitor -->|"opens portfolio"| node_browser
node_browser -->|"renders"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_routes
node_visitor -->|"chooses page"| node_navigation
node_navigation -->|"navigates"| node_routes
node_routes -->|"selects route"| node_home
node_routes -->|"selects route"| node_about
node_routes -->|"selects route"| node_education
node_routes -->|"selects route"| node_skills
node_routes -->|"selects route"| node_projects
node_routes -->|"selects route"| node_contact
node_skills -->|"renders cards"| node_skillcards
node_projects -->|"renders projects"| node_projectcard
node_home -->|"loads model"| node_robotasset
node_visitor -->|"submits inquiry"| node_contact
node_contact -->|"POSTs email data"| node_backend
node_visitor -->|"sends message"| node_chatbot
node_chatbot -->|"requests reply"| node_gemini
node_about -->|"sets metadata"| node_seo
node_education -->|"sets metadata"| node_seo
node_skills -->|"sets metadata"| node_seo
node_projects -->|"sets metadata"| node_seo
node_contact -->|"sets metadata"| node_seo

click node_app "https://github.com/whisperedshadow/portfolio/blob/main/src/App.jsx"
click node_navigation "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/header/header.jsx"
click node_routes "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/Routes/Routings.jsx"
click node_home "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Home/Home.jsx"
click node_about "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/About/About.jsx"
click node_education "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Education/Education.jsx"
click node_skills "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Skills/Skills.jsx"
click node_skillcards "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Skills/skill/skill.jsx"
click node_projects "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Projects/Projects.jsx"
click node_projectcard "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Projects/project/Project.jsx"
click node_contact "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/contact/Contact.jsx"
click node_chatbot "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/ChatBot.jsx"
click node_seo "https://github.com/whisperedshadow/portfolio/blob/main/src/Components/SEO/SEO.jsx"
click node_robotasset "https://github.com/whisperedshadow/portfolio/blob/main/public/robot.glb"

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_navigation,node_routes,node_browser toneBlue
class node_home,node_about,node_education,node_skills,node_skillcards,node_projects,node_projectcard toneAmber
class node_contact,node_chatbot,node_gemini toneMint
class node_seo toneRose
class node_visitor,node_backend,node_robotasset toneIndigo
```

## Components

### App shell

- [React app shell](https://github.com/whisperedshadow/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Header navigation](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/header/header.jsx): `src/Components/header/header.jsx`
- [Route selector](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/Routes/Routings.jsx): `src/Components/Routes/Routings.jsx`

### Portfolio pages

- [Home / 3D hero](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Home/Home.jsx): `src/Components/pages/Home/Home.jsx`
- [About profile](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/About/About.jsx): `src/Components/pages/About/About.jsx`
- [Education history](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Education/Education.jsx): `src/Components/pages/Education/Education.jsx`
- [Skills catalogue](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Skills/Skills.jsx): `src/Components/pages/Skills/Skills.jsx`
- [Skill cards](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Skills/skill/skill.jsx): `src/Components/pages/Skills/skill/skill.jsx`
- [Projects showcase](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Projects/Projects.jsx): `src/Components/pages/Projects/Projects.jsx`
- [Project detail](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/Projects/project/Project.jsx): `src/Components/pages/Projects/project/Project.jsx`

### Visitor interaction

- [Contact form](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/pages/contact/Contact.jsx): `src/Components/pages/contact/Contact.jsx`
- [Chat assistant](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/ChatBot.jsx): `src/Components/ChatBot.jsx`

### Page metadata

- [SEO metadata](https://github.com/whisperedshadow/portfolio/blob/main/src/Components/SEO/SEO.jsx): `src/Components/SEO/SEO.jsx`

### Other components

- **Visitor**
- **Browser**
- **Email backend**
- **Gemini API**
- [Robot model](https://github.com/whisperedshadow/portfolio/blob/main/public/robot.glb): `public/robot.glb`

## Connections

- Visitor → Browser: opens portfolio
- Browser → React app shell: renders
- React app shell → Header navigation: renders
- React app shell → Route selector: renders
- Visitor → Header navigation: chooses page
- Header navigation → Route selector: navigates
- Route selector → Home / 3D hero: selects route
- Route selector → About profile: selects route
- Route selector → Education history: selects route
- Route selector → Skills catalogue: selects route
- Route selector → Projects showcase: selects route
- Route selector → Contact form: selects route
- Skills catalogue → Skill cards: renders cards
- Projects showcase → Project detail: renders projects
- Home / 3D hero → Robot model: loads model
- Visitor → Contact form: submits inquiry
- Contact form → Email backend: POSTs email data
- Visitor → Chat assistant: sends message
- Chat assistant → Gemini API: requests reply
- About profile → SEO metadata: sets metadata
- Education history → SEO metadata: sets metadata
- Skills catalogue → SEO metadata: sets metadata
- Projects showcase → SEO metadata: sets metadata
- Contact form → SEO metadata: sets metadata