How ahmaderan/ahmaderanportfolio works
This is a personal portfolio website. A visitor opens the React app, which routes to the home page and presents portfolio sections; the project section displays project imagery, and the contact form can submit a message to Formspree. The source also includes GitHub API queries, project-list pages and offline caching, though some are inactive or optional in the sampled app. The README only identifies the product as a personal portfolio; unsampled page wiring is represented conservatively.
Main entry points: App.js App and routes · Home.jsx Home page · Projects.jsx Project gallery · apiSlice.js API queries
Components 22
Portfolio experience
- Home page
src/pages/Home.jsx - About
src/components/AboutMe.jsx - Skills
src/components/Skills.jsx - Project gallery
src/components/Projects.jsx - Project card
src/components/ProjectCard.jsx - All projects
src/pages/AllProjects.jsx - Contact section
src/components/Contact.jsx - Contact form
src/components/ContactForm.jsx - Navigation
src/components/NavBar.jsx - Footer
src/components/Footer.jsx
Portfolio data
- Portfolio config
src/config.js - Project state
src/app/projectsSlice.js - API queries
src/app/apiSlice.js - Redux store
src/app/store.js - Static portfolio assets
public
App runtime
- App and routes
src/App.js - Theme and requests
src/utils.js - Worker registration
src/serviceWorkerRegistration.js - Offline cache worker
src/service-worker.js
Other components
- Visitor
- GitHub API
- Formspree
Connections 24
- Visitor → App and routes: opens
- App and routes → Home page: routes
- App and routes → Navigation: renders
- App and routes → Footer: renders
- App and routes → Redux store: reads state
- App and routes → Theme and requests: sets theme
- Home page → About: presents
- Home page → Skills: presents
- Home page → Project gallery: presents
- Home page → Contact section: presents
- Project gallery → Portfolio config: reads gallery data
- Project gallery → API queries: queries projects
- Project gallery → Project state: reads projects
- All projects → Project state: reads projects
- All projects → API queries: queries projects
- All projects → Project card: renders
- Contact section → Contact form: presents
- Contact form → Portfolio config: reads endpoint
- Contact form → Theme and requests: posts message
- Theme and requests → Formspree: submits
- API queries → Portfolio config: reads username
- API queries → GitHub API: requests profile and repos
- Worker registration → Offline cache worker: registers
- Offline cache worker → Static portfolio assets: precaches and caches