# nasimrifat101/rifolio architecture

> Architecture diagram of the GitHub repository nasimrifat101/rifolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nasimrifat101/rifolio
- Repository: https://github.com/nasimrifat101/rifolio

## Overview

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: [`src/Pages/Home/Home.jsx`](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Home.jsx) (Home composition), [`src/Pages/Home/Components/FramerMagnetic.jsx`](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/FramerMagnetic.jsx) (Magnetic wrapper), [`src/main.jsx`](https://github.com/nasimrifat101/rifolio/blob/main/src/main.jsx) (React router), [`src/Pages/Home/Components/Navbar.jsx`](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Navbar.jsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and page shell"]
  node_router["React router<br/>[main.jsx]"]
  node_shell["Main shell<br/>[Main.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home composition<br/>[Home.jsx]"]
  node_banner["Hero banner<br/>[Banner.jsx]"]
  node_about["About and skills<br/>[About.jsx]"]
  node_works["Project showcase<br/>[Works.jsx]"]
  node_process["Work process<br/>[Process.jsx]"]
  node_info["Additional info<br/>[Info.jsx]"]
  node_now["Current activity<br/>[Now.jsx]"]
end

subgraph group_interaction["Interaction and presentation"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_loading["Loading screen<br/>[LoadingScreen.jsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.jsx]"]
  node_magnetic["Magnetic wrapper<br/>[FramerMagnetic.jsx]"]
  node_mouse["Mouse position hook"]
end

subgraph group_contact["Contact and links"]
  node_contact["Contact form<br/>[ContactForm.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_emailjs["EmailJS service"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens portfolio"| node_router
node_router -->|"routes to"| node_shell
node_router -->|"routes to"| node_home
node_shell -->|"renders outlet"| node_home
node_home -->|"shows during load"| node_loading
node_home -->|"renders"| node_cursor
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_banner
node_home -->|"renders"| node_about
node_home -->|"renders"| node_works
node_home -->|"renders"| node_process
node_home -->|"renders"| node_info
node_home -->|"renders"| node_now
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_navbar -->|"scrolls to"| node_contact
node_contact -->|"submits form"| node_emailjs
node_banner -->|"wraps controls"| node_magnetic
node_about -->|"uses wrapper"| node_magnetic
node_navbar -->|"wraps controls"| node_magnetic
node_footer -->|"uses wrapper"| node_magnetic
node_info -->|"reads position"| node_mouse

click node_router "https://github.com/nasimrifat101/rifolio/blob/main/src/main.jsx"
click node_shell "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Main/Main.jsx"
click node_home "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Home.jsx"
click node_navbar "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Navbar.jsx"
click node_banner "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Banner.jsx"
click node_about "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/About.jsx"
click node_works "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Works.jsx"
click node_process "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Process.jsx"
click node_info "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Info.jsx"
click node_now "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Now.jsx"
click node_contact "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/ContactForm.jsx"
click node_footer "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Footer.jsx"
click node_loading "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/LoadingScreen.jsx"
click node_cursor "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/CustomCursor.jsx"
click node_magnetic "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/FramerMagnetic.jsx"
click node_mouse "https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/useMousePosition.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_router,node_shell toneBlue
class node_home,node_banner,node_about,node_works,node_process,node_info,node_now toneAmber
class node_navbar,node_loading,node_cursor,node_magnetic,node_mouse toneMint
class node_contact,node_footer,node_emailjs toneRose
class node_visitor toneIndigo
```

## Components

### Routing and page shell

- [React router](https://github.com/nasimrifat101/rifolio/blob/main/src/main.jsx): `src/main.jsx`
- [Main shell](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Main/Main.jsx): `src/Pages/Main/Main.jsx`

### Portfolio content

- [Home composition](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Home.jsx): `src/Pages/Home/Home.jsx`
- [Hero banner](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Banner.jsx): `src/Pages/Home/Components/Banner.jsx`
- [About and skills](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/About.jsx): `src/Pages/Home/About.jsx`
- [Project showcase](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Works.jsx): `src/Pages/Home/Works.jsx`
- [Work process](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Process.jsx): `src/Pages/Home/Components/Process.jsx`
- [Additional info](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Info.jsx): `src/Pages/Home/Components/Info.jsx`
- [Current activity](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Now.jsx): `src/Pages/Home/Components/Now.jsx`

### Interaction and presentation

- [Navigation](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Navbar.jsx): `src/Pages/Home/Components/Navbar.jsx`
- [Loading screen](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/LoadingScreen.jsx): `src/Pages/Home/Components/LoadingScreen.jsx`
- [Custom cursor](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/CustomCursor.jsx): `src/Pages/Home/Components/CustomCursor.jsx`
- [Magnetic wrapper](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/FramerMagnetic.jsx): `src/Pages/Home/Components/FramerMagnetic.jsx`
- [Mouse position hook](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/useMousePosition.js): `src/Pages/Home/Components/useMousePosition.js`

### Contact and links

- [Contact form](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/ContactForm.jsx): `src/Pages/Home/ContactForm.jsx`
- [Footer](https://github.com/nasimrifat101/rifolio/blob/main/src/Pages/Home/Components/Footer.jsx): `src/Pages/Home/Components/Footer.jsx`
- **EmailJS service**

### Other components

- **Visitor**

## Connections

- Visitor → React router: opens portfolio (evidence: `src/main.jsx`)
- React router → Main shell: routes to (evidence: `src/main.jsx`)
- React router → Home composition: routes to (evidence: `src/main.jsx`)
- Main shell → Home composition: renders outlet (evidence: `src/Pages/Main/Main.jsx`)
- Home composition → Loading screen: shows during load (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Custom cursor: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Navigation: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Hero banner: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → About and skills: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Project showcase: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Work process: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Additional info: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Current activity: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Contact form: renders (evidence: `src/Pages/Home/Home.jsx`)
- Home composition → Footer: renders (evidence: `src/Pages/Home/Home.jsx`)
- Navigation → Contact form: scrolls to (evidence: `src/Pages/Home/Components/Navbar.jsx`)
- Contact form → EmailJS service: submits form (evidence: `src/Pages/Home/ContactForm.jsx`)
- Hero banner → Magnetic wrapper: wraps controls (evidence: `src/Pages/Home/Components/Banner.jsx`)
- About and skills → Magnetic wrapper: uses wrapper (evidence: `src/Pages/Home/About.jsx`)
- Navigation → Magnetic wrapper: wraps controls (evidence: `src/Pages/Home/Components/Navbar.jsx`)
- Footer → Magnetic wrapper: uses wrapper (evidence: `src/Pages/Home/Components/Footer.jsx`)
- Additional info → Mouse position hook: reads position (evidence: `src/Pages/Home/Components/Info.jsx`)