How whisperedshadow/portfolio works
This repository is a React personal portfolio: visitors browse Durai Pon Singh’s profile, education, skills and projects, then can contact him or use the chat assistant. The main route flow is browser entry → shared navigation/app shell → route selection → portfolio page; the home page also loads and animates a 3D robot. Contact submission and chatbot replies call external services. The README describes Express, Mailjet and MySQL, but no backend or database implementation appears in the supplied tree, so those are not represented as implemented components.
Main entry points: Routings.jsx Route selector · SEO.jsx SEO metadata · Contact.jsx Contact form · App.jsx React app shell
Components 18
App shell
- React app shell
src/App.jsx - Header navigation
src/Components/header/header.jsx - Route selector
src/Components/Routes/Routings.jsx
Portfolio pages
- Home / 3D hero
src/Components/pages/Home/Home.jsx - About profile
src/Components/pages/About/About.jsx - Education history
src/Components/pages/Education/Education.jsx - Skills catalogue
src/Components/pages/Skills/Skills.jsx - Skill cards
src/Components/pages/Skills/skill/skill.jsx - Projects showcase
src/Components/pages/Projects/Projects.jsx - Project detail
src/Components/pages/Projects/project/Project.jsx
Visitor interaction
- Contact form
src/Components/pages/contact/Contact.jsx - Chat assistant
src/Components/ChatBot.jsx
Page metadata
- SEO metadata
src/Components/SEO/SEO.jsx
Other components
- Visitor
- Browser
- Email backend
- Gemini API
- Robot model
public/robot.glb
Connections 24
- Visitor → Browser: opens portfolio
- Browser → React app shell: renders
- React app shell → Header navigation: renders
- React app shell → Route selector: renders
- Visitor → Header navigation: chooses page
- Header navigation → Route selector: navigates
- Route selector → Home / 3D hero: selects route
- Route selector → About profile: selects route
- Route selector → Education history: selects route
- Route selector → Skills catalogue: selects route
- Route selector → Projects showcase: selects route
- Route selector → Contact form: selects route
- Skills catalogue → Skill cards: renders cards
- Projects showcase → Project detail: renders projects
- Home / 3D hero → Robot model: loads model
- Visitor → Contact form: submits inquiry
- Contact form → Email backend: POSTs email data
- Visitor → Chat assistant: sends message
- Chat assistant → Gemini API: requests reply
- About profile → SEO metadata: sets metadata
- Education history → SEO metadata: sets metadata
- Skills catalogue → SEO metadata: sets metadata
- Projects showcase → SEO metadata: sets metadata
- Contact form → SEO metadata: sets metadata