# codebustler/my-portfolio architecture

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

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

## Overview

This is a React portfolio site presenting the developer’s profile, work history, skills, testimonials, contact options, and project demos. A visitor enters through the browser router, which selects the home, about, project-catalog, or fallback page; the home page assembles portfolio sections, while the catalog organizes freelance, side, and mini projects into video-backed previews. The entry point supplies preview media through React context. The excerpts establish the main routing and home composition; wiring inside several unsampled components is not inferred.

Main entry points: [`src/App.jsx`](https://github.com/codebustler/my-portfolio/blob/main/src/App.jsx) (Home page), [`src/router/routes.jsx`](https://github.com/codebustler/my-portfolio/blob/main/src/router/routes.jsx) (Route table), [`src/router/RootLayout.jsx`](https://github.com/codebustler/my-portfolio/blob/main/src/router/RootLayout.jsx) (Root layout), [`src/assets/project_previews`](https://github.com/codebustler/my-portfolio/tree/main/src/assets/project_previews) (Preview media)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navigation and pages"]
  node_entry["React entry<br/>[main.jsx]"]
  node_routes["Route table<br/>[routes.jsx]"]
  node_layout["Root layout<br/>[RootLayout.jsx]"]
  node_notfound["Fallback page<br/>[NoPage.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_top["Back to top<br/>[TapToTop.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_app["Home page<br/>[App.jsx]"]
  node_about["About page<br/>[AboutMe.jsx]"]
  node_hero["Hero section<br/>[HeroSection.jsx]"]
  node_pastwork["Work history<br/>[PastWork.jsx]"]
  node_skills["Skills section<br/>[Skills.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
  node_hire["Hire section<br/>[HireMe.jsx]"]
end

subgraph group_projects["Project showcase"]
  node_allprojects["Project catalog<br/>[AllProjects.jsx]"]
  node_projectssection["Featured projects<br/>[Projects.jsx]"]
  node_freelance["Freelance projects"]
  node_side["Side projects<br/>[SideProjects.jsx]"]
  node_mini["Mini projects<br/>[MiniProjects.jsx]"]
  node_preview["Project preview<br/>[ProjectPreview.jsx]"]
  node_mobilepreview["Mobile preview"]
end

subgraph group_media["Shared media"]
  node_mediafiles["Preview media"]
  node_resume["Resume PDF"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"provides router"| node_routes
node_routes -->|"renders home layout"| node_layout
node_routes -->|"routes to about"| node_about
node_routes -->|"routes to catalog"| node_allprojects
node_routes -->|"routes unmatched paths"| node_notfound
node_layout -->|"outlet renders"| node_app
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_top
node_layout -->|"renders"| node_footer
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_projectssection
node_app -->|"renders"| node_pastwork
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_hire
node_entry -->|"provides preview assets"| node_mediafiles
node_pastwork -->|"reads preview media"| node_mediafiles
node_side -->|"reads preview media"| node_mediafiles
node_mini -->|"reads preview media"| node_mediafiles
node_freelance -->|"renders cards"| node_preview
node_side -->|"renders cards"| node_preview
node_mini -->|"renders desktop cards"| node_preview
node_mini -->|"renders mobile cards"| node_mobilepreview
node_about -.->|"links resume"| node_resume

click node_entry "https://github.com/codebustler/my-portfolio/blob/main/src/main.jsx"
click node_routes "https://github.com/codebustler/my-portfolio/blob/main/src/router/routes.jsx"
click node_layout "https://github.com/codebustler/my-portfolio/blob/main/src/router/RootLayout.jsx"
click node_app "https://github.com/codebustler/my-portfolio/blob/main/src/App.jsx"
click node_about "https://github.com/codebustler/my-portfolio/blob/main/src/components/AboutMe.jsx"
click node_allprojects "https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/AllProjects.jsx"
click node_notfound "https://github.com/codebustler/my-portfolio/blob/main/src/components/NoPage.jsx"
click node_hero "https://github.com/codebustler/my-portfolio/blob/main/src/components/HeroSection.jsx"
click node_projectssection "https://github.com/codebustler/my-portfolio/blob/main/src/components/Projects.jsx"
click node_pastwork "https://github.com/codebustler/my-portfolio/blob/main/src/components/PastWork.jsx"
click node_skills "https://github.com/codebustler/my-portfolio/blob/main/src/components/Skills.jsx"
click node_testimonials "https://github.com/codebustler/my-portfolio/blob/main/src/components/Testimonials.jsx"
click node_hire "https://github.com/codebustler/my-portfolio/blob/main/src/components/HireMe.jsx"
click node_footer "https://github.com/codebustler/my-portfolio/blob/main/src/components/Footer.jsx"
click node_navbar "https://github.com/codebustler/my-portfolio/blob/main/src/components/Navbar.jsx"
click node_top "https://github.com/codebustler/my-portfolio/blob/main/src/components/TapToTop.jsx"
click node_freelance "https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/FreelaceProjects.jsx"
click node_side "https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/SideProjects.jsx"
click node_mini "https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/MiniProjects.jsx"
click node_preview "https://github.com/codebustler/my-portfolio/blob/main/src/components/ProjectPreview.jsx"
click node_mobilepreview "https://github.com/codebustler/my-portfolio/blob/main/src/components/ProjectPreviewSM.jsx"
click node_mediafiles "https://github.com/codebustler/my-portfolio/tree/main/src/assets/project_previews"
click node_resume "https://github.com/codebustler/my-portfolio/blob/main/src/assets/MallikarjunResume.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_entry,node_routes,node_layout,node_notfound,node_footer,node_navbar,node_top toneBlue
class node_app,node_about,node_hero,node_pastwork,node_skills,node_testimonials,node_hire toneAmber
class node_allprojects,node_projectssection,node_freelance,node_side,node_mini,node_preview,node_mobilepreview toneMint
class node_mediafiles,node_resume toneRose
class node_visitor toneIndigo
```

## Components

### Navigation and pages

- [React entry](https://github.com/codebustler/my-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Route table](https://github.com/codebustler/my-portfolio/blob/main/src/router/routes.jsx): `src/router/routes.jsx`
- [Root layout](https://github.com/codebustler/my-portfolio/blob/main/src/router/RootLayout.jsx): `src/router/RootLayout.jsx`
- [Fallback page](https://github.com/codebustler/my-portfolio/blob/main/src/components/NoPage.jsx): `src/components/NoPage.jsx`
- [Footer](https://github.com/codebustler/my-portfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Navigation bar](https://github.com/codebustler/my-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Back to top](https://github.com/codebustler/my-portfolio/blob/main/src/components/TapToTop.jsx): `src/components/TapToTop.jsx`

### Portfolio content

- [Home page](https://github.com/codebustler/my-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [About page](https://github.com/codebustler/my-portfolio/blob/main/src/components/AboutMe.jsx): `src/components/AboutMe.jsx`
- [Hero section](https://github.com/codebustler/my-portfolio/blob/main/src/components/HeroSection.jsx): `src/components/HeroSection.jsx`
- [Work history](https://github.com/codebustler/my-portfolio/blob/main/src/components/PastWork.jsx): `src/components/PastWork.jsx`
- [Skills section](https://github.com/codebustler/my-portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Testimonials](https://github.com/codebustler/my-portfolio/blob/main/src/components/Testimonials.jsx): `src/components/Testimonials.jsx`
- [Hire section](https://github.com/codebustler/my-portfolio/blob/main/src/components/HireMe.jsx): `src/components/HireMe.jsx`

### Project showcase

- [Project catalog](https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/AllProjects.jsx): `src/components/AllProjects/AllProjects.jsx`
- [Featured projects](https://github.com/codebustler/my-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Freelance projects](https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/FreelaceProjects.jsx): `src/components/AllProjects/FreelaceProjects.jsx`
- [Side projects](https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/SideProjects.jsx): `src/components/AllProjects/SideProjects.jsx`
- [Mini projects](https://github.com/codebustler/my-portfolio/blob/main/src/components/AllProjects/MiniProjects.jsx): `src/components/AllProjects/MiniProjects.jsx`
- [Project preview](https://github.com/codebustler/my-portfolio/blob/main/src/components/ProjectPreview.jsx): `src/components/ProjectPreview.jsx`
- [Mobile preview](https://github.com/codebustler/my-portfolio/blob/main/src/components/ProjectPreviewSM.jsx): `src/components/ProjectPreviewSM.jsx`

### Shared media

- [Preview media](https://github.com/codebustler/my-portfolio/tree/main/src/assets/project_previews): `src/assets/project_previews`
- [Resume PDF](https://github.com/codebustler/my-portfolio/blob/main/src/assets/MallikarjunResume.pdf): `src/assets/MallikarjunResume.pdf`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site
- React entry → Route table: provides router
- Route table → Root layout: renders home layout
- Route table → About page: routes to about
- Route table → Project catalog: routes to catalog
- Route table → Fallback page: routes unmatched paths
- Root layout → Home page: outlet renders
- Root layout → Navigation bar: renders
- Root layout → Back to top: renders
- Root layout → Footer: renders
- Home page → Hero section: renders
- Home page → Featured projects: renders
- Home page → Work history: renders
- Home page → Skills section: renders
- Home page → Testimonials: renders
- Home page → Hire section: renders
- React entry → Preview media: provides preview assets
- Work history → Preview media: reads preview media
- Side projects → Preview media: reads preview media
- Mini projects → Preview media: reads preview media
- Freelance projects → Project preview: renders cards
- Side projects → Project preview: renders cards
- Mini projects → Project preview: renders desktop cards
- Mini projects → Mobile preview: renders mobile cards
- About page → Resume PDF: links resume