# yashwanthnn/portfolio architecture

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

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

## Overview

This is a React portfolio site presenting its owner’s profile, skills, experience, selected projects, and contact links/form. The browser mounts the page composition, whose sections render shared content data; scrolling navigation, reveal-on-intersection behavior, and an ambient canvas background support the browsing experience. The contact form currently prevents submission and has no evidenced delivery integration. Relationships below are based on supplied source excerpts and the source index; styling files and unsampled entry/bootstrap details are not expanded.

Main entry points: [`src/App.jsx`](https://github.com/yashwanthnn/portfolio/blob/main/src/App.jsx) (Page composition), [`src/data/content.js`](https://github.com/yashwanthnn/portfolio/blob/main/src/data/content.js) (Portfolio content), [`src/hooks/useIntersectionObserver.js`](https://github.com/yashwanthnn/portfolio/blob/main/src/hooks/useIntersectionObserver.js) (Reveal observer), [`src/components/About.jsx`](https://github.com/yashwanthnn/portfolio/blob/main/src/components/About.jsx) (About profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Page Composition"]
  node_app["Page composition<br/>[App.jsx]"]
  node_ambient["Ambient canvas"]
end

subgraph group_portfolio["Portfolio Sections"]
  node_hero["Hero introduction<br/>[Hero.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_skills["Skills catalog<br/>[Skills.jsx]"]
  node_experience["Work timeline<br/>[Experience.jsx]"]
  node_projects["Project showcase<br/>[Projects.jsx]"]
  node_contact["Contact section<br/>[Contact.jsx]"]
  node_navbar["Section navigation<br/>[Navbar.jsx]"]
  node_footer["Footer links<br/>[Footer.jsx]"]
end

subgraph group_shared["Shared Content"]
  node_content["Portfolio content<br/>[content.js]"]
end

subgraph group_behavior["UI Behavior"]
  node_observer["Reveal observer"]
end

node_visitor(("Site visitor"))
node_main["React mount<br/>[main.jsx]"]

node_visitor -->|"opens site"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_ambient
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_hero -->|"reads profile"| node_content
node_navbar -->|"reads navigation"| node_content
node_about -->|"reads biography"| node_content
node_about -->|"tracks visibility"| node_observer
node_skills -->|"reads skills"| node_content
node_skills -->|"tracks visibility"| node_observer
node_experience -->|"reads history"| node_content
node_experience -->|"tracks visibility"| node_observer
node_projects -->|"reads projects"| node_content
node_projects -->|"tracks visibility"| node_observer
node_contact -->|"reads contact data"| node_content
node_contact -->|"tracks visibility"| node_observer
node_footer -->|"reads links"| node_content

click node_main "https://github.com/yashwanthnn/portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/yashwanthnn/portfolio/blob/main/src/App.jsx"
click node_hero "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/yashwanthnn/portfolio/blob/main/src/components/About.jsx"
click node_skills "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Skills.jsx"
click node_experience "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Experience.jsx"
click node_projects "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Projects.jsx"
click node_contact "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Contact.jsx"
click node_navbar "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/yashwanthnn/portfolio/blob/main/src/components/Footer.jsx"
click node_ambient "https://github.com/yashwanthnn/portfolio/blob/main/src/components/ParticleBackground.jsx"
click node_content "https://github.com/yashwanthnn/portfolio/blob/main/src/data/content.js"
click node_observer "https://github.com/yashwanthnn/portfolio/blob/main/src/hooks/useIntersectionObserver.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_app,node_ambient toneBlue
class node_hero,node_about,node_skills,node_experience,node_projects,node_contact,node_navbar,node_footer toneAmber
class node_content toneMint
class node_observer toneRose
class node_visitor toneIndigo
class node_main toneTeal
```

## Components

### Page Composition

- [Page composition](https://github.com/yashwanthnn/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Ambient canvas](https://github.com/yashwanthnn/portfolio/blob/main/src/components/ParticleBackground.jsx): `src/components/ParticleBackground.jsx`

### Portfolio Sections

- [Hero introduction](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About profile](https://github.com/yashwanthnn/portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Skills catalog](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Work timeline](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Project showcase](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Contact section](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Section navigation](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer links](https://github.com/yashwanthnn/portfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Shared Content

- [Portfolio content](https://github.com/yashwanthnn/portfolio/blob/main/src/data/content.js): `src/data/content.js`

### UI Behavior

- [Reveal observer](https://github.com/yashwanthnn/portfolio/blob/main/src/hooks/useIntersectionObserver.js): `src/hooks/useIntersectionObserver.js`

### Other components

- **Site visitor**
- [React mount](https://github.com/yashwanthnn/portfolio/blob/main/src/main.jsx): `src/main.jsx`

## Connections

- Site visitor → React mount: opens site
- React mount → Page composition: mounts (evidence: `src/main.jsx`)
- Page composition → Ambient canvas: renders (evidence: `src/App.jsx`)
- Page composition → Section navigation: renders (evidence: `src/App.jsx`)
- Page composition → Hero introduction: renders (evidence: `src/App.jsx`)
- Page composition → About profile: renders (evidence: `src/App.jsx`)
- Page composition → Skills catalog: renders (evidence: `src/App.jsx`)
- Page composition → Work timeline: renders (evidence: `src/App.jsx`)
- Page composition → Project showcase: renders (evidence: `src/App.jsx`)
- Page composition → Contact section: renders (evidence: `src/App.jsx`)
- Page composition → Footer links: renders (evidence: `src/App.jsx`)
- Hero introduction → Portfolio content: reads profile (evidence: `src/components/Hero.jsx`)
- Section navigation → Portfolio content: reads navigation (evidence: `src/components/Navbar.jsx`)
- About profile → Portfolio content: reads biography (evidence: `src/components/About.jsx`)
- About profile → Reveal observer: tracks visibility (evidence: `src/components/About.jsx`)
- Skills catalog → Portfolio content: reads skills (evidence: `src/components/Skills.jsx`)
- Skills catalog → Reveal observer: tracks visibility (evidence: `src/components/Skills.jsx`)
- Work timeline → Portfolio content: reads history (evidence: `src/components/Experience.jsx`)
- Work timeline → Reveal observer: tracks visibility (evidence: `src/components/Experience.jsx`)
- Project showcase → Portfolio content: reads projects (evidence: `src/components/Projects.jsx`)
- Project showcase → Reveal observer: tracks visibility (evidence: `src/components/Projects.jsx`)
- Contact section → Portfolio content: reads contact data (evidence: `src/components/Contact.jsx`)
- Contact section → Reveal observer: tracks visibility (evidence: `src/components/Contact.jsx`)
- Footer links → Portfolio content: reads links (evidence: `src/components/Footer.jsx`)