How heymayur69/3d_portfolio works
This repository is a React portfolio site for an embedded-software engineer. A visitor enters the single-page experience, explores profile, skills, career history and projects, then can submit a contact form; the page also presents 3D visual scenes. The graph separates the page’s content stages from its canvas rendering and shared presentation logic. Evidence is limited to the supplied excerpts and SOURCE INDEX references, so uncertain component-to-canvas usage is not connected.
Main entry points: App.jsx Page Composition · SectionWrapper.jsx Section Wrapper · Contact.jsx Contact Form · index.js Portfolio Content Data
Components 21
Portfolio Experience
- Page Composition
src/App.jsx - Navigation
src/components/Navbar.jsx
Portfolio Content
- Hero Introduction
src/components/Hero.jsx - About Profile
src/components/About.jsx - Career History
src/components/Experience.jsx - Technology Skills
src/components/Tech.jsx - Project Portfolio
src/components/Works.jsx - Testimonials
src/components/Feedbacks.jsx - Contact Form
src/components/Contact.jsx
3D Visuals
- Earth Canvas
src/components/canvas/Earth.jsx - Technology Ball Canvas
src/components/canvas/Ball.jsx - Computer Canvas
src/components/canvas/Computers.jsx - Stars Canvas
src/components/canvas/Stars.jsx - Canvas Loader
src/components/Loader.jsx
Shared Presentation
- Responsive Hook
src/hooks/useResponsive.js - Section Wrapper
src/hoc/SectionWrapper.jsx - Motion Variants
src/utils/motion.js - Style Tokens
src/styles.js - Portfolio Content Data
src/constants/index.js
Other components
- Visitor
- EmailJS Service
Connections 22
- Visitor → Page Composition: opens
- Page Composition → Navigation: renders
src/App.jsx - Page Composition → Hero Introduction: renders
src/App.jsx - Page Composition → About Profile: renders
src/App.jsx - Page Composition → Career History: renders
src/App.jsx - Page Composition → Technology Skills: renders
src/App.jsx - Page Composition → Project Portfolio: renders
src/App.jsx - Page Composition → Testimonials: renders
src/App.jsx - Page Composition → Contact Form: renders
src/App.jsx - Contact Form → EmailJS Service: sends message
src/components/Contact.jsx - Computer Canvas → Canvas Loader: uses fallback
src/components/canvas/Computers.jsx - Computer Canvas → Responsive Hook: reads viewport
src/components/canvas/Computers.jsx - Contact Form → Earth Canvas: renders
src/components/Contact.jsx - About Profile → Portfolio Content Data: reads content
src/components/About.jsx - Career History → Portfolio Content Data: reads content
src/components/Experience.jsx - Technology Skills → Portfolio Content Data: reads content
src/components/Tech.jsx - Project Portfolio → Portfolio Content Data: reads content
src/components/Works.jsx - About Profile → Section Wrapper: wraps section
src/components/About.jsx - Career History → Section Wrapper: wraps section
src/components/Experience.jsx - Contact Form → Section Wrapper: wraps section
src/components/Contact.jsx - Section Wrapper → Motion Variants: uses variants
src/hoc/SectionWrapper.jsx - Section Wrapper → Style Tokens: uses tokens
src/hoc/SectionWrapper.jsx