How pruthvimax/dyanamic_web_works works
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: app.tsx Page Composition · contact.tsx Contact Form · constants/index.ts Portfolio Content · canvas/index.ts Canvas Exports
Components 24
Portfolio UI
- React Entry
src/main.tsx - Page Composition
src/app.tsx - Navigation
src/components/navbar.tsx - Hero Section
src/components/hero.tsx - About Section
src/components/about.tsx - Experience Timeline
src/components/experience.tsx - Technology Showcase
src/components/tech.tsx - Work Showcase
src/components/works.tsx - Testimonials
src/components/feedbacks.tsx - Banner
src/components/banner.tsx - Footer
src/components/footer.tsx - Portfolio Content
src/constants/index.ts
3D Visuals
- Canvas Exports
src/components/canvas/index.ts - Computer Scene
src/components/canvas/computers.tsx - Earth Scene
src/components/canvas/earth.tsx - Stars Scene
src/components/canvas/stars.tsx - Tech Ball Scene
src/components/canvas/ball.tsx
Contact Intake
- Contact Form
src/components/contact.tsx
Backend Persistence
- Express Server
backend/server.js - Contact Route
backend/routes/contactRoutes.js - Contact Model
backend/models/Contact.js
Other components
- Visitor
- MongoDB Atlas
- EmailJS
Connections 32
- 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