# rssaravana9786/my-portfolio-site architecture

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

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

## Overview

#### Purpose and Runtime
This is a static personal portfolio single-page application built with React and Vite. It runs in the browser; Vite provides local development, HMR, and production bundling. The deployable static output is present in `dist/index.html` and `dist/assets/index-BXTfmLfk.js`.

#### Application Entry and Mounting
`index.html` is the Vite HTML entry document. `src/main.jsx` initializes React and mounts the application into the page DOM. Global baseline styling is loaded from `src/index.css`.

#### Application Composition
`src/App.jsx` is the top-level UI composition point, while `src/Portfolio.jsx` appears to organize the portfolio-specific page structure. These form the primary control boundary between runtime bootstrapping and page content/layout.

#### Theme and Shared Presentation
`src/theme.jsx` centralizes theme-related values or providers for consistent visual presentation. App-level styles reside in `src/App.css`; global styles remain in `src/index.css`. This separates shared visual tokens/layout from individual section components.

#### Portfolio Page Stages
The page is composed from independently maintained content sections:
- Landing/intro: `src/components/HeroSection.jsx`
- Biography or profile content: `src/components/AboutSection.jsx`
- Work showcase: `src/components/ProjectsSection.jsx`
- Recognition/history: `src/components/AcheivementsSection.jsx`
- Contact endpoint: `src/components/ContactSection.jsx`

These sections are likely rendered sequentially within the portfolio page and navigated through the shared header.

#### Navigation and Cross-Section Flow
`src/components/NavBar.jsx` provides the site-level navigation boundary, likely directing users to portfolio sections. User flow is primarily in-page: navigation → section anchors/content → project details, resume download, or contact actions. There is no evidence of backend routes, APIs, persistence, or server-side application logic.

#### Reusable Content Units and Static Delivery
`src/components/ProjectCard.jsx` represents an individual portfolio project within `ProjectsSection`, enabling repeated project presentation without coupling project markup to page layout. `src/components/ResumeDownload.jsx` isolates resume-download behavior from the surrounding page. Static assets are expected under `src/assets` for bundled imports and `public` for directly served files. Production delivery is fully static through the Vite-generated `dist` directory.

Main entry points: [`src/Portfolio.jsx`](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/Portfolio.jsx) (Portfolio page), [`src/App.jsx`](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/App.jsx) (App), [`src/components/NavBar.jsx`](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/NavBar.jsx) (Navigation), [`src/main.jsx`](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/main.jsx) (React mount)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_source["React source"]
  node_main["React mount<br/>browser bootstrap<br/>[main.jsx]"]
  node_app["App<br/>top-level composition<br/>[App.jsx]"]
  node_portfolio["Portfolio page<br/>page layout<br/>[Portfolio.jsx]"]
  node_theme["Theme<br/>presentation provider<br/>[theme.jsx]"]
  node_app_css["App styles<br/>component styles<br/>[App.css]"]
  node_global_css["Global styles<br/>baseline styles<br/>[index.css]"]
  node_navbar["Navigation<br/>[NavBar.jsx]"]
  node_resume["Resume download<br/>download action<br/>[ResumeDownload.jsx]"]
end

subgraph group_sections["Portfolio sections"]
  node_hero["Hero<br/>landing section<br/>[HeroSection.jsx]"]
  node_about["About<br/>profile section<br/>[AboutSection.jsx]"]
  node_projects["Projects<br/>showcase section"]
  node_project_card["Project card<br/>reusable project unit<br/>[ProjectCard.jsx]"]
  node_achievements["Achievements<br/>history section"]
  node_contact["Contact<br/>[ContactSection.jsx]"]
end

subgraph group_delivery["Static delivery"]
  node_dist_html["Production HTML<br/>static output<br/>[index.html]"]
  node_dist_js["Production bundle<br/>static JavaScript<br/>[index-BXTfmLfk.js]"]
end

node_html_entry["HTML entry<br/>Vite entry<br/>[index.html]"]
node_vite{{"Vite<br/>dev server &amp; bundler"}}
node_assets["Static assets<br/>bundled and public files"]

node_html_entry -->|"loads"| node_main
node_vite -->|"serves/builds"| node_html_entry
node_main -->|"mounts"| node_app
node_main -->|"loads"| node_global_css
node_app -->|"composes"| node_portfolio
node_app -->|"uses"| node_theme
node_app -->|"uses"| node_app_css
node_portfolio -->|"renders"| node_navbar
node_portfolio -->|"renders"| node_hero
node_portfolio -->|"renders"| node_about
node_portfolio -->|"renders"| node_projects
node_portfolio -->|"renders"| node_achievements
node_portfolio -->|"renders"| node_contact
node_projects -->|"repeats"| node_project_card
node_hero -.->|"offers"| node_resume
node_navbar -.->|"navigates to"| node_hero
node_navbar -.->|"navigates to"| node_projects
node_navbar -.->|"navigates to"| node_contact
node_vite -->|"emits"| node_dist_html
node_vite -->|"bundles"| node_dist_js
node_assets -.->|"included in"| node_dist_js
node_dist_html -->|"loads"| node_dist_js

click node_html_entry "https://github.com/rssaravana9786/my-portfolio-site/blob/main/index.html"
click node_main "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/main.jsx"
click node_app "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/App.jsx"
click node_portfolio "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/Portfolio.jsx"
click node_theme "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/theme.jsx"
click node_app_css "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/App.css"
click node_global_css "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/index.css"
click node_navbar "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/NavBar.jsx"
click node_hero "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/HeroSection.jsx"
click node_about "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/AboutSection.jsx"
click node_projects "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ProjectsSection.jsx"
click node_project_card "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ProjectCard.jsx"
click node_achievements "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/AcheivementsSection.jsx"
click node_contact "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ContactSection.jsx"
click node_resume "https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ResumeDownload.jsx"
click node_dist_html "https://github.com/rssaravana9786/my-portfolio-site/blob/main/dist/index.html"
click node_dist_js "https://github.com/rssaravana9786/my-portfolio-site/blob/main/dist/assets/index-BXTfmLfk.js"

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_main,node_app,node_portfolio,node_theme,node_app_css,node_global_css,node_navbar,node_resume toneBlue
class node_hero,node_about,node_projects,node_project_card,node_achievements,node_contact toneAmber
class node_dist_html,node_dist_js toneMint
class node_html_entry,node_vite,node_assets toneNeutral
```

## Components

### React source

Browser application source and page composition.

- [React mount](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/main.jsx): browser bootstrap · `src/main.jsx`
- [App](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/App.jsx): top-level composition · `src/App.jsx`
- [Portfolio page](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/Portfolio.jsx): page layout · `src/Portfolio.jsx`
- [Theme](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/theme.jsx): presentation provider · `src/theme.jsx`
- [App styles](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/App.css): component styles · `src/App.css`
- [Global styles](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/index.css): baseline styles · `src/index.css`
- [Navigation](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/NavBar.jsx): section navigation · Directs users through in-page portfolio content. · `src/components/NavBar.jsx`
- [Resume download](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ResumeDownload.jsx): download action · `src/components/ResumeDownload.jsx`

### Portfolio sections

Sequential in-page content areas.

- [Hero](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/HeroSection.jsx): landing section · `src/components/HeroSection.jsx`
- [About](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/AboutSection.jsx): profile section · `src/components/AboutSection.jsx`
- [Projects](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ProjectsSection.jsx): showcase section · `src/components/ProjectsSection.jsx`
- [Project card](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ProjectCard.jsx): reusable project unit · `src/components/ProjectCard.jsx`
- [Achievements](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/AcheivementsSection.jsx): history section · `src/components/AcheivementsSection.jsx`
- [Contact](https://github.com/rssaravana9786/my-portfolio-site/blob/main/src/components/ContactSection.jsx): contact section · `src/components/ContactSection.jsx`

### Static delivery

Vite-built production output.

- [Production HTML](https://github.com/rssaravana9786/my-portfolio-site/blob/main/dist/index.html): static output · `dist/index.html`
- [Production bundle](https://github.com/rssaravana9786/my-portfolio-site/blob/main/dist/assets/index-BXTfmLfk.js): static JavaScript · `dist/assets/index-BXTfmLfk.js`

### Other components

- [HTML entry](https://github.com/rssaravana9786/my-portfolio-site/blob/main/index.html): Vite entry · `index.html`
- **Vite**: dev server & bundler · Provides development HMR and production bundling.
- **Static assets**: bundled and public files · Bundled imports live under src/assets; directly served files live under public.

## Connections

- HTML entry → React mount: loads
- Vite → HTML entry: serves/builds
- React mount → App: mounts
- React mount → Global styles: loads
- App → Portfolio page: composes
- App → Theme: uses
- App → App styles: uses
- Portfolio page → Navigation: renders
- Portfolio page → Hero: renders
- Portfolio page → About: renders
- Portfolio page → Projects: renders
- Portfolio page → Achievements: renders
- Portfolio page → Contact: renders
- Projects → Project card: repeats
- Hero → Resume download: offers
- Navigation → Hero: navigates to
- Navigation → Projects: navigates to
- Navigation → Contact: navigates to
- Vite → Production HTML: emits
- Vite → Production bundle: bundles
- Static assets → Production bundle: included in
- Production HTML → Production bundle: loads