How oussamajdig7/portfolio works
This is a React portfolio site presenting a developer’s profile, skills, projects, career timeline, and contact options. A visitor enters through the routed app, views the home hero, and can navigate to portfolio pages or submit a contact form; the form validates input and sends it through EmailJS. Shared presentation includes navigation, motion, theme, and audio behavior. The README documents all six content areas, while sampled code confirms routing, the home hero, contact submission, and theme/audio state; wiring inside unsampled pages and Layout is therefore not shown.
Main entry points: App.jsx Route app · ContactSection.jsx Contact form · Home.jsx Home page · HeroSection.jsx Hero section
Components 22
Routing and pages
- Route app
src/App.jsx - Home page
src/pages/Home.jsx - About page
src/pages/About.jsx - Skills page
src/pages/Skills.jsx - Projects page
src/pages/Projects.jsx - Timeline page
src/pages/Timeline.jsx - Contact page
src/pages/Contact.jsx
Portfolio content
- Hero section
src/components/sections/HeroSection.jsx - About section
src/components/sections/AboutSection.jsx - Skills section
src/components/sections/SkillsSection.jsx - Projects section
src/components/sections/ProjectsSection.jsx - Timeline section
src/components/sections/TimelineSection.jsx - Portfolio data
src/data/portfolio.js
Shared experience
- Site layout
src/components/site/Layout.jsx - Navigation
src/components/site/Navbar.jsx - Theme state
src/hooks/useTheme.js - Audio state
src/hooks/useAudio.js - Sound manager
src/components/site/SoundManager.jsx - Browser storage
Contact
- Contact form
src/components/sections/ContactSection.jsx
Other components
- Visitor
- EmailJS service
Connections 15
- Visitor → Route app: opens
- Route app → Site layout: wraps routes
- Route app → Home page: routes to
- Route app → About page: routes to
- Route app → Skills page: routes to
- Route app → Projects page: routes to
- Route app → Timeline page: routes to
- Route app → Contact page: routes to
- Home page → Hero section: renders
- Hero section → Portfolio data: reads profile
- Contact form → Portfolio data: reads socials
- Contact form → EmailJS service: sends message
- Theme state → Browser storage: reads and writes
- Sound manager → Audio state: reads mute state
- Navigation → Audio state: uses mute controls