# sanajitjana/react-portfolio architecture

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

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

## Overview

This repository is a React personal-portfolio site. A visitor enters the SPA, whose application component renders shared navigation and footer around route-selected pages; route changes are handled by the scroll helper. The landing page presents the portfolio’s projects, skills, experience, services, and contact capability, while separate routes provide React-hooks, UI/UX, and Laravel-form tutorial content. The README documents the portfolio capabilities; sampled code confirms the route structure and shared shell. The contact implementation is within the landing page, but its details were not sampled.

Main entry points: [`src/App.js`](https://github.com/sanajitjana/react-portfolio/blob/main/src/App.js) (App routes), [`src/index.js`](https://github.com/sanajitjana/react-portfolio/blob/main/src/index.js) (React entry), [`src/Pages/Home.js`](https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/Home.js) (Portfolio landing), [`src/Pages/ReactHooks.js`](https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/ReactHooks.js) (Hooks article)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_mount["React entry<br/>[index.js]"]
  node_app_routes["App routes<br/>[App.js]"]
  node_speed_insights["Speed Insights<br/>[App.js]"]
end

subgraph group_portfolio["Portfolio content"]
  node_landing["Portfolio landing<br/>[Home.js]"]
end

subgraph group_articles["Tutorial pages"]
  node_hooks_article["Hooks article<br/>[ReactHooks.js]"]
  node_ux_article["UI/UX article<br/>[UiUx.js]"]
  node_form_article["Laravel form article<br/>[FormExample.js]"]
end

subgraph group_shared["Shared interface"]
  node_header["Navigation<br/>[Header.js]"]
  node_footer["Footer links<br/>[Footer.js]"]
  node_scroll["Scroll reset<br/>[ScrollToTop.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_mount
node_mount -->|"mounts"| node_app_routes
node_app_routes -->|"renders"| node_header
node_app_routes -->|"renders"| node_footer
node_app_routes -->|"wraps routes"| node_scroll
node_app_routes -->|"routes to"| node_landing
node_app_routes -->|"routes to"| node_hooks_article
node_app_routes -->|"routes to"| node_ux_article
node_app_routes -->|"routes to"| node_form_article
node_app_routes -->|"renders"| node_speed_insights

click node_mount "https://github.com/sanajitjana/react-portfolio/blob/main/src/index.js"
click node_app_routes "https://github.com/sanajitjana/react-portfolio/blob/main/src/App.js"
click node_landing "https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/Home.js"
click node_hooks_article "https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/ReactHooks.js"
click node_ux_article "https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/UiUx.js"
click node_form_article "https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/FormExample.js"
click node_header "https://github.com/sanajitjana/react-portfolio/blob/main/src/component/Header.js"
click node_footer "https://github.com/sanajitjana/react-portfolio/blob/main/src/component/Footer.js"
click node_scroll "https://github.com/sanajitjana/react-portfolio/blob/main/src/component/ScrollToTop.js"
click node_speed_insights "https://github.com/sanajitjana/react-portfolio/blob/main/src/App.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_mount,node_app_routes,node_speed_insights toneBlue
class node_landing toneAmber
class node_hooks_article,node_ux_article,node_form_article toneMint
class node_header,node_footer,node_scroll toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/sanajitjana/react-portfolio/blob/main/src/index.js): `src/index.js`
- [App routes](https://github.com/sanajitjana/react-portfolio/blob/main/src/App.js): `src/App.js`
- [Speed Insights](https://github.com/sanajitjana/react-portfolio/blob/main/src/App.js): `src/App.js`

### Portfolio content

- [Portfolio landing](https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/Home.js): `src/Pages/Home.js`

### Tutorial pages

- [Hooks article](https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/ReactHooks.js): `src/Pages/ReactHooks.js`
- [UI/UX article](https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/UiUx.js): `src/Pages/UiUx.js`
- [Laravel form article](https://github.com/sanajitjana/react-portfolio/blob/main/src/Pages/FormExample.js): `src/Pages/FormExample.js`

### Shared interface

- [Navigation](https://github.com/sanajitjana/react-portfolio/blob/main/src/component/Header.js): `src/component/Header.js`
- [Footer links](https://github.com/sanajitjana/react-portfolio/blob/main/src/component/Footer.js): `src/component/Footer.js`
- [Scroll reset](https://github.com/sanajitjana/react-portfolio/blob/main/src/component/ScrollToTop.js): `src/component/ScrollToTop.js`

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site (evidence: `README.md`)
- React entry → App routes: mounts (evidence: `src/index.js`)
- App routes → Navigation: renders (evidence: `src/App.js`)
- App routes → Footer links: renders (evidence: `src/App.js`)
- App routes → Scroll reset: wraps routes (evidence: `src/App.js`)
- App routes → Portfolio landing: routes to (evidence: `src/App.js`)
- App routes → Hooks article: routes to (evidence: `src/App.js`)
- App routes → UI/UX article: routes to (evidence: `src/App.js`)
- App routes → Laravel form article: routes to (evidence: `src/App.js`)
- App routes → Speed Insights: renders (evidence: `src/App.js`)