# rajesh-k11/personal-portfolio-rk architecture

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

- Interactive diagram: https://gitdiagram.com/rajesh-k11/personal-portfolio-rk
- Repository: https://github.com/rajesh-k11/personal-portfolio-rk

## Overview

This is a React portfolio site for presenting Rajesh K’s profile, work, skills, services, experience, and community activity, with a contact form for visitor inquiries. The runtime begins at the React entry point and mounts App, which manages loading and theme state and composes the page sections; visitors then browse the portfolio, open project or gallery details, and can submit a message through EmailJS. The graph preserves the documented portfolio capabilities. Components not linked to other components have no edges where the excerpts show no direct relationship.

Main entry points: [`src/App.tsx`](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/App.tsx) (App shell), [`src/components/Contact.tsx`](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Contact.tsx) (Contact form), [`src/main.tsx`](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/main.tsx) (React entry), [`src/components/Header.tsx`](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Header.tsx) (Navigation and theme)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_loading["Loading screen<br/>[LoadingScreen.tsx]"]
  node_header["Navigation and theme<br/>[Header.tsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.tsx]"]
  node_progress["Scroll progress<br/>[ScrollProgress.tsx]"]
end

subgraph group_profile["Profile and career"]
  node_hero["Hero introduction<br/>[Hero.tsx]"]
  node_about["About and awards<br/>[About.tsx]"]
  node_experience["Experience timeline<br/>[Experience.tsx]"]
  node_services["Services<br/>[Services.tsx]"]
  node_skills["Skills showcase<br/>[Skills.tsx]"]
  node_ticker["Craft ticker<br/>[CraftTicker.tsx]"]
end

subgraph group_work["Work showcase"]
  node_projects["Projects and details<br/>[Projects.tsx]"]
  node_gallery["Event gallery and lightbox<br/>[Gallery.tsx]"]
end

subgraph group_interaction["Visitor interaction"]
  node_contact["Contact form<br/>[Contact.tsx]"]
end

node_visitor(("Portfolio visitor"))
node_emailjs{{"EmailJS service"}}

node_visitor -->|"opens site"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"shows while loading"| node_loading
node_app -->|"renders"| node_header
node_app -->|"renders"| node_cursor
node_app -->|"renders"| node_progress
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_ticker
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_services
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_gallery
node_app -->|"renders"| node_contact
node_visitor -.->|"navigates"| node_header
node_visitor -.->|"opens details"| node_projects
node_visitor -->|"opens lightbox"| node_gallery
node_visitor -.->|"submits inquiry"| node_contact
node_contact -->|"sends form"| node_emailjs

click node_entry "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/main.tsx"
click node_app "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/App.tsx"
click node_loading "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/LoadingScreen.tsx"
click node_header "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Header.tsx"
click node_cursor "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/CustomCursor.tsx"
click node_progress "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/ScrollProgress.tsx"
click node_hero "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/About.tsx"
click node_experience "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Experience.tsx"
click node_services "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Services.tsx"
click node_skills "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Skills.tsx"
click node_ticker "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/CraftTicker.tsx"
click node_projects "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Projects.tsx"
click node_gallery "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Gallery.tsx"
click node_contact "https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Contact.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_entry,node_app,node_loading,node_header,node_cursor,node_progress toneBlue
class node_hero,node_about,node_experience,node_services,node_skills,node_ticker toneAmber
class node_projects,node_gallery toneMint
class node_contact toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/App.tsx): `src/App.tsx`
- [Loading screen](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/LoadingScreen.tsx): `src/components/LoadingScreen.tsx`
- [Navigation and theme](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Custom cursor](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/CustomCursor.tsx): `src/components/CustomCursor.tsx`
- [Scroll progress](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/ScrollProgress.tsx): `src/components/ScrollProgress.tsx`

### Profile and career

- [Hero introduction](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [About and awards](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Experience timeline](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Experience.tsx): `src/components/Experience.tsx`
- [Services](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Services.tsx): `src/components/Services.tsx`
- [Skills showcase](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Craft ticker](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/CraftTicker.tsx): `src/components/CraftTicker.tsx`

### Work showcase

- [Projects and details](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Event gallery and lightbox](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Gallery.tsx): `src/components/Gallery.tsx`

### Visitor interaction

- [Contact form](https://github.com/rajesh-k11/personal-portfolio-rk/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`

### Other components

- **Portfolio visitor**
- **EmailJS service**

## Connections

- Portfolio visitor → React entry: opens site (evidence: `README.md`)
- React entry → App shell: mounts (evidence: `src/main.tsx`)
- App shell → Loading screen: shows while loading (evidence: `src/App.tsx`)
- App shell → Navigation and theme: renders (evidence: `src/App.tsx`)
- App shell → Custom cursor: renders (evidence: `src/App.tsx`)
- App shell → Scroll progress: renders (evidence: `src/App.tsx`)
- App shell → Hero introduction: renders (evidence: `src/App.tsx`)
- App shell → Craft ticker: renders (evidence: `src/App.tsx`)
- App shell → About and awards: renders (evidence: `src/App.tsx`)
- App shell → Experience timeline: renders (evidence: `src/App.tsx`)
- App shell → Services: renders (evidence: `src/App.tsx`)
- App shell → Skills showcase: renders (evidence: `src/App.tsx`)
- App shell → Projects and details: renders (evidence: `src/App.tsx`)
- App shell → Event gallery and lightbox: renders (evidence: `src/App.tsx`)
- App shell → Contact form: renders (evidence: `src/App.tsx`)
- Portfolio visitor → Navigation and theme: navigates
- Portfolio visitor → Projects and details: opens details
- Portfolio visitor → Event gallery and lightbox: opens lightbox (evidence: `src/components/Gallery.tsx`)
- Portfolio visitor → Contact form: submits inquiry
- Contact form → EmailJS service: sends form (evidence: `src/components/Contact.tsx`)