How sola-man/my-portfolio works
This is a React portfolio site for presenting the developer, skills, and projects, with contact and resume-download actions. A visitor enters through the application shell, navigates routed pages or the home-page showcase, and can inspect project details or submit a contact message. The graph includes the routed views, shared layout, data-driven showcase, and contact integration. Some modules are represented based on the SOURCE INDEX; unsampled behavior and asset wiring are not inferred.
Main entry points: App.jsx Routes and shell · Home.jsx Home page · Contact.jsx Contact form · developerData.js Developer profile data
Components 20
Application shell
- App entry
src/main.jsx - Routes and shell
src/App.jsx - Home page
src/pages/Home.jsx - Projects page
src/pages/Projects.jsx - Project detail
src/pages/ProjectDetail.jsx - About page
src/pages/About.jsx - Contact page
src/pages/Contact.jsx
Portfolio content
- Hero section
src/components/sections/Hero.jsx - Skills section
src/components/sections/Skills.jsx - Project gallery
src/components/sections/Projects.jsx - Contact form
src/components/sections/Contact.jsx - Developer profile data
src/data/developerData.js - Project catalogue
src/data/projectsData.js - Skills catalogue
src/data/skillsData.js
Shared components
- Header navigation
src/components/layout/Header.jsx - Footer
src/components/layout/Footer.jsx - Theme toggle
src/components/layout/ThemeToggle.jsx - Resume download
src/utils/helpers.js
Other components
- Visitor
- EmailJS
Connections 27
- Visitor → App entry: opens
src/main.jsx - App entry → Routes and shell: renders
src/main.jsx - Routes and shell → Header navigation: renders
src/App.jsx - Routes and shell → Footer: renders
src/App.jsx - Routes and shell → Home page: routes to
src/App.jsx - Routes and shell → Projects page: routes to
src/App.jsx - Routes and shell → Project detail: routes to
src/App.jsx - Routes and shell → About page: routes to
src/App.jsx - Routes and shell → Contact page: routes to
src/App.jsx - Header navigation → Theme toggle: renders
src/components/layout/Header.jsx - Header navigation → Resume download: calls
src/components/layout/Header.jsx - Home page → Hero section: renders
src/pages/Home.jsx - Home page → Skills section: renders
src/pages/Home.jsx - Home page → Project gallery: renders
src/pages/Home.jsx - Home page → Contact form: renders
src/pages/Home.jsx - Hero section → Developer profile data: reads
src/components/sections/Hero.jsx - Hero section → Resume download: calls
src/components/sections/Hero.jsx - Skills section → Skills catalogue: reads
src/components/sections/Skills.jsx - Project gallery → Project catalogue: reads
src/components/sections/Projects.jsx - Projects page → Project catalogue: reads
src/pages/Projects.jsx - Project detail → Project catalogue: reads
src/pages/ProjectDetail.jsx - About page → Developer profile data: reads
src/pages/About.jsx - Footer → Developer profile data: reads
src/components/layout/Footer.jsx - Contact page → Contact form: renders
src/pages/Contact.jsx - Contact form → Developer profile data: reads
src/components/sections/Contact.jsx - Visitor → Contact form: submits message
src/components/sections/Contact.jsx - Contact form → EmailJS: sends email
src/components/sections/Contact.jsx