# dhanush-coder-s/dhanush-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/dhanush-coder-s/dhanush-portfolio
- Repository: https://github.com/dhanush-coder-s/dhanush-portfolio

## Overview

This repository implements a personal portfolio website: visitors browse profile, project, skills, education, and contact content. The visible runtime starts at React’s mount point, renders the app, and delegates page selection to a router; the app also provides a loading fallback. Sampled source confirms several sections render their corresponding data modules. The router and some components were not sampled, so their internal routing and composition are not asserted here.

Main entry points: [`src/App.jsx`](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/App.jsx) (App shell), [`src/main.jsx`](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/main.jsx) (React mount), [`src/components/Navbar.jsx`](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Navbar.jsx) (Navigation), [`src/components/MyDetails.jsx`](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/MyDetails.jsx) (Profile hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Application runtime"]
  node_mount["React mount<br/>[main.jsx]"]
  node_app["App shell<br/>[App.jsx]"]
  node_router["Page router<br/>[router.jsx]"]
end

subgraph group_portfolio["Portfolio sections"]
  node_loading["Loading fallback<br/>[Loading.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_profile["Profile hero<br/>[MyDetails.jsx]"]
  node_about["About section<br/>[About.jsx]"]
  node_projects["Projects section<br/>[Projects.jsx]"]
  node_skills["Skills section"]
  node_education["Education section<br/>[Education.jsx]"]
  node_contact["Contact section<br/>[Contact.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_scroll["Scroll control<br/>[ScrollToTop.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_navdata["Navigation items<br/>[navItems.js]"]
  node_aboutdata["About content<br/>[about.js]"]
  node_projectdata["Project records<br/>[projects.jsx]"]
  node_skillsdata["Skills catalog<br/>[Skills.jsx]"]
  node_educationdata["Education records"]
  node_resume["Resume PDF"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens site"| node_mount
node_mount -->|"renders"| node_app
node_app -->|"provides routes"| node_router
node_app -->|"uses fallback"| node_loading
node_navbar -->|"renders items"| node_navdata
node_about -->|"renders content"| node_aboutdata
node_projects -->|"renders projects"| node_projectdata
node_skills -->|"renders skills"| node_skillsdata
node_education -->|"renders records"| node_educationdata
node_profile -->|"links resume"| node_resume

click node_mount "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/App.jsx"
click node_router "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/routing/router.jsx"
click node_loading "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Loading.jsx"
click node_navbar "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Navbar.jsx"
click node_profile "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/MyDetails.jsx"
click node_about "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/About.jsx"
click node_projects "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Projects.jsx"
click node_skills "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/TechnicalSkills.jsx"
click node_education "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Education.jsx"
click node_contact "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Footer.jsx"
click node_scroll "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/ScrollToTop.jsx"
click node_navdata "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/navItems.js"
click node_aboutdata "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/about.js"
click node_projectdata "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/projects.jsx"
click node_skillsdata "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/Skills.jsx"
click node_educationdata "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/educationDetails.js"
click node_resume "https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/assets/pdf/Dhanush_S_Python_Full_Stack_Resume.pdf"

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_mount,node_app,node_router toneBlue
class node_loading,node_navbar,node_profile,node_about,node_projects,node_skills,node_education,node_contact,node_footer,node_scroll toneAmber
class node_navdata,node_aboutdata,node_projectdata,node_skillsdata,node_educationdata,node_resume toneMint
class node_visitor toneIndigo
```

## Components

### Application runtime

- [React mount](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Page router](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/routing/router.jsx): `src/routing/router.jsx`

### Portfolio sections

- [Loading fallback](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Loading.jsx): `src/components/Loading.jsx`
- [Navigation](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Profile hero](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/MyDetails.jsx): `src/components/MyDetails.jsx`
- [About section](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Projects section](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Skills section](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/TechnicalSkills.jsx): `src/components/TechnicalSkills.jsx`
- [Education section](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Education.jsx): `src/components/Education.jsx`
- [Contact section](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Footer](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Scroll control](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/components/ScrollToTop.jsx): `src/components/ScrollToTop.jsx`

### Portfolio content

- [Navigation items](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/navItems.js): `src/data/navItems.js`
- [About content](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/about.js): `src/data/about.js`
- [Project records](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/projects.jsx): `src/data/projects.jsx`
- [Skills catalog](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/Skills.jsx): `src/data/Skills.jsx`
- [Education records](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/data/educationDetails.js): `src/data/educationDetails.js`
- [Resume PDF](https://github.com/dhanush-coder-s/dhanush-portfolio/blob/main/src/assets/pdf/Dhanush_S_Python_Full_Stack_Resume.pdf): `src/assets/pdf/Dhanush_S_Python_Full_Stack_Resume.pdf`

### Other components

- **Visitor**

## Connections

- Visitor → React mount: opens site
- React mount → App shell: renders (evidence: `src/main.jsx`)
- App shell → Page router: provides routes (evidence: `src/App.jsx`)
- App shell → Loading fallback: uses fallback (evidence: `src/App.jsx`)
- Navigation → Navigation items: renders items (evidence: `src/components/Navbar.jsx`)
- About section → About content: renders content (evidence: `src/components/About.jsx`)
- Projects section → Project records: renders projects (evidence: `src/components/Projects.jsx`)
- Skills section → Skills catalog: renders skills (evidence: `src/components/TechnicalSkills.jsx`)
- Education section → Education records: renders records (evidence: `src/components/Education.jsx`)
- Profile hero → Resume PDF: links resume (evidence: `src/components/MyDetails.jsx`)