# nishannp/my-portfolio architecture

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

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

## Overview

This is a React personal portfolio site. Visitors enter through the shared navigation, which selects a routed page: a personal profile, photography gallery, project showcase, or chronological life timeline. The timeline’s event data is supplied by the application and rendered with year filtering and image viewing; pages also provide SEO metadata, with structured markup on the home page. The README describes Create React App setup rather than additional product features. Some component files are present in the tree but their wiring was not sampled, so uncertain connections are omitted.

Main entry points: [`src/App.js`](https://github.com/nishannp/my-portfolio/blob/master/src/App.js) (App and routes), [`src/components/home.js`](https://github.com/nishannp/my-portfolio/blob/master/src/components/home.js) (About home), [`src/components/projects.js`](https://github.com/nishannp/my-portfolio/blob/master/src/components/projects.js) (Project showcase), [`src/components/timeline.js`](https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js) (Timeline rendering)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Site shell"]
  node_app["App and routes<br/>[App.js]"]
  node_navbar["Navigation<br/>[navbar.js]"]
  node_footer["Footer<br/>[footer.js]"]
end

subgraph group_profile["Personal profile"]
  node_home["About home<br/>[home.js]"]
  node_schema["Structured markup<br/>[schemamarkup.js]"]
end

subgraph group_memories["Photos and memories"]
  node_gallery["Photo gallery<br/>[gallery.js]"]
  node_timeline["Timeline page<br/>[timeline.js]"]
  node_timelineview["Timeline rendering<br/>[timeline.js]"]
  node_imageviewer["Image viewer<br/>[timeline.js]"]
  node_siteimages["Site images"]
end

subgraph group_work["Projects and metadata"]
  node_projects["Project showcase<br/>[projects.js]"]
  node_seo["SEO metadata<br/>[seo.js]"]
  node_projectimages["Project images"]
end

node_visitor(("Visitor"))
node_externalprojects(("Linked projects"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_gallery
node_app -->|"routes to"| node_projects
node_app -->|"routes to"| node_timeline
node_app -->|"renders"| node_footer
node_navbar -->|"selects route"| node_app
node_app -->|"passes events"| node_timelineview
node_timeline -->|"renders"| node_timelineview
node_timelineview -->|"opens images"| node_imageviewer
node_home -->|"renders markup"| node_schema
node_home -->|"sets metadata"| node_seo
node_gallery -->|"sets metadata"| node_seo
node_projects -->|"sets metadata"| node_seo
node_timeline -->|"sets metadata"| node_seo
node_gallery -->|"loads photos"| node_siteimages
node_timelineview -->|"loads photos"| node_siteimages
node_home -->|"loads profile image"| node_siteimages
node_projects -->|"loads thumbnails"| node_projectimages
node_projects -.->|"links out"| node_externalprojects

click node_app "https://github.com/nishannp/my-portfolio/blob/master/src/App.js"
click node_navbar "https://github.com/nishannp/my-portfolio/blob/master/src/components/navbar.js"
click node_footer "https://github.com/nishannp/my-portfolio/blob/master/src/components/footer.js"
click node_home "https://github.com/nishannp/my-portfolio/blob/master/src/components/home.js"
click node_schema "https://github.com/nishannp/my-portfolio/blob/master/src/components/schemamarkup.js"
click node_gallery "https://github.com/nishannp/my-portfolio/blob/master/src/components/gallery.js"
click node_timeline "https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js"
click node_timelineview "https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js"
click node_imageviewer "https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js"
click node_projects "https://github.com/nishannp/my-portfolio/blob/master/src/components/projects.js"
click node_seo "https://github.com/nishannp/my-portfolio/blob/master/src/components/seo.js"
click node_siteimages "https://github.com/nishannp/my-portfolio/tree/master/public/images"
click node_projectimages "https://github.com/nishannp/my-portfolio/tree/master/public/project"

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_navbar,node_footer toneBlue
class node_home,node_schema toneAmber
class node_gallery,node_timeline,node_timelineview,node_imageviewer,node_siteimages toneMint
class node_projects,node_seo,node_projectimages toneRose
class node_visitor,node_externalprojects toneIndigo
```

## Components

### Site shell

- [App and routes](https://github.com/nishannp/my-portfolio/blob/master/src/App.js): `src/App.js`
- [Navigation](https://github.com/nishannp/my-portfolio/blob/master/src/components/navbar.js): `src/components/navbar.js`
- [Footer](https://github.com/nishannp/my-portfolio/blob/master/src/components/footer.js): `src/components/footer.js`

### Personal profile

- [About home](https://github.com/nishannp/my-portfolio/blob/master/src/components/home.js): `src/components/home.js`
- [Structured markup](https://github.com/nishannp/my-portfolio/blob/master/src/components/schemamarkup.js): `src/components/schemamarkup.js`

### Photos and memories

- [Photo gallery](https://github.com/nishannp/my-portfolio/blob/master/src/components/gallery.js): `src/components/gallery.js`
- [Timeline page](https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js): `src/components/timeline.js`
- [Timeline rendering](https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js): `src/components/timeline.js`
- [Image viewer](https://github.com/nishannp/my-portfolio/blob/master/src/components/timeline.js): `src/components/timeline.js`
- [Site images](https://github.com/nishannp/my-portfolio/tree/master/public/images): `public/images`

### Projects and metadata

- [Project showcase](https://github.com/nishannp/my-portfolio/blob/master/src/components/projects.js): `src/components/projects.js`
- [SEO metadata](https://github.com/nishannp/my-portfolio/blob/master/src/components/seo.js): `src/components/seo.js`
- [Project images](https://github.com/nishannp/my-portfolio/tree/master/public/project): `public/project`

### Other components

- **Visitor**
- **Linked projects**

## Connections

- Visitor → App and routes: opens site
- App and routes → Navigation: renders
- App and routes → About home: routes to
- App and routes → Photo gallery: routes to
- App and routes → Project showcase: routes to
- App and routes → Timeline page: routes to
- App and routes → Footer: renders
- Navigation → App and routes: selects route
- App and routes → Timeline rendering: passes events
- Timeline page → Timeline rendering: renders
- Timeline rendering → Image viewer: opens images
- About home → Structured markup: renders markup
- About home → SEO metadata: sets metadata
- Photo gallery → SEO metadata: sets metadata
- Project showcase → SEO metadata: sets metadata
- Timeline page → SEO metadata: sets metadata
- Photo gallery → Site images: loads photos
- Timeline rendering → Site images: loads photos
- About home → Site images: loads profile image
- Project showcase → Project images: loads thumbnails
- Project showcase → Linked projects: links out