How sifatahammed/stardex-a-personal-portfolio works
Stardex is a React personal portfolio presenting the developer’s profile, education, skills, experience, and project work, with a contact form and interactive visuals. The visitor enters through the single-page app, explores its sections, and can submit a message through EmailJS. The graph includes the documented skills and project showcases, but their component-to-data wiring is omitted because those component sources were not sampled. Other unsampled section implementations are represented only where the app’s composition supports them.
Main entry points: App.jsx Portfolio app · Contact.jsx Contact form · SectionWrapper.jsx Section animation wrapper · main.jsx React mount
Components 15
App composition
- React mount
src/main.jsx - Portfolio app
src/App.jsx - Navigation
src/components/Navbar.jsx - Section animation wrapper
src/hoc/SectionWrapper.jsx - Motion presets
src/utils/motion.js
Profile and experience
- About and education
src/components/About.jsx - Experience timeline
src/components/Experience.jsx
Skills and projects
- Skills showcase
src/components/Tech.jsx - Project showcase
src/components/Works.jsx - Portfolio content
src/constants/index.js
Contact and visuals
- Contact form
src/components/Contact.jsx - EmailJS delivery
- Star field
src/components/canvas/Stars.jsx - Skill icon rendering
src/components/canvas/Ball.jsx
Other components
- Portfolio visitor
Connections 15
- Portfolio visitor → React mount: opens
- React mount → Portfolio app: renders
- Portfolio app → Navigation: renders
- Portfolio app → About and education: renders
- Portfolio app → Experience timeline: renders
- Portfolio app → Skills showcase: renders
- Portfolio app → Project showcase: renders
- Portfolio app → Contact form: renders
- Portfolio app → Star field: renders
- Portfolio visitor → Navigation: navigates
- Portfolio visitor → Contact form: submits message
- Contact form → EmailJS delivery: sends email
- About and education → Section animation wrapper: wraps section
- Contact form → Section animation wrapper: wraps section
- Section animation wrapper → Motion presets: uses presets