# prasanthrayudu313/portfolio architecture

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

## Overview

This repository is a React portfolio site, not a domain-processing service. Its visitor workflow is to explore the landing content and engineering work, open project details, review role-targeted resumes, and reach the contact section. The sampled source shows the app bootstrap, project-card/modal behavior, and resume rendering; other sections are preserved as visible portfolio capabilities. Unsampled details are not inferred, so the graph omits unsupported internal links.

Main entry points: [`src/App.jsx`](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx) (Portfolio app), [`src/main.jsx`](https://github.com/prasanthrayudu313/portfolio/blob/main/src/main.jsx) (React bootstrap), [`src/index.css`](https://github.com/prasanthrayudu313/portfolio/blob/main/src/index.css) (Global styles), [`src/App.css`](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.css) (App styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Site runtime"]
  node_bootstrap["React bootstrap<br/>[main.jsx]"]
  node_app["Portfolio app<br/>[App.jsx]"]
end

subgraph group_portfolio["Portfolio experience"]
  node_hero["Landing section<br/>[App.jsx]"]
  node_skills["Skills overview<br/>[App.jsx]"]
  node_projects["Project showcase<br/>[App.jsx]"]
  node_project_modal["Project details<br/>[App.jsx]"]
  node_resumes["Resume options<br/>[App.jsx]"]
  node_contact["Contact section<br/>[App.jsx]"]
end

subgraph group_presentation["Presentation"]
  node_global_styles["Global styles<br/>[index.css]"]
  node_app_styles["App styles<br/>[App.css]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_bootstrap
node_bootstrap -->|"renders"| node_app
node_bootstrap -->|"loads styles"| node_global_styles
node_app -->|"renders"| node_hero
node_app -.->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"opens details"| node_project_modal
node_app -->|"renders"| node_resumes
node_app -->|"renders"| node_contact
node_app -->|"imports styles"| node_app_styles

click node_bootstrap "https://github.com/prasanthrayudu313/portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_hero "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_skills "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_projects "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_project_modal "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_resumes "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_contact "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx"
click node_global_styles "https://github.com/prasanthrayudu313/portfolio/blob/main/src/index.css"
click node_app_styles "https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.css"

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_bootstrap,node_app toneBlue
class node_hero,node_skills,node_projects,node_project_modal,node_resumes,node_contact toneAmber
class node_global_styles,node_app_styles toneMint
class node_visitor toneIndigo
```

## Components

### Site runtime

- [React bootstrap](https://github.com/prasanthrayudu313/portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Portfolio app](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio experience

- [Landing section](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Skills overview](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Project showcase](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Project details](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Resume options](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Contact section](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.jsx): `src/App.jsx`

### Presentation

- [Global styles](https://github.com/prasanthrayudu313/portfolio/blob/main/src/index.css): `src/index.css`
- [App styles](https://github.com/prasanthrayudu313/portfolio/blob/main/src/App.css): `src/App.css`

### Other components

- **Site visitor**

## Connections

- Site visitor → React bootstrap: opens site
- React bootstrap → Portfolio app: renders (evidence: `src/main.jsx`)
- React bootstrap → Global styles: loads styles (evidence: `src/main.jsx`)
- Portfolio app → Landing section: renders (evidence: `src/App.jsx`)
- Portfolio app → Skills overview: renders (evidence: `src/App.jsx`)
- Portfolio app → Project showcase: renders (evidence: `src/App.jsx`)
- Portfolio app → Project details: opens details (evidence: `src/App.jsx`)
- Portfolio app → Resume options: renders (evidence: `src/App.jsx`)
- Portfolio app → Contact section: renders (evidence: `src/App.jsx`)
- Portfolio app → App styles: imports styles (evidence: `src/App.jsx`)