# sushmitadasari/portfolio-advanced architecture

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

- Interactive diagram: https://gitdiagram.com/sushmitadasari/portfolio-advanced
- Repository: https://github.com/sushmitadasari/portfolio-advanced

## Overview

This is a React portfolio website: a visitor opens the page, React mounts the application, and the page presents an introduction, biography and career timeline, skills, projects, and contact options. The app also provides navigation, visual effects, and a footer. Portfolio content is centralized in a data module and read by the relevant sections. The contact excerpt does not establish a submission service, so none is shown. SEO, accessibility, responsiveness, and lazy loading are documented capabilities; their detailed implementation is not fully represented in the sampled source.

Main entry points: [`src/App.jsx`](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/App.jsx) (Page composition), [`src/data/portfolioData.js`](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/data/portfolioData.js) (Portfolio data), [`src/main.jsx`](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/main.jsx) (React entry), [`src/components/Hero.jsx`](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Hero.jsx) (Introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Page composition<br/>[App.jsx]"]
end

subgraph group_sections["Portfolio sections"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_background["Animated backdrop"]
  node_about["Biography timeline<br/>[About.jsx]"]
  node_skills["Skills display<br/>[Skills.jsx]"]
  node_projects["Project showcase<br/>[Projects.jsx]"]
  node_contact["Contact options<br/>[Contact.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_scrolltop["Scroll to top<br/>[ScrollToTop.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_data["Portfolio data<br/>[portfolioData.js]"]
end

subgraph group_style["Presentation"]
  node_styles["Global styles<br/>[index.css]"]
end

node_visitor(("Site visitor"))
node_external(("Linked sites"))

node_visitor -->|"opens page"| node_entry
node_entry -->|"renders"| node_app
node_entry -->|"loads styles"| node_styles
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_background
node_app -->|"renders lazily"| node_about
node_app -->|"renders lazily"| node_skills
node_app -->|"renders lazily"| node_projects
node_app -->|"renders lazily"| node_contact
node_app -->|"renders lazily"| node_footer
node_app -->|"renders"| node_scrolltop
node_navbar -->|"reads links and profile"| node_data
node_hero -->|"reads profile"| node_data
node_about -->|"reads biography and timeline"| node_data
node_skills -->|"reads skills"| node_data
node_projects -->|"reads project entries"| node_data
node_contact -->|"reads contact details"| node_data
node_hero -.->|"opens profile links"| node_external
node_projects -.->|"opens project links"| node_external
node_contact -.->|"opens contact links"| node_external

click node_entry "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/main.jsx"
click node_app "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/App.jsx"
click node_navbar "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Hero.jsx"
click node_background "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/AnimatedBackground.jsx"
click node_about "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/About.jsx"
click node_skills "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Skills.jsx"
click node_projects "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Projects.jsx"
click node_contact "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Footer.jsx"
click node_scrolltop "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/ScrollToTop.jsx"
click node_data "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/data/portfolioData.js"
click node_styles "https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/index.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_entry,node_app toneBlue
class node_navbar,node_hero,node_background,node_about,node_skills,node_projects,node_contact,node_footer,node_scrolltop toneAmber
class node_data toneMint
class node_styles toneRose
class node_visitor,node_external toneIndigo
```

## Components

### App runtime

- [React entry](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio sections

- [Navigation](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Introduction](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Animated backdrop](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/AnimatedBackground.jsx): `src/components/AnimatedBackground.jsx`
- [Biography timeline](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Skills display](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Project showcase](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Contact options](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Footer](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Scroll to top](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/components/ScrollToTop.jsx): `src/components/ScrollToTop.jsx`

### Portfolio content

- [Portfolio data](https://github.com/sushmitadasari/portfolio-advanced/blob/main/src/data/portfolioData.js): `src/data/portfolioData.js`

### Presentation

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

### Other components

- **Site visitor**
- **Linked sites**

## Connections

- Site visitor → React entry: opens page
- React entry → Page composition: renders
- React entry → Global styles: loads styles
- Page composition → Navigation: renders
- Page composition → Introduction: renders
- Page composition → Animated backdrop: renders
- Page composition → Biography timeline: renders lazily
- Page composition → Skills display: renders lazily
- Page composition → Project showcase: renders lazily
- Page composition → Contact options: renders lazily
- Page composition → Footer: renders lazily
- Page composition → Scroll to top: renders
- Navigation → Portfolio data: reads links and profile
- Introduction → Portfolio data: reads profile
- Biography timeline → Portfolio data: reads biography and timeline
- Skills display → Portfolio data: reads skills
- Project showcase → Portfolio data: reads project entries
- Contact options → Portfolio data: reads contact details
- Introduction → Linked sites: opens profile links
- Project showcase → Linked sites: opens project links
- Contact options → Linked sites: opens contact links