# anushadhikari/my-portfolio architecture

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

## Overview

This repository is a single-page personal portfolio. Visitors browse a hero and profile, then review skills, work history, projects, education and certifications, and contact links. The React entry renders App, which composes the page sections and owns dark-theme state and scroll-reveal behavior; Navbar controls the theme and section navigation. The README documents these portfolio capabilities. The sampled source shows component composition and the About-to-flag dependency; other section details are represented by their source-indexed modules, without inferring unshown internal calls.

Main entry points: [`src/App.jsx`](https://github.com/anushadhikari/my-portfolio/blob/main/src/App.jsx) (App shell), [`src/components/Navbar.jsx`](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Navbar.jsx) (Navigation and theme), [`src/components/Home.jsx`](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Home.jsx) (Hero profile), [`src/main.jsx`](https://github.com/anushadhikari/my-portfolio/blob/main/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Page shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_shell["App shell<br/>[App.jsx]"]
  node_nav["Navigation and theme<br/>[Navbar.jsx]"]
end

subgraph group_profile["Profile content"]
  node_hero["Hero profile<br/>[Home.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_flag["Nepal flag icon<br/>[FlagNepal.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_profile_asset["Profile image"]
end

subgraph group_career["Career record"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_education["Education<br/>[Education.jsx]"]
end

subgraph group_engage["Visitor links"]
  node_contact["Contact details<br/>[Contact.jsx]"]
  node_resume["Resume document<br/>[resume.pdf]"]
end

node_visitor(("Portfolio visitor"))
node_social["Social and email services"]
node_credentials["Credential hosting"]

node_visitor -->|"opens"| node_entry
node_entry -->|"renders"| node_shell
node_shell -->|"renders"| node_nav
node_shell -->|"renders"| node_hero
node_shell -->|"renders"| node_about
node_shell -->|"renders"| node_skills
node_shell -->|"renders"| node_experience
node_shell -->|"renders"| node_projects
node_shell -->|"renders"| node_education
node_shell -->|"renders"| node_contact
node_about -->|"renders"| node_flag
node_nav -->|"sets theme"| node_shell
node_hero -->|"loads image"| node_profile_asset
node_hero -->|"links resume"| node_resume
node_nav -->|"links resume"| node_resume
node_hero -->|"links out"| node_social
node_nav -->|"links out"| node_social
node_contact -->|"links out"| node_social
node_education -->|"links credentials"| node_credentials

click node_entry "https://github.com/anushadhikari/my-portfolio/blob/main/src/main.jsx"
click node_shell "https://github.com/anushadhikari/my-portfolio/blob/main/src/App.jsx"
click node_nav "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Home.jsx"
click node_about "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/About.jsx"
click node_flag "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/FlagNepal.jsx"
click node_skills "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Skills.jsx"
click node_experience "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Experience.jsx"
click node_projects "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Projects.jsx"
click node_education "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Education.jsx"
click node_contact "https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Contact.jsx"
click node_resume "https://github.com/anushadhikari/my-portfolio/blob/main/public/resume.pdf"
click node_profile_asset "https://github.com/anushadhikari/my-portfolio/tree/main/src/profile"

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_entry,node_shell,node_nav toneBlue
class node_hero,node_about,node_flag,node_skills,node_profile_asset toneAmber
class node_experience,node_projects,node_education toneMint
class node_contact,node_resume toneRose
class node_visitor,node_social,node_credentials toneIndigo
```

## Components

### Page shell

- [React entry](https://github.com/anushadhikari/my-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/anushadhikari/my-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation and theme](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Profile content

- [Hero profile](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Home.jsx): `src/components/Home.jsx`
- [About profile](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Nepal flag icon](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/FlagNepal.jsx): `src/components/FlagNepal.jsx`
- [Skills](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Profile image](https://github.com/anushadhikari/my-portfolio/tree/main/src/profile): `src/profile`

### Career record

- [Experience](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Projects](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Education](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Education.jsx): `src/components/Education.jsx`

### Visitor links

- [Contact details](https://github.com/anushadhikari/my-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Resume document](https://github.com/anushadhikari/my-portfolio/blob/main/public/resume.pdf): `public/resume.pdf`

### Other components

- **Portfolio visitor**
- **Social and email services**
- **Credential hosting**

## Connections

- Portfolio visitor → React entry: opens (evidence: `README.md`)
- React entry → App shell: renders (evidence: `src/main.jsx`)
- App shell → Navigation and theme: renders (evidence: `src/App.jsx`)
- App shell → Hero profile: renders (evidence: `src/App.jsx`)
- App shell → About profile: renders (evidence: `src/App.jsx`)
- App shell → Skills: renders (evidence: `src/App.jsx`)
- App shell → Experience: renders (evidence: `src/App.jsx`)
- App shell → Projects: renders (evidence: `src/App.jsx`)
- App shell → Education: renders (evidence: `src/App.jsx`)
- App shell → Contact details: renders (evidence: `src/App.jsx`)
- About profile → Nepal flag icon: renders (evidence: `src/components/About.jsx`)
- Navigation and theme → App shell: sets theme (evidence: `src/App.jsx`)
- Hero profile → Profile image: loads image (evidence: `src/components/Home.jsx`)
- Hero profile → Resume document: links resume (evidence: `src/components/Home.jsx`)
- Navigation and theme → Resume document: links resume (evidence: `src/components/Navbar.jsx`)
- Hero profile → Social and email services: links out (evidence: `src/components/Home.jsx`)
- Navigation and theme → Social and email services: links out (evidence: `src/components/Navbar.jsx`)
- Contact details → Social and email services: links out (evidence: `src/components/Contact.jsx`)
- Education → Credential hosting: links credentials (evidence: `src/components/Education.jsx`)