# nilanjanajui/my-portfolio architecture

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

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

## Overview

This is a React single-page developer portfolio. Visitors enter the home page to explore the profile, skills, education and journey, browse featured or complete project listings, open project details, and reach the contact links or form. The graph distinguishes the app’s routing, portfolio content, project browsing and presentation helpers. Relationships are limited to those shown in the excerpts or README; unsampled components are included where their role is explicit, but no unverified integrations or internal calls are inferred.

Main entry points: [`src/App.jsx`](https://github.com/nilanjanajui/my-portfolio/blob/main/src/App.jsx) (App routes), [`src/components/ProjectsGrid.jsx`](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ProjectsGrid.jsx) (Project grid), [`src/components/AnimatedSection.jsx`](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/AnimatedSection.jsx) (Animated section), [`src/components/About.jsx`](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/About.jsx) (About profile)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App and routing"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App routes<br/>[App.jsx]"]
  node_header["Header navigation<br/>[Header.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Profile hero<br/>[Hero.jsx]"]
  node_about["About profile<br/>[About.jsx]"]
  node_skills["Technical skills<br/>[Skills.jsx]"]
  node_journey["Development journey<br/>[Journey.jsx]"]
  node_education["Education history<br/>[Education.jsx]"]
  node_build["Build approach<br/>[HowIBuild.jsx]"]
  node_activity["GitHub activity<br/>[GitHubActivity.jsx]"]
end

subgraph group_projects["Project showcase"]
  node_project_grid["Project grid<br/>[ProjectsGrid.jsx]"]
  node_all_projects["All projects page<br/>[AllProjects.jsx]"]
  node_project_detail["Project detail<br/>[ProjectDetail.jsx]"]
  node_project_data["Project catalogue<br/>[projects.js]"]
end

subgraph group_presentation["Presentation helpers"]
  node_animated["Animated section"]
  node_scroll_hook["Scroll animation hook"]
  node_background["Interactive background"]
  node_scroll_top["Scroll to top<br/>[ScrollToTop.jsx]"]
end

subgraph group_contact["Contact"]
  node_contact["Contact links and form<br/>[Contact.jsx]"]
end

node_visitor(("Portfolio visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_header
node_app -->|"routes home"| node_hero
node_app -->|"routes home"| node_project_grid
node_app -->|"routes home"| node_activity
node_app -->|"routes home"| node_skills
node_app -->|"routes home"| node_about
node_app -->|"routes home"| node_journey
node_app -->|"routes home"| node_education
node_app -->|"routes home"| node_build
node_app -->|"routes home"| node_contact
node_app -->|"routes detail"| node_project_detail
node_app -->|"routes listing"| node_all_projects
node_app -->|"renders"| node_background
node_app -->|"renders"| node_scroll_top
node_project_grid -->|"reads projects"| node_project_data
node_project_grid -->|"navigates to"| node_project_detail
node_all_projects -->|"renders"| node_project_grid
node_project_detail -->|"finds project"| node_project_data
node_about -->|"counts projects"| node_project_data
node_hero -->|"renders"| node_animated
node_about -->|"renders"| node_animated
node_skills -->|"renders"| node_animated
node_project_grid -->|"renders"| node_animated
node_animated -->|"uses hook"| node_scroll_hook

click node_entry "https://github.com/nilanjanajui/my-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/nilanjanajui/my-portfolio/blob/main/src/App.jsx"
click node_header "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Header.jsx"
click node_hero "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/About.jsx"
click node_skills "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Skills.jsx"
click node_journey "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Journey.jsx"
click node_education "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Education.jsx"
click node_build "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/HowIBuild.jsx"
click node_activity "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/GitHubActivity.jsx"
click node_project_grid "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ProjectsGrid.jsx"
click node_all_projects "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/AllProjects.jsx"
click node_project_detail "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ProjectDetail.jsx"
click node_project_data "https://github.com/nilanjanajui/my-portfolio/blob/main/src/data/projects.js"
click node_contact "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Contact.jsx"
click node_animated "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/AnimatedSection.jsx"
click node_scroll_hook "https://github.com/nilanjanajui/my-portfolio/blob/main/src/hooks/useScrollAnimation.js"
click node_background "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/InteractiveBackground.jsx"
click node_scroll_top "https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ScrollToTop.jsx"

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,node_header toneBlue
class node_hero,node_about,node_skills,node_journey,node_education,node_build,node_activity toneAmber
class node_project_grid,node_all_projects,node_project_detail,node_project_data toneMint
class node_animated,node_scroll_hook,node_background,node_scroll_top toneRose
class node_contact,node_visitor toneIndigo
```

## Components

### App and routing

- [React entry](https://github.com/nilanjanajui/my-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [App routes](https://github.com/nilanjanajui/my-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Header navigation](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Header.jsx): `src/components/Header.jsx`

### Portfolio content

- [Profile hero](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About profile](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Technical skills](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Development journey](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Journey.jsx): `src/components/Journey.jsx`
- [Education history](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Education.jsx): `src/components/Education.jsx`
- [Build approach](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/HowIBuild.jsx): `src/components/HowIBuild.jsx`
- [GitHub activity](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/GitHubActivity.jsx): `src/components/GitHubActivity.jsx`

### Project showcase

- [Project grid](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ProjectsGrid.jsx): `src/components/ProjectsGrid.jsx`
- [All projects page](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/AllProjects.jsx): `src/components/AllProjects.jsx`
- [Project detail](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ProjectDetail.jsx): `src/components/ProjectDetail.jsx`
- [Project catalogue](https://github.com/nilanjanajui/my-portfolio/blob/main/src/data/projects.js): `src/data/projects.js`

### Presentation helpers

- [Animated section](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/AnimatedSection.jsx): `src/components/AnimatedSection.jsx`
- [Scroll animation hook](https://github.com/nilanjanajui/my-portfolio/blob/main/src/hooks/useScrollAnimation.js): `src/hooks/useScrollAnimation.js`
- [Interactive background](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/InteractiveBackground.jsx): `src/components/InteractiveBackground.jsx`
- [Scroll to top](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/ScrollToTop.jsx): `src/components/ScrollToTop.jsx`

### Contact

- [Contact links and form](https://github.com/nilanjanajui/my-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Other components

- **Portfolio visitor**

## Connections

- Portfolio visitor → React entry: opens site (evidence: `README.md`)
- React entry → App routes: renders (evidence: `src/main.jsx`)
- App routes → Header navigation: renders (evidence: `src/App.jsx`)
- App routes → Profile hero: routes home (evidence: `src/App.jsx`)
- App routes → Project grid: routes home (evidence: `src/App.jsx`)
- App routes → GitHub activity: routes home (evidence: `src/App.jsx`)
- App routes → Technical skills: routes home (evidence: `src/App.jsx`)
- App routes → About profile: routes home (evidence: `src/App.jsx`)
- App routes → Development journey: routes home (evidence: `src/App.jsx`)
- App routes → Education history: routes home (evidence: `src/App.jsx`)
- App routes → Build approach: routes home (evidence: `src/App.jsx`)
- App routes → Contact links and form: routes home (evidence: `src/App.jsx`)
- App routes → Project detail: routes detail (evidence: `src/App.jsx`)
- App routes → All projects page: routes listing (evidence: `src/App.jsx`)
- App routes → Interactive background: renders (evidence: `src/App.jsx`)
- App routes → Scroll to top: renders (evidence: `src/App.jsx`)
- Project grid → Project catalogue: reads projects (evidence: `src/components/ProjectsGrid.jsx`)
- Project grid → Project detail: navigates to (evidence: `src/components/ProjectsGrid.jsx`)
- All projects page → Project grid: renders (evidence: `src/components/AllProjects.jsx`)
- Project detail → Project catalogue: finds project (evidence: `src/components/ProjectDetail.jsx`)
- About profile → Project catalogue: counts projects (evidence: `src/components/About.jsx`)
- Profile hero → Animated section: renders (evidence: `src/components/Hero.jsx`)
- About profile → Animated section: renders (evidence: `src/components/About.jsx`)
- Technical skills → Animated section: renders (evidence: `src/components/Skills.jsx`)
- Project grid → Animated section: renders (evidence: `src/components/ProjectsGrid.jsx`)
- Animated section → Scroll animation hook: uses hook (evidence: `src/components/AnimatedSection.jsx`)