# joydeepsasnal-dot/portfolio architecture

> Architecture diagram of the GitHub repository joydeepsasnal-dot/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/joydeepsasnal-dot/portfolio
- Repository: https://github.com/joydeepsasnal-dot/portfolio

## Overview

This is an interactive software-engineering portfolio: visitors browse the engineer’s profile and work, explore three live project demos, inspect language and project documentation, and prepare a contact email. The app entry composes the page; Selected Works dispatches demo selection and documentation requests, while App owns modal state and navigation. The demos include a task dependency visualizer, a grid simulation, and a Web Audio player. The excerpts show task-graph calculation and contact validation; other demo internals and some section-to-data relationships are only partially sampled, so those links are omitted where not evidenced.

Main entry points: [`src/App.tsx`](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/App.tsx) (Page and modal), [`src/components/SelectedWorksSection.tsx`](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/SelectedWorksSection.tsx) (Selected works), [`src/components/ContactSection.tsx`](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/ContactSection.tsx) (Contact form), [`src/components/TechnicalDocsModal.tsx`](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TechnicalDocsModal.tsx) (Technical docs)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_mount["React mount<br/>[main.tsx]"]
  node_app["Page and modal<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero<br/>[HeroSection.tsx]"]
  node_intro["Philosophy"]
  node_approach["Engineering approach"]
  node_works["Selected works"]
  node_languages["Language matrix"]
  node_testimonials["Testimonials"]
  node_contact["Contact form<br/>[ContactSection.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_docs["Technical docs"]
end

subgraph group_projects["Project experiences"]
  node_echoes["Wild simulation"]
  node_safar["Music player<br/>[SafarMusicDemo.tsx]"]
  node_tasks["Task manager"]
end

subgraph group_reference["Portfolio content"]
  node_data[("Portfolio data<br/>[portfolioData.ts]")]
  node_types["Domain types<br/>[index.ts]"]
end

subgraph group_logic["Interactive logic"]
  node_engine["Shared algorithms<br/>[engine.ts]"]
end

node_visitor(("Visitor"))
node_web_audio["Browser audio"]
node_email_app["Default mail app"]

node_visitor -->|"opens app"| node_mount
node_mount -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_intro
node_app -->|"renders"| node_approach
node_app -->|"renders"| node_works
node_app -->|"renders"| node_languages
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_docs
node_works -->|"renders selected"| node_echoes
node_works -->|"renders selected"| node_safar
node_works -->|"renders selected"| node_tasks
node_tasks -->|"resolves dependencies"| node_engine
node_contact -->|"validates form"| node_engine
node_works -->|"loads projects"| node_data
node_docs -->|"loads project docs"| node_data
node_languages -->|"loads language content"| node_data
node_app -->|"opens by project"| node_docs
node_contact -->|"prepares draft"| node_email_app
node_safar -.->|"uses audio context"| node_web_audio
node_engine -->|"uses form types"| node_types
node_contact -->|"uses form type"| node_types

click node_mount "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/main.tsx"
click node_app "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/App.tsx"
click node_navbar "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/HeroSection.tsx"
click node_intro "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/IntroPhilosophySection.tsx"
click node_approach "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/HowItWorksSection.tsx"
click node_works "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/SelectedWorksSection.tsx"
click node_languages "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/LanguagesMatrixSection.tsx"
click node_testimonials "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TestimonialsSection.tsx"
click node_contact "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/ContactSection.tsx"
click node_footer "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/Footer.tsx"
click node_docs "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TechnicalDocsModal.tsx"
click node_echoes "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/EchoesOfTheWildDemo.tsx"
click node_safar "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/SafarMusicDemo.tsx"
click node_tasks "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TaskManagerDemo.tsx"
click node_data "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/data/portfolioData.ts"
click node_types "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/types/index.ts"
click node_engine "https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/utils/engine.ts"

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_mount,node_app,node_navbar,node_hero,node_intro,node_approach,node_works,node_languages,node_testimonials,node_contact,node_footer,node_docs,node_web_audio toneBlue
class node_echoes,node_safar,node_tasks toneAmber
class node_data,node_types toneMint
class node_engine toneRose
class node_visitor,node_email_app toneIndigo
```

## Components

### Portfolio presentation

- [React mount](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [Page and modal](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Hero](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/HeroSection.tsx): `src/components/HeroSection.tsx`
- [Philosophy](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/IntroPhilosophySection.tsx): `src/components/IntroPhilosophySection.tsx`
- [Engineering approach](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/HowItWorksSection.tsx): `src/components/HowItWorksSection.tsx`
- [Selected works](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/SelectedWorksSection.tsx): `src/components/SelectedWorksSection.tsx`
- [Language matrix](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/LanguagesMatrixSection.tsx): `src/components/LanguagesMatrixSection.tsx`
- [Testimonials](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TestimonialsSection.tsx): `src/components/TestimonialsSection.tsx`
- [Contact form](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/ContactSection.tsx): `src/components/ContactSection.tsx`
- [Footer](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Technical docs](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TechnicalDocsModal.tsx): `src/components/TechnicalDocsModal.tsx`

### Project experiences

- [Wild simulation](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/EchoesOfTheWildDemo.tsx): `src/components/EchoesOfTheWildDemo.tsx`
- [Music player](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/SafarMusicDemo.tsx): `src/components/SafarMusicDemo.tsx`
- [Task manager](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/components/TaskManagerDemo.tsx): `src/components/TaskManagerDemo.tsx`

### Portfolio content

- [Portfolio data](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/data/portfolioData.ts): `src/data/portfolioData.ts`
- [Domain types](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/types/index.ts): `src/types/index.ts`

### Interactive logic

- [Shared algorithms](https://github.com/joydeepsasnal-dot/portfolio/blob/main/src/utils/engine.ts): `src/utils/engine.ts`

### Other components

- **Visitor**
- **Browser audio**
- **Default mail app**

## Connections

- Visitor → React mount: opens app (evidence: `src/main.tsx`)
- React mount → Page and modal: renders (evidence: `src/main.tsx`)
- Page and modal → Navigation: renders (evidence: `src/App.tsx`)
- Page and modal → Hero: renders (evidence: `src/App.tsx`)
- Page and modal → Philosophy: renders (evidence: `src/App.tsx`)
- Page and modal → Engineering approach: renders (evidence: `src/App.tsx`)
- Page and modal → Selected works: renders (evidence: `src/App.tsx`)
- Page and modal → Language matrix: renders (evidence: `src/App.tsx`)
- Page and modal → Testimonials: renders (evidence: `src/App.tsx`)
- Page and modal → Contact form: renders (evidence: `src/App.tsx`)
- Page and modal → Footer: renders (evidence: `src/App.tsx`)
- Page and modal → Technical docs: renders (evidence: `src/App.tsx`)
- Selected works → Wild simulation: renders selected (evidence: `src/components/SelectedWorksSection.tsx`)
- Selected works → Music player: renders selected (evidence: `src/components/SelectedWorksSection.tsx`)
- Selected works → Task manager: renders selected (evidence: `src/components/SelectedWorksSection.tsx`)
- Task manager → Shared algorithms: resolves dependencies (evidence: `src/components/TaskManagerDemo.tsx`)
- Contact form → Shared algorithms: validates form (evidence: `src/components/ContactSection.tsx`)
- Selected works → Portfolio data: loads projects (evidence: `src/components/SelectedWorksSection.tsx`)
- Technical docs → Portfolio data: loads project docs (evidence: `src/components/TechnicalDocsModal.tsx`)
- Language matrix → Portfolio data: loads language content (evidence: `src/components/LanguagesMatrixSection.tsx`)
- Page and modal → Technical docs: opens by project (evidence: `src/App.tsx`)
- Contact form → Default mail app: prepares draft (evidence: `src/components/ContactSection.tsx`)
- Music player → Browser audio: uses audio context
- Shared algorithms → Domain types: uses form types (evidence: `src/utils/engine.ts`)
- Contact form → Domain types: uses form type (evidence: `src/components/ContactSection.tsx`)