How nasimrifat101/rifolio works
This repository is a React-based personal portfolio. A visitor opens the routed home page, which displays a loading screen before rendering the portfolio sections: hero, profile, project showcase, work process, current activity, contact, and footer. Navigation supports section access, and the contact form submits through EmailJS. The graph follows relationships shown in the excerpts and SOURCE INDEX; unsampled section internals and any unshown integrations are not inferred.
Main entry points: Home.jsx Home composition · FramerMagnetic.jsx Magnetic wrapper · main.jsx React router · Navbar.jsx Navigation
Components 18
Routing and page shell
- React router
src/main.jsx - Main shell
src/Pages/Main/Main.jsx
Portfolio content
- Home composition
src/Pages/Home/Home.jsx - Hero banner
src/Pages/Home/Components/Banner.jsx - About and skills
src/Pages/Home/About.jsx - Project showcase
src/Pages/Home/Works.jsx - Work process
src/Pages/Home/Components/Process.jsx - Additional info
src/Pages/Home/Components/Info.jsx - Current activity
src/Pages/Home/Components/Now.jsx
Interaction and presentation
- Navigation
src/Pages/Home/Components/Navbar.jsx - Loading screen
src/Pages/Home/Components/LoadingScreen.jsx - Custom cursor
src/Pages/Home/Components/CustomCursor.jsx - Magnetic wrapper
src/Pages/Home/Components/FramerMagnetic.jsx - Mouse position hook
src/Pages/Home/Components/useMousePosition.js
Contact and links
- Contact form
src/Pages/Home/ContactForm.jsx - Footer
src/Pages/Home/Components/Footer.jsx - EmailJS service
Other components
- Visitor
Connections 22
- Visitor → React router: opens portfolio
src/main.jsx - React router → Main shell: routes to
src/main.jsx - React router → Home composition: routes to
src/main.jsx - Main shell → Home composition: renders outlet
src/Pages/Main/Main.jsx - Home composition → Loading screen: shows during load
src/Pages/Home/Home.jsx - Home composition → Custom cursor: renders
src/Pages/Home/Home.jsx - Home composition → Navigation: renders
src/Pages/Home/Home.jsx - Home composition → Hero banner: renders
src/Pages/Home/Home.jsx - Home composition → About and skills: renders
src/Pages/Home/Home.jsx - Home composition → Project showcase: renders
src/Pages/Home/Home.jsx - Home composition → Work process: renders
src/Pages/Home/Home.jsx - Home composition → Additional info: renders
src/Pages/Home/Home.jsx - Home composition → Current activity: renders
src/Pages/Home/Home.jsx - Home composition → Contact form: renders
src/Pages/Home/Home.jsx - Home composition → Footer: renders
src/Pages/Home/Home.jsx - Navigation → Contact form: scrolls to
src/Pages/Home/Components/Navbar.jsx - Contact form → EmailJS service: submits form
src/Pages/Home/ContactForm.jsx - Hero banner → Magnetic wrapper: wraps controls
src/Pages/Home/Components/Banner.jsx - About and skills → Magnetic wrapper: uses wrapper
src/Pages/Home/About.jsx - Navigation → Magnetic wrapper: wraps controls
src/Pages/Home/Components/Navbar.jsx - Footer → Magnetic wrapper: uses wrapper
src/Pages/Home/Components/Footer.jsx - Additional info → Mouse position hook: reads position
src/Pages/Home/Components/Info.jsx