# divyajain96/divy-jain-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/divyajain96/divy-jain-portfolio
- Repository: https://github.com/divyajain96/divy-jain-portfolio

## Overview

This is a React portfolio site for presenting a developer’s profile, skills, experience, projects, and ways to make contact. Visitors enter through the app’s path-based page selection; the home page presents portfolio sections and an inquiry form, which submits to Web3Forms. The app also serves thank-you, legal, and not-found pages. The graph reflects the visible app composition and sampled inquiry flow; relationships among unsampled sections are omitted rather than inferred.

Main entry points: [`src/App.tsx`](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/App.tsx) (Home page), [`src/components/Contact.tsx`](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Contact.tsx) (Contact form), [`src/lib/submitInquiry.ts`](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/lib/submitInquiry.ts) (Inquiry submission), [`src/components/Navbar.tsx`](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Navbar.tsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["App composition"]
  node_app["App and routes<br/>[App.tsx]"]
  node_home["Home page<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About and profile<br/>[About.tsx]"]
  node_services["Services<br/>[Services.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_highlights["Highlights<br/>[Highlights.tsx]"]
  node_projects["Projects<br/>[Projects.tsx]"]
  node_recognition["Recognition<br/>[Recognition.tsx]"]
  node_experience_section["Work experience<br/>[Experience.tsx]"]
  node_why_me["Why me<br/>[WhyMe.tsx]"]
  node_process["Process<br/>[Process.tsx]"]
  node_pricing["Pricing<br/>[Pricing.tsx]"]
end

subgraph group_experience["Site experience"]
  node_ready["Ready state<br/>[ReadyContext.tsx]"]
  node_preloader["Preloader<br/>[Preloader.tsx]"]
  node_scroll["Smooth scrolling<br/>[SmoothScroll.tsx]"]
  node_ambient["Ambient background"]
  node_grain["Grain overlay<br/>[GrainOverlay.tsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.tsx]"]
end

subgraph group_inquiry_legal["Inquiry and legal"]
  node_contact["Contact form<br/>[Contact.tsx]"]
  node_inquiry_submit["Inquiry submission<br/>[submitInquiry.ts]"]
  node_thank_you["Thank-you page<br/>[ThankYou.tsx]"]
  node_privacy["Privacy policy<br/>[PrivacyPolicy.tsx]"]
  node_terms["Terms and conditions"]
  node_not_found["Not-found page<br/>[NotFound.tsx]"]
end

node_visitor(("Visitor"))
node_web3forms{{"Web3Forms"}}

node_visitor -->|"opens site"| node_app
node_app -->|"selects home"| node_home
node_app -->|"routes to"| node_thank_you
node_app -->|"routes to"| node_privacy
node_app -->|"routes to"| node_terms
node_app -->|"routes to"| node_not_found
node_home -->|"provides state"| node_ready
node_home -->|"renders"| node_preloader
node_home -->|"wraps content"| node_scroll
node_home -->|"renders"| node_ambient
node_home -->|"renders"| node_grain
node_home -->|"renders"| node_cursor
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_services
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_highlights
node_home -->|"renders"| node_projects
node_home -->|"conditionally renders"| node_recognition
node_home -->|"renders"| node_experience_section
node_home -->|"renders"| node_why_me
node_home -->|"renders"| node_process
node_home -->|"conditionally renders"| node_pricing
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_visitor -->|"submits inquiry"| node_contact
node_contact -->|"submits details"| node_inquiry_submit
node_inquiry_submit -->|"posts inquiry"| node_web3forms

click node_app "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/App.tsx"
click node_home "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/App.tsx"
click node_ready "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/context/ReadyContext.tsx"
click node_preloader "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Preloader.tsx"
click node_scroll "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/SmoothScroll.tsx"
click node_ambient "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/AmbientBackground.tsx"
click node_grain "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/GrainOverlay.tsx"
click node_cursor "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/CustomCursor.tsx"
click node_navbar "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/About.tsx"
click node_services "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Services.tsx"
click node_skills "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Skills.tsx"
click node_highlights "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Highlights.tsx"
click node_projects "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Projects.tsx"
click node_recognition "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Recognition.tsx"
click node_experience_section "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Experience.tsx"
click node_why_me "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/WhyMe.tsx"
click node_process "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Process.tsx"
click node_pricing "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Pricing.tsx"
click node_contact "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Contact.tsx"
click node_footer "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Footer.tsx"
click node_inquiry_submit "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/lib/submitInquiry.ts"
click node_thank_you "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/ThankYou.tsx"
click node_privacy "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/PrivacyPolicy.tsx"
click node_terms "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/TermsAndConditions.tsx"
click node_not_found "https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/NotFound.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_app,node_home,node_navbar,node_footer toneBlue
class node_hero,node_about,node_services,node_skills,node_highlights,node_projects,node_recognition,node_experience_section,node_why_me,node_process,node_pricing toneAmber
class node_ready,node_preloader,node_scroll,node_ambient,node_grain,node_cursor toneMint
class node_contact,node_inquiry_submit,node_thank_you,node_privacy,node_terms,node_not_found toneRose
class node_visitor,node_web3forms toneIndigo
```

## Components

### App composition

- [App and routes](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Home page](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Footer](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Portfolio content

- [Hero](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [About and profile](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Services](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Services.tsx): `src/components/Services.tsx`
- [Skills](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Highlights](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Highlights.tsx): `src/components/Highlights.tsx`
- [Projects](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Recognition](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Recognition.tsx): `src/components/Recognition.tsx`
- [Work experience](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Experience.tsx): `src/components/Experience.tsx`
- [Why me](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/WhyMe.tsx): `src/components/WhyMe.tsx`
- [Process](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Process.tsx): `src/components/Process.tsx`
- [Pricing](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Pricing.tsx): `src/components/Pricing.tsx`

### Site experience

- [Ready state](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/context/ReadyContext.tsx): `src/context/ReadyContext.tsx`
- [Preloader](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Preloader.tsx): `src/components/Preloader.tsx`
- [Smooth scrolling](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/SmoothScroll.tsx): `src/components/SmoothScroll.tsx`
- [Ambient background](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/AmbientBackground.tsx): `src/components/AmbientBackground.tsx`
- [Grain overlay](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/GrainOverlay.tsx): `src/components/GrainOverlay.tsx`
- [Custom cursor](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/CustomCursor.tsx): `src/components/CustomCursor.tsx`

### Inquiry and legal

- [Contact form](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`
- [Inquiry submission](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/lib/submitInquiry.ts): `src/lib/submitInquiry.ts`
- [Thank-you page](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/ThankYou.tsx): `src/pages/ThankYou.tsx`
- [Privacy policy](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/PrivacyPolicy.tsx): `src/pages/PrivacyPolicy.tsx`
- [Terms and conditions](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/TermsAndConditions.tsx): `src/pages/TermsAndConditions.tsx`
- [Not-found page](https://github.com/divyajain96/divy-jain-portfolio/blob/main/src/pages/NotFound.tsx): `src/pages/NotFound.tsx`

### Other components

- **Visitor**
- **Web3Forms**

## Connections

- Visitor → App and routes: opens site
- App and routes → Home page: selects home (evidence: `src/App.tsx`)
- App and routes → Thank-you page: routes to (evidence: `src/App.tsx`)
- App and routes → Privacy policy: routes to (evidence: `src/App.tsx`)
- App and routes → Terms and conditions: routes to (evidence: `src/App.tsx`)
- App and routes → Not-found page: routes to (evidence: `src/App.tsx`)
- Home page → Ready state: provides state (evidence: `src/App.tsx`)
- Home page → Preloader: renders (evidence: `src/App.tsx`)
- Home page → Smooth scrolling: wraps content (evidence: `src/App.tsx`)
- Home page → Ambient background: renders (evidence: `src/App.tsx`)
- Home page → Grain overlay: renders (evidence: `src/App.tsx`)
- Home page → Custom cursor: renders (evidence: `src/App.tsx`)
- Home page → Navigation: renders (evidence: `src/App.tsx`)
- Home page → Hero: renders (evidence: `src/App.tsx`)
- Home page → About and profile: renders (evidence: `src/App.tsx`)
- Home page → Services: renders (evidence: `src/App.tsx`)
- Home page → Skills: renders (evidence: `src/App.tsx`)
- Home page → Highlights: renders (evidence: `src/App.tsx`)
- Home page → Projects: renders (evidence: `src/App.tsx`)
- Home page → Recognition: conditionally renders (evidence: `src/App.tsx`)
- Home page → Work experience: renders (evidence: `src/App.tsx`)
- Home page → Why me: renders (evidence: `src/App.tsx`)
- Home page → Process: renders (evidence: `src/App.tsx`)
- Home page → Pricing: conditionally renders (evidence: `src/App.tsx`)
- Home page → Contact form: renders (evidence: `src/App.tsx`)
- Home page → Footer: renders (evidence: `src/App.tsx`)
- Visitor → Contact form: submits inquiry (evidence: `src/components/Contact.tsx`)
- Contact form → Inquiry submission: submits details (evidence: `src/components/Contact.tsx`)
- Inquiry submission → Web3Forms: posts inquiry (evidence: `src/lib/submitInquiry.ts`)