How abolraj/me-react works
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: packageService.js Package data hooks · ServicesStrategyPage.jsx Pricing strategy · App.jsx App shell · MainLayout.jsx Site layout
Components 26
Application shell
- App entry
src/main.jsx - App shell
src/App.jsx - Route tree
src/router/index.jsx - Layout route
src/router/routes/MainLayoutRoute.jsx - Site layout
src/layouts/MainLayout.jsx - Header
src/parts/main/Header.jsx - Footer
src/parts/main/Footer.jsx - Theme state
src/hooks/useTheme.jsx - Translations
src/i18n.js
Resume content
- Intro and about
src/components/Hero.jsx - Skills
src/components/Skills.jsx - Experience
src/components/Experiences.jsx - Certifications
src/components/Certifications.jsx - Portfolio
src/components/Portfolios.jsx - Reviews
src/components/Reviews.jsx - Contact
src/components/Contact.jsx
Service exploration
- Services overview
src/pages/ServicesPage.jsx - Pricing strategy
src/pages/services/ServicesStrategyPage.jsx - Strategy calculator
src/components/ServicesStrategy.jsx - Service calculator
src/pages/services/CalculatorPage.jsx - Service contract
src/pages/services/ContractPage.jsx - Service components
src/components
Service data
- Package data hooks
src/services/packageService.js - Package item hooks
src/services/packageItemService.js - Feature hooks
src/services/featureService.js
Other components
- Visitor
Connections 17
- App entry → App shell: renders
src/main.jsx - App entry → Route tree: creates router
src/main.jsx - App shell → Theme state: uses theme
src/App.jsx - App shell → Translations: loads translations
src/App.jsx - Route tree → Layout route: nests routes
src/router/index.jsx - Layout route → Site layout: renders layout
src/router/routes/MainLayoutRoute.jsx - Site layout → Header: renders
src/layouts/MainLayout.jsx - Site layout → Footer: renders
src/layouts/MainLayout.jsx - Header → Theme state: uses theme switcher
src/parts/main/Header.jsx - Footer → Service components: renders plant
src/parts/main/Footer.jsx - Services overview → Package data hooks: loads popular packages
src/pages/ServicesPage.jsx - Services overview → Service components: renders package cards
src/pages/ServicesPage.jsx - Pricing strategy → Package data hooks: loads packages
src/pages/services/ServicesStrategyPage.jsx - Pricing strategy → Package item hooks: loads package items
src/pages/services/ServicesStrategyPage.jsx - Pricing strategy → Strategy calculator: renders strategy
src/pages/services/ServicesStrategyPage.jsx - Package data hooks → Package item hooks: uses item hooks
src/services/packageService.js - Package data hooks → Feature hooks: uses feature hooks
src/services/packageService.js