# kishorejegan/portfolio architecture

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

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

## Overview

#### Purpose and Runtime

This is a Vite-based React + TypeScript personal portfolio site. It renders a single-page presentation of the owner’s introduction, skills/achievements, projects, portfolio work, and contact information. Static resume and animation assets are served from `public/`, including `public/Kishore_J_Resume.pdf`.

Primary browser bootstrap: `src/main.tsx` mounts `src/App.tsx`. Vite configuration is at `vite.config.ts`.

#### Application Composition

`src/App.tsx` is the top-level composition boundary. It assembles the site’s persistent visual layers and section-level content into one scrolling experience:

- Navigation: `src/components/HeaderNavigation.tsx`
- Intro/hero content: `src/components/GreetingTextBlock.tsx`, `src/components/PhotoFrame.tsx`
- Content sections: `src/components/AboutMeSection.tsx`, `src/components/AchievementsSection.tsx`, `src/components/ProjectsSection.tsx`, `src/components/PortfolioShowcase.tsx`, `src/components/ContactSection.tsx`
- Additional themed section: `src/components/DiveSection.tsx`

#### Presentation and Navigation Flow

The primary user flow is in-page navigation: the header directs users to content sections rendered by the root application. Each section owns its specific presentation and content, while shared page-level styling is centralized in `src/index.css`.

`src/types.ts` provides shared TypeScript contracts for cross-component content or UI state, reducing coupling between otherwise independently rendered portfolio sections.

#### Visual Experience Layers

`src/components/BackgroundCanvas.tsx` is a distinct ambient/background rendering layer, likely isolated from semantic portfolio content because it has different rendering and performance concerns. It is composed alongside conventional React section components rather than representing a separate service or application boundary.

Visual inspection/detail interaction is encapsulated by `src/components/GlassInspectorModal.tsx`. This component forms the main transient overlay boundary: portfolio or image-oriented content can trigger modal inspection without embedding overlay state and presentation into every section.

#### Portfolio Content Boundaries

Project-oriented content is separated into two major views:

- `src/components/ProjectsSection.tsx` presents project entries.
- `src/components/PortfolioShowcase.tsx` presents showcase/visual portfolio material.

Supporting presentational components such as `src/components/PhotoFrame.tsx` provide reusable framed media rendering, while `src/components/GlassInspectorModal.tsx` supports expanded inspection. This separation permits media interaction to evolve independently of project narrative content.

#### Duplicate UI Tree

The repository contains a second, near-parallel component tree under `Web_UI/src/`, including `Web_UI/src/App.tsx` and `Web_UI/src/main.tsx`. The root `src/` tree is the likely active Vite application source because it is paired with root `package.json`, `vite.config.ts`, and root TypeScript configurations. Treat `Web_UI/src/` as a duplicate, alternate, or legacy UI copy unless build scripts establish otherwise.

#### Infrastructure and External Dependencies

The application is client-rendered and uses Node/npm for dependency installation and Vite for development/build output (`package.json`, `package-lock.json`, `vite.config.ts`). No backend, database, API integration, authentication provider, or cloud infrastructure is represented in the supplied tree. Public assets are delivered directly by the frontend runtime from `public/`.

Main entry points: [`src/App.tsx`](https://github.com/kishorejegan/portfolio/blob/master/src/App.tsx) (Root page composition), [`src/components/HeaderNavigation.tsx`](https://github.com/kishorejegan/portfolio/blob/master/src/components/HeaderNavigation.tsx) (Header navigation), [`src/components/PortfolioShowcase.tsx`](https://github.com/kishorejegan/portfolio/blob/master/src/components/PortfolioShowcase.tsx) (Portfolio showcase), [`src/components/ProjectsSection.tsx`](https://github.com/kishorejegan/portfolio/blob/master/src/components/ProjectsSection.tsx) (Project entries)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Active Vite App"]
  node_npm{{"Node/npm dependencies<br/>toolchain<br/>[package.json]"}}
  node_vite{{"Vite build runtime<br/>bundler<br/>[vite.config.ts]"}}
  node_main(("Browser bootstrap<br/>React entry<br/>[main.tsx]"))
  node_assets["Static public assets"]
end

subgraph group_ui["Page Composition"]
  node_app["Root page composition<br/>React app<br/>[App.tsx]"]
  node_header["Header navigation"]
  node_intro["Hero introduction<br/>content component"]
end

subgraph group_sections["Portfolio Sections"]
  node_about["About and skills<br/>content section<br/>[AboutMeSection.tsx]"]
  node_achievements["Achievements<br/>content section"]
  node_projects["Project entries<br/>content section"]
  node_showcase["Portfolio showcase<br/>visual content section"]
  node_dive["Dive section<br/>themed section<br/>[DiveSection.tsx]"]
  node_contact["Contact section<br/>content section<br/>[ContactSection.tsx]"]
end

subgraph group_support["Shared Visual UI"]
  node_background["Ambient background<br/>canvas layer"]
  node_photo["Framed media<br/>shared visual component<br/>[PhotoFrame.tsx]"]
  node_inspector["Media inspector modal<br/>transient overlay"]
  node_types["Shared UI contracts<br/>TypeScript types<br/>[types.ts]"]
  node_styles["Global page styles<br/>stylesheet<br/>[index.css]"]
end

node_legacy["Alternate UI copy<br/>duplicate React tree<br/>[App.tsx]"]

node_npm -->|"provides tooling"| node_vite
node_vite -->|"serves and builds"| node_main
node_main -->|"mounts"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_intro
node_app -->|"renders"| node_about
node_app -->|"renders"| node_achievements
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_showcase
node_app -->|"renders"| node_dive
node_app -->|"renders"| node_contact
node_app -->|"composes"| node_background
node_app -->|"uses"| node_styles
node_header -.->|"anchors to"| node_about
node_header -.->|"anchors to"| node_projects
node_header -.->|"anchors to"| node_showcase
node_header -.->|"anchors to"| node_contact
node_intro -->|"uses"| node_photo
node_showcase -->|"uses"| node_photo
node_showcase -->|"opens"| node_inspector
node_projects -.->|"can open"| node_inspector
node_app -.->|"shares contracts through"| node_types
node_app -->|"serves media and resume"| node_assets
node_legacy -.->|"near-parallel copy"| node_app

click node_npm "https://github.com/kishorejegan/portfolio/blob/master/package.json"
click node_vite "https://github.com/kishorejegan/portfolio/blob/master/vite.config.ts"
click node_main "https://github.com/kishorejegan/portfolio/blob/master/src/main.tsx"
click node_app "https://github.com/kishorejegan/portfolio/blob/master/src/App.tsx"
click node_header "https://github.com/kishorejegan/portfolio/blob/master/src/components/HeaderNavigation.tsx"
click node_intro "https://github.com/kishorejegan/portfolio/blob/master/src/components/GreetingTextBlock.tsx"
click node_about "https://github.com/kishorejegan/portfolio/blob/master/src/components/AboutMeSection.tsx"
click node_achievements "https://github.com/kishorejegan/portfolio/blob/master/src/components/AchievementsSection.tsx"
click node_projects "https://github.com/kishorejegan/portfolio/blob/master/src/components/ProjectsSection.tsx"
click node_showcase "https://github.com/kishorejegan/portfolio/blob/master/src/components/PortfolioShowcase.tsx"
click node_dive "https://github.com/kishorejegan/portfolio/blob/master/src/components/DiveSection.tsx"
click node_contact "https://github.com/kishorejegan/portfolio/blob/master/src/components/ContactSection.tsx"
click node_background "https://github.com/kishorejegan/portfolio/blob/master/src/components/BackgroundCanvas.tsx"
click node_photo "https://github.com/kishorejegan/portfolio/blob/master/src/components/PhotoFrame.tsx"
click node_inspector "https://github.com/kishorejegan/portfolio/blob/master/src/components/GlassInspectorModal.tsx"
click node_types "https://github.com/kishorejegan/portfolio/blob/master/src/types.ts"
click node_styles "https://github.com/kishorejegan/portfolio/blob/master/src/index.css"
click node_assets "https://github.com/kishorejegan/portfolio/blob/master/public/Kishore_J_Resume.pdf"
click node_legacy "https://github.com/kishorejegan/portfolio/blob/master/Web_UI/src/App.tsx"

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_npm,node_vite,node_main,node_assets toneBlue
class node_app,node_header,node_intro toneAmber
class node_about,node_achievements,node_projects,node_showcase,node_dive,node_contact toneMint
class node_background,node_photo,node_inspector,node_types,node_styles toneRose
class node_legacy toneNeutral
```

## Components

### Active Vite App

Root client-rendered application.

- [Node/npm dependencies](https://github.com/kishorejegan/portfolio/blob/master/package.json): toolchain · `package.json`
- [Vite build runtime](https://github.com/kishorejegan/portfolio/blob/master/vite.config.ts): bundler · `vite.config.ts`
- [Browser bootstrap](https://github.com/kishorejegan/portfolio/blob/master/src/main.tsx): React entry · `src/main.tsx`
- [Static public assets](https://github.com/kishorejegan/portfolio/blob/master/public/Kishore_J_Resume.pdf): public assets · Includes the downloadable resume. · `public/Kishore_J_Resume.pdf`

### Page Composition

- [Root page composition](https://github.com/kishorejegan/portfolio/blob/master/src/App.tsx): React app · Assembles the single scrolling portfolio experience. · `src/App.tsx`
- [Header navigation](https://github.com/kishorejegan/portfolio/blob/master/src/components/HeaderNavigation.tsx): navigation · Directs users to in-page sections. · `src/components/HeaderNavigation.tsx`
- [Hero introduction](https://github.com/kishorejegan/portfolio/blob/master/src/components/GreetingTextBlock.tsx): content component · `src/components/GreetingTextBlock.tsx`

### Portfolio Sections

- [About and skills](https://github.com/kishorejegan/portfolio/blob/master/src/components/AboutMeSection.tsx): content section · `src/components/AboutMeSection.tsx`
- [Achievements](https://github.com/kishorejegan/portfolio/blob/master/src/components/AchievementsSection.tsx): content section · `src/components/AchievementsSection.tsx`
- [Project entries](https://github.com/kishorejegan/portfolio/blob/master/src/components/ProjectsSection.tsx): content section · `src/components/ProjectsSection.tsx`
- [Portfolio showcase](https://github.com/kishorejegan/portfolio/blob/master/src/components/PortfolioShowcase.tsx): visual content section · Presents visual portfolio material. · `src/components/PortfolioShowcase.tsx`
- [Dive section](https://github.com/kishorejegan/portfolio/blob/master/src/components/DiveSection.tsx): themed section · `src/components/DiveSection.tsx`
- [Contact section](https://github.com/kishorejegan/portfolio/blob/master/src/components/ContactSection.tsx): content section · `src/components/ContactSection.tsx`

### Shared Visual UI

- [Ambient background](https://github.com/kishorejegan/portfolio/blob/master/src/components/BackgroundCanvas.tsx): canvas layer · Performance-isolated background rendering. · `src/components/BackgroundCanvas.tsx`
- [Framed media](https://github.com/kishorejegan/portfolio/blob/master/src/components/PhotoFrame.tsx): shared visual component · `src/components/PhotoFrame.tsx`
- [Media inspector modal](https://github.com/kishorejegan/portfolio/blob/master/src/components/GlassInspectorModal.tsx): transient overlay · Expanded visual inspection boundary. · `src/components/GlassInspectorModal.tsx`
- [Shared UI contracts](https://github.com/kishorejegan/portfolio/blob/master/src/types.ts): TypeScript types · `src/types.ts`
- [Global page styles](https://github.com/kishorejegan/portfolio/blob/master/src/index.css): stylesheet · `src/index.css`

### Other components

- [Alternate UI copy](https://github.com/kishorejegan/portfolio/blob/master/Web_UI/src/App.tsx): duplicate React tree · Likely inactive or legacy UI source. · `Web_UI/src/App.tsx`

## Connections

- Node/npm dependencies → Vite build runtime: provides tooling
- Vite build runtime → Browser bootstrap: serves and builds
- Browser bootstrap → Root page composition: mounts
- Root page composition → Header navigation: renders
- Root page composition → Hero introduction: renders
- Root page composition → About and skills: renders
- Root page composition → Achievements: renders
- Root page composition → Project entries: renders
- Root page composition → Portfolio showcase: renders
- Root page composition → Dive section: renders
- Root page composition → Contact section: renders
- Root page composition → Ambient background: composes
- Root page composition → Global page styles: uses
- Header navigation → About and skills: anchors to
- Header navigation → Project entries: anchors to
- Header navigation → Portfolio showcase: anchors to
- Header navigation → Contact section: anchors to
- Hero introduction → Framed media: uses
- Portfolio showcase → Framed media: uses
- Portfolio showcase → Media inspector modal: opens
- Project entries → Media inspector modal: can open
- Root page composition → Shared UI contracts: shares contracts through
- Root page composition → Static public assets: serves media and resume
- Alternate UI copy → Root page composition: near-parallel copy