How ladunjexa/reactjs18-3d-portfolio works
This repository is a responsive 3D portfolio website. A visitor opens the React app and browses its profile, experience, skills, project, testimonial, and contact sections; the contact form sends a message through EmailJS. The app also includes interactive 3D canvas components and bundled scene assets. The README documents these capabilities, but only selected source files were sampled, so links between unsampled sections and their data or visual components are omitted where wiring could not be confirmed.
Main entry points: App.tsx Portfolio App · Contact.tsx Contact Form · index.ts Canvas Exports · main.tsx React Entry
Components 23
Application
- React Entry
src/main.tsx - Portfolio App
src/App.tsx
Portfolio Sections
- Navigation
src/components/layout/Navbar.tsx - Hero Section
src/components/sections/Hero.tsx - About Section
src/components/sections/About.tsx - Experience Section
src/components/sections/Experience.tsx - Technology Section
src/components/sections/Tech.tsx - Projects Section
src/components/sections/Works.tsx - Testimonials Section
src/components/sections/Feedbacks.tsx - Contact Form
src/components/sections/Contact.tsx
3D Visuals
- Canvas Exports
src/components/canvas/index.ts - Computer Canvas
src/components/canvas/Computers.tsx - Earth Canvas
src/components/canvas/Earth.tsx - Ball Canvas
src/components/canvas/Ball.tsx - Stars Canvas
src/components/canvas/Stars.tsx - Desktop Scene
public/desktop_pc/scene.gltf - Planet Scene
public/planet/scene.gltf
Portfolio Content
- Portfolio Data
src/constants/index.ts - Site Configuration
src/constants/config.ts - Section Header
src/components/atoms/Header.tsx - Motion Variants
src/utils/motion.ts
Other components
- Visitor
- EmailJS
Connections 23
- Visitor → React Entry: opens site
- React Entry → Portfolio App: renders
- Portfolio App → Navigation: renders
- Portfolio App → Hero Section: renders
- Portfolio App → About Section: renders
- Portfolio App → Experience Section: renders
- Portfolio App → Technology Section: renders
- Portfolio App → Projects Section: renders
- Portfolio App → Testimonials Section: renders
- Portfolio App → Contact Form: renders
- Portfolio App → Stars Canvas: renders
- Contact Form → Earth Canvas: renders
- Contact Form → EmailJS: sends message
- Computer Canvas → Desktop Scene: loads scene
- Navigation → Portfolio Data: reads links
- Portfolio App → Site Configuration: reads title
- Contact Form → Site Configuration: reads settings
- Contact Form → Section Header: renders
- Contact Form → Motion Variants: uses variants
- Canvas Exports → Computer Canvas: exports
- Canvas Exports → Earth Canvas: exports
- Canvas Exports → Ball Canvas: exports
- Canvas Exports → Stars Canvas: exports