# abolraj/me-react architecture

> Architecture diagram of the GitHub repository abolraj/me-react, 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/abolraj/me-react
- Repository: https://github.com/abolraj/me-react

## Overview

This is a React-based digital resume and portfolio, with public-facing sections for professional background, projects, testimonials, services, and contact. The user enters through the routed site, browses resume content, and can explore service packages and related detail pages; the service strategy view combines package and item data to show a cost estimate. The graph preserves the README’s major resume capabilities and the documented service routes. Edges are limited to relationships visible in excerpts or the README; unsampled page wiring is not inferred.

Main entry points: [`src/services/packageService.js`](https://github.com/abolraj/me-react/blob/master/src/services/packageService.js) (Package data hooks), [`src/pages/services/ServicesStrategyPage.jsx`](https://github.com/abolraj/me-react/blob/master/src/pages/services/ServicesStrategyPage.jsx) (Pricing strategy), [`src/App.jsx`](https://github.com/abolraj/me-react/blob/master/src/App.jsx) (App shell), [`src/layouts/MainLayout.jsx`](https://github.com/abolraj/me-react/blob/master/src/layouts/MainLayout.jsx) (Site layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["App entry<br/>[main.jsx]"]
  node_app_shell["App shell<br/>[App.jsx]"]
  node_router["Route tree<br/>[index.jsx]"]
  node_layout_route["Layout route"]
  node_site_layout["Site layout<br/>[MainLayout.jsx]"]
  node_header["Header<br/>[Header.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_theme["Theme state<br/>[useTheme.jsx]"]
  node_language["Translations<br/>[i18n.js]"]
end

subgraph group_resume["Resume content"]
  node_hero_about["Intro and about<br/>[Hero.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_experience["Experience<br/>[Experiences.jsx]"]
  node_certifications["Certifications<br/>[Certifications.jsx]"]
  node_portfolio["Portfolio<br/>[Portfolios.jsx]"]
  node_reviews["Reviews<br/>[Reviews.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
end

subgraph group_services["Service exploration"]
  node_services_page["Services overview<br/>[ServicesPage.jsx]"]
  node_strategy_page["Pricing strategy"]
  node_strategy_view["Strategy calculator"]
  node_calculator_page["Service calculator<br/>[CalculatorPage.jsx]"]
  node_contract_page["Service contract<br/>[ContractPage.jsx]"]
  node_service_content["Service components"]
end

subgraph group_data["Service data"]
  node_packages["Package data hooks<br/>[packageService.js]"]
  node_package_items["Package item hooks"]
  node_features["Feature hooks<br/>[featureService.js]"]
end

node_visitor(("Visitor"))

node_entry -->|"renders"| node_app_shell
node_entry -->|"creates router"| node_router
node_app_shell -->|"uses theme"| node_theme
node_app_shell -->|"loads translations"| node_language
node_router -->|"nests routes"| node_layout_route
node_layout_route -->|"renders layout"| node_site_layout
node_site_layout -->|"renders"| node_header
node_site_layout -->|"renders"| node_footer
node_header -->|"uses theme switcher"| node_theme
node_footer -->|"renders plant"| node_service_content
node_services_page -->|"loads popular packages"| node_packages
node_services_page -->|"renders package cards"| node_service_content
node_strategy_page -->|"loads packages"| node_packages
node_strategy_page -->|"loads package items"| node_package_items
node_strategy_page -->|"renders strategy"| node_strategy_view
node_packages -->|"uses item hooks"| node_package_items
node_packages -->|"uses feature hooks"| node_features

click node_entry "https://github.com/abolraj/me-react/blob/master/src/main.jsx"
click node_app_shell "https://github.com/abolraj/me-react/blob/master/src/App.jsx"
click node_router "https://github.com/abolraj/me-react/blob/master/src/router/index.jsx"
click node_layout_route "https://github.com/abolraj/me-react/blob/master/src/router/routes/MainLayoutRoute.jsx"
click node_site_layout "https://github.com/abolraj/me-react/blob/master/src/layouts/MainLayout.jsx"
click node_header "https://github.com/abolraj/me-react/blob/master/src/parts/main/Header.jsx"
click node_footer "https://github.com/abolraj/me-react/blob/master/src/parts/main/Footer.jsx"
click node_hero_about "https://github.com/abolraj/me-react/blob/master/src/components/Hero.jsx"
click node_skills "https://github.com/abolraj/me-react/blob/master/src/components/Skills.jsx"
click node_experience "https://github.com/abolraj/me-react/blob/master/src/components/Experiences.jsx"
click node_certifications "https://github.com/abolraj/me-react/blob/master/src/components/Certifications.jsx"
click node_portfolio "https://github.com/abolraj/me-react/blob/master/src/components/Portfolios.jsx"
click node_reviews "https://github.com/abolraj/me-react/blob/master/src/components/Reviews.jsx"
click node_contact "https://github.com/abolraj/me-react/blob/master/src/components/Contact.jsx"
click node_services_page "https://github.com/abolraj/me-react/blob/master/src/pages/ServicesPage.jsx"
click node_strategy_page "https://github.com/abolraj/me-react/blob/master/src/pages/services/ServicesStrategyPage.jsx"
click node_strategy_view "https://github.com/abolraj/me-react/blob/master/src/components/ServicesStrategy.jsx"
click node_calculator_page "https://github.com/abolraj/me-react/blob/master/src/pages/services/CalculatorPage.jsx"
click node_contract_page "https://github.com/abolraj/me-react/blob/master/src/pages/services/ContractPage.jsx"
click node_service_content "https://github.com/abolraj/me-react/tree/master/src/components"
click node_packages "https://github.com/abolraj/me-react/blob/master/src/services/packageService.js"
click node_package_items "https://github.com/abolraj/me-react/blob/master/src/services/packageItemService.js"
click node_features "https://github.com/abolraj/me-react/blob/master/src/services/featureService.js"
click node_theme "https://github.com/abolraj/me-react/blob/master/src/hooks/useTheme.jsx"
click node_language "https://github.com/abolraj/me-react/blob/master/src/i18n.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_entry,node_app_shell,node_router,node_layout_route,node_site_layout,node_header,node_footer,node_theme,node_language toneBlue
class node_hero_about,node_skills,node_experience,node_certifications,node_portfolio,node_reviews,node_contact toneAmber
class node_services_page,node_strategy_page,node_strategy_view,node_calculator_page,node_contract_page,node_service_content toneMint
class node_packages,node_package_items,node_features toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [App entry](https://github.com/abolraj/me-react/blob/master/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/abolraj/me-react/blob/master/src/App.jsx): `src/App.jsx`
- [Route tree](https://github.com/abolraj/me-react/blob/master/src/router/index.jsx): `src/router/index.jsx`
- [Layout route](https://github.com/abolraj/me-react/blob/master/src/router/routes/MainLayoutRoute.jsx): `src/router/routes/MainLayoutRoute.jsx`
- [Site layout](https://github.com/abolraj/me-react/blob/master/src/layouts/MainLayout.jsx): `src/layouts/MainLayout.jsx`
- [Header](https://github.com/abolraj/me-react/blob/master/src/parts/main/Header.jsx): `src/parts/main/Header.jsx`
- [Footer](https://github.com/abolraj/me-react/blob/master/src/parts/main/Footer.jsx): `src/parts/main/Footer.jsx`
- [Theme state](https://github.com/abolraj/me-react/blob/master/src/hooks/useTheme.jsx): `src/hooks/useTheme.jsx`
- [Translations](https://github.com/abolraj/me-react/blob/master/src/i18n.js): `src/i18n.js`

### Resume content

- [Intro and about](https://github.com/abolraj/me-react/blob/master/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Skills](https://github.com/abolraj/me-react/blob/master/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Experience](https://github.com/abolraj/me-react/blob/master/src/components/Experiences.jsx): `src/components/Experiences.jsx`
- [Certifications](https://github.com/abolraj/me-react/blob/master/src/components/Certifications.jsx): `src/components/Certifications.jsx`
- [Portfolio](https://github.com/abolraj/me-react/blob/master/src/components/Portfolios.jsx): `src/components/Portfolios.jsx`
- [Reviews](https://github.com/abolraj/me-react/blob/master/src/components/Reviews.jsx): `src/components/Reviews.jsx`
- [Contact](https://github.com/abolraj/me-react/blob/master/src/components/Contact.jsx): `src/components/Contact.jsx`

### Service exploration

- [Services overview](https://github.com/abolraj/me-react/blob/master/src/pages/ServicesPage.jsx): `src/pages/ServicesPage.jsx`
- [Pricing strategy](https://github.com/abolraj/me-react/blob/master/src/pages/services/ServicesStrategyPage.jsx): `src/pages/services/ServicesStrategyPage.jsx`
- [Strategy calculator](https://github.com/abolraj/me-react/blob/master/src/components/ServicesStrategy.jsx): `src/components/ServicesStrategy.jsx`
- [Service calculator](https://github.com/abolraj/me-react/blob/master/src/pages/services/CalculatorPage.jsx): `src/pages/services/CalculatorPage.jsx`
- [Service contract](https://github.com/abolraj/me-react/blob/master/src/pages/services/ContractPage.jsx): `src/pages/services/ContractPage.jsx`
- [Service components](https://github.com/abolraj/me-react/tree/master/src/components): `src/components`

### Service data

- [Package data hooks](https://github.com/abolraj/me-react/blob/master/src/services/packageService.js): `src/services/packageService.js`
- [Package item hooks](https://github.com/abolraj/me-react/blob/master/src/services/packageItemService.js): `src/services/packageItemService.js`
- [Feature hooks](https://github.com/abolraj/me-react/blob/master/src/services/featureService.js): `src/services/featureService.js`

### Other components

- **Visitor**

## Connections

- App entry → App shell: renders (evidence: `src/main.jsx`)
- App entry → Route tree: creates router (evidence: `src/main.jsx`)
- App shell → Theme state: uses theme (evidence: `src/App.jsx`)
- App shell → Translations: loads translations (evidence: `src/App.jsx`)
- Route tree → Layout route: nests routes (evidence: `src/router/index.jsx`)
- Layout route → Site layout: renders layout (evidence: `src/router/routes/MainLayoutRoute.jsx`)
- Site layout → Header: renders (evidence: `src/layouts/MainLayout.jsx`)
- Site layout → Footer: renders (evidence: `src/layouts/MainLayout.jsx`)
- Header → Theme state: uses theme switcher (evidence: `src/parts/main/Header.jsx`)
- Footer → Service components: renders plant (evidence: `src/parts/main/Footer.jsx`)
- Services overview → Package data hooks: loads popular packages (evidence: `src/pages/ServicesPage.jsx`)
- Services overview → Service components: renders package cards (evidence: `src/pages/ServicesPage.jsx`)
- Pricing strategy → Package data hooks: loads packages (evidence: `src/pages/services/ServicesStrategyPage.jsx`)
- Pricing strategy → Package item hooks: loads package items (evidence: `src/pages/services/ServicesStrategyPage.jsx`)
- Pricing strategy → Strategy calculator: renders strategy (evidence: `src/pages/services/ServicesStrategyPage.jsx`)
- Package data hooks → Package item hooks: uses item hooks (evidence: `src/services/packageService.js`)
- Package data hooks → Feature hooks: uses feature hooks (evidence: `src/services/packageService.js`)