# pruthvimax/dyanamic_web_works architecture

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

- Interactive diagram: https://gitdiagram.com/pruthvimax/dyanamic_web_works
- Repository: https://github.com/pruthvimax/dyanamic_web_works

## Overview

This repository is a 3D portfolio website with a contact-submission backend. Visitors browse portfolio sections and can submit contact details; the documented backend stores submissions in MongoDB, with email notifications also listed as a capability. The frontend composition and backend routing/persistence are supported by sampled source; the contact component’s implementation and email wiring were not sampled, so those links follow README documentation.

Main entry points: [`src/app.tsx`](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/app.tsx) (Page Composition), [`src/components/contact.tsx`](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/contact.tsx) (Contact Form), [`src/constants/index.ts`](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/constants/index.ts) (Portfolio Content), [`src/components/canvas/index.ts`](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/index.ts) (Canvas Exports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio UI"]
  node_react_entry["React Entry<br/>[main.tsx]"]
  node_app["Page Composition<br/>[app.tsx]"]
  node_navbar["Navigation<br/>[navbar.tsx]"]
  node_hero["Hero Section<br/>[hero.tsx]"]
  node_about["About Section<br/>[about.tsx]"]
  node_experience["Experience Timeline<br/>[experience.tsx]"]
  node_tech["Technology Showcase<br/>[tech.tsx]"]
  node_works["Work Showcase<br/>[works.tsx]"]
  node_feedbacks["Testimonials<br/>[feedbacks.tsx]"]
  node_banner["Banner<br/>[banner.tsx]"]
  node_footer["Footer<br/>[footer.tsx]"]
  node_content_data["Portfolio Content<br/>[index.ts]"]
end

subgraph group_visuals["3D Visuals"]
  node_canvas_index["Canvas Exports<br/>[index.ts]"]
  node_computer_canvas["Computer Scene<br/>[computers.tsx]"]
  node_earth_canvas["Earth Scene<br/>[earth.tsx]"]
  node_stars_canvas["Stars Scene<br/>[stars.tsx]"]
  node_ball_canvas["Tech Ball Scene<br/>[ball.tsx]"]
end

subgraph group_contact["Contact Intake"]
  node_contact_form["Contact Form<br/>[contact.tsx]"]
end

subgraph group_backend["Backend Persistence"]
  node_express_server["Express Server<br/>[server.js]"]
  node_contact_routes["Contact Route<br/>[contactRoutes.js]"]
  node_contact_model["Contact Model<br/>[Contact.js]"]
end

node_visitor(("Visitor"))
node_mongo[("MongoDB Atlas")]
node_emailjs["EmailJS"]

node_visitor -->|"opens portfolio"| node_react_entry
node_react_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_banner
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_tech
node_app -->|"renders"| node_works
node_app -->|"renders"| node_feedbacks
node_app -->|"renders"| node_contact_form
node_app -->|"renders"| node_footer
node_navbar -->|"reads links"| node_content_data
node_experience -->|"reads entries"| node_content_data
node_tech -->|"reads technologies"| node_content_data
node_works -->|"reads projects"| node_content_data
node_feedbacks -->|"reads testimonials"| node_content_data
node_hero -->|"renders scene"| node_computer_canvas
node_tech -->|"renders scene"| node_ball_canvas
node_contact_form -->|"renders scene"| node_earth_canvas
node_app -->|"renders scene"| node_stars_canvas
node_canvas_index -->|"exports"| node_computer_canvas
node_canvas_index -->|"exports"| node_earth_canvas
node_canvas_index -->|"exports"| node_stars_canvas
node_canvas_index -->|"exports"| node_ball_canvas
node_visitor -->|"submits details"| node_contact_form
node_contact_form -->|"posts contact"| node_contact_routes
node_express_server -->|"mounts route"| node_contact_routes
node_contact_routes -->|"saves contact"| node_contact_model
node_express_server -->|"connects"| node_mongo
node_contact_model -->|"persists records"| node_mongo
node_contact_form -.->|"sends notification"| node_emailjs

click node_react_entry "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/main.tsx"
click node_app "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/app.tsx"
click node_navbar "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/navbar.tsx"
click node_hero "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/hero.tsx"
click node_about "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/about.tsx"
click node_experience "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/experience.tsx"
click node_tech "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/tech.tsx"
click node_works "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/works.tsx"
click node_feedbacks "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/feedbacks.tsx"
click node_banner "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/banner.tsx"
click node_footer "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/footer.tsx"
click node_content_data "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/constants/index.ts"
click node_canvas_index "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/index.ts"
click node_computer_canvas "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/computers.tsx"
click node_earth_canvas "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/earth.tsx"
click node_stars_canvas "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/stars.tsx"
click node_ball_canvas "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/ball.tsx"
click node_contact_form "https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/contact.tsx"
click node_express_server "https://github.com/pruthvimax/dyanamic_web_works/blob/main/backend/server.js"
click node_contact_routes "https://github.com/pruthvimax/dyanamic_web_works/blob/main/backend/routes/contactRoutes.js"
click node_contact_model "https://github.com/pruthvimax/dyanamic_web_works/blob/main/backend/models/Contact.js"

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_react_entry,node_app,node_navbar,node_hero,node_about,node_experience,node_tech,node_works,node_feedbacks,node_banner,node_footer,node_content_data toneBlue
class node_canvas_index,node_computer_canvas,node_earth_canvas,node_stars_canvas,node_ball_canvas,node_mongo toneAmber
class node_contact_form toneMint
class node_express_server,node_contact_routes,node_contact_model toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Portfolio UI

- [React Entry](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/main.tsx): `src/main.tsx`
- [Page Composition](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/app.tsx): `src/app.tsx`
- [Navigation](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/navbar.tsx): `src/components/navbar.tsx`
- [Hero Section](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/hero.tsx): `src/components/hero.tsx`
- [About Section](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/about.tsx): `src/components/about.tsx`
- [Experience Timeline](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/experience.tsx): `src/components/experience.tsx`
- [Technology Showcase](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/tech.tsx): `src/components/tech.tsx`
- [Work Showcase](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/works.tsx): `src/components/works.tsx`
- [Testimonials](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/feedbacks.tsx): `src/components/feedbacks.tsx`
- [Banner](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/banner.tsx): `src/components/banner.tsx`
- [Footer](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/footer.tsx): `src/components/footer.tsx`
- [Portfolio Content](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/constants/index.ts): `src/constants/index.ts`

### 3D Visuals

- [Canvas Exports](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/index.ts): `src/components/canvas/index.ts`
- [Computer Scene](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/computers.tsx): `src/components/canvas/computers.tsx`
- [Earth Scene](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/earth.tsx): `src/components/canvas/earth.tsx`
- [Stars Scene](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/stars.tsx): `src/components/canvas/stars.tsx`
- [Tech Ball Scene](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/canvas/ball.tsx): `src/components/canvas/ball.tsx`

### Contact Intake

- [Contact Form](https://github.com/pruthvimax/dyanamic_web_works/blob/main/src/components/contact.tsx): `src/components/contact.tsx`

### Backend Persistence

- [Express Server](https://github.com/pruthvimax/dyanamic_web_works/blob/main/backend/server.js): `backend/server.js`
- [Contact Route](https://github.com/pruthvimax/dyanamic_web_works/blob/main/backend/routes/contactRoutes.js): `backend/routes/contactRoutes.js`
- [Contact Model](https://github.com/pruthvimax/dyanamic_web_works/blob/main/backend/models/Contact.js): `backend/models/Contact.js`

### Other components

- **Visitor**
- **MongoDB Atlas**
- **EmailJS**

## Connections

- Visitor → React Entry: opens portfolio
- React Entry → Page Composition: renders
- Page Composition → Navigation: renders
- Page Composition → Banner: renders
- Page Composition → Hero Section: renders
- Page Composition → About Section: renders
- Page Composition → Experience Timeline: renders
- Page Composition → Technology Showcase: renders
- Page Composition → Work Showcase: renders
- Page Composition → Testimonials: renders
- Page Composition → Contact Form: renders
- Page Composition → Footer: renders
- Navigation → Portfolio Content: reads links
- Experience Timeline → Portfolio Content: reads entries
- Technology Showcase → Portfolio Content: reads technologies
- Work Showcase → Portfolio Content: reads projects
- Testimonials → Portfolio Content: reads testimonials
- Hero Section → Computer Scene: renders scene
- Technology Showcase → Tech Ball Scene: renders scene
- Contact Form → Earth Scene: renders scene
- Page Composition → Stars Scene: renders scene
- Canvas Exports → Computer Scene: exports
- Canvas Exports → Earth Scene: exports
- Canvas Exports → Stars Scene: exports
- Canvas Exports → Tech Ball Scene: exports
- Visitor → Contact Form: submits details
- Contact Form → Contact Route: posts contact
- Express Server → Contact Route: mounts route
- Contact Route → Contact Model: saves contact
- Express Server → MongoDB Atlas: connects
- Contact Model → MongoDB Atlas: persists records
- Contact Form → EmailJS: sends notification