# waleedbacha/waleed-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/waleedbacha/waleed-portfolio
- Repository: https://github.com/waleedbacha/waleed-portfolio

## Overview

This is a React portfolio site: a visitor enters the app, browses a single-page profile and work showcase, then can contact or share the portfolio and export a resume. App.js is the composition point for the sampled page sections and interactive features. The README documents additional capabilities, represented by their named component paths; their wiring is not fully verified in the excerpts. No backend or persistent data store is evidenced; theme preference is stored in browser localStorage.

Main entry points: [`src/App.js`](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/App.js) (Page composition), [`src/components/About.jsx`](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/About.jsx) (About and skills), [`src/components/Contact.jsx`](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Contact.jsx) (Contact form), [`src/components/Navbar.jsx`](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Navbar.jsx) (Navigation and theme)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio Sections"]
  node_home["Home intro<br/>[Home.jsx]"]
  node_about["About and skills<br/>[About.jsx]"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_services["Services<br/>[Services.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
end

subgraph group_engagement["Visitor Interactions"]
  node_navbar["Navigation and theme<br/>[Navbar.jsx]"]
  node_visitorcount["Visitor counter"]
  node_share["Copy and share"]
  node_pdf["Resume export<br/>[ExportPDF.jsx]"]
  node_resume["Resume content<br/>[ResumeForPDF.jsx]"]
  node_toast["Toast feedback<br/>[AnimatedToast.jsx]"]
end

subgraph group_visuals["Visual Experience"]
  node_particles["Particle background"]
  node_cursor["Magnetic cursor<br/>[MagneticCursor.jsx]"]
  node_badges["Achievement badges"]
  node_bento["Bento statistics<br/>[BentoGrid.jsx]"]
  node_marquee["Skills marquee"]
  node_globe["3D globe<br/>[ThreeGlobe.jsx]"]
  node_cube["3D tech cube<br/>[RotatingCube.jsx]"]
  node_preloader["Loading screen<br/>[Preloader.jsx]"]
  node_progress["Scroll progress<br/>[ScrollProgress.jsx]"]
  node_backtotop["Back to top<br/>[BackToTop.jsx]"]
end

subgraph group_runtime["App Runtime"]
  node_entry["React entry<br/>[index.js]"]
  node_app["Page composition<br/>[App.js]"]
end

node_visitor(("Portfolio visitor"))
node_emailjs["EmailJS service"]
node_storage[("Browser localStorage")]

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_home
node_app -->|"renders"| node_about
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_services
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_visitorcount
node_app -->|"renders"| node_share
node_app -->|"renders"| node_pdf
node_app -->|"provides context"| node_toast
node_app -->|"renders"| node_particles
node_app -->|"renders"| node_cursor
node_app -->|"renders"| node_badges
node_app -->|"renders"| node_bento
node_app -->|"renders while loading"| node_preloader
node_app -->|"renders"| node_progress
node_app -->|"renders"| node_backtotop
node_navbar -->|"persists theme"| node_storage
node_app -->|"reads theme"| node_storage
node_about -->|"renders"| node_cube
node_app -->|"renders"| node_globe
node_app -->|"renders"| node_marquee
node_pdf -->|"exports content"| node_resume
node_contact -.->|"sends message"| node_emailjs

click node_entry "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/index.js"
click node_app "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/App.js"
click node_home "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Home.jsx"
click node_about "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/About.jsx"
click node_experience "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Experience.jsx"
click node_projects "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Projects.jsx"
click node_services "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Services.jsx"
click node_testimonials "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Testimonials.jsx"
click node_contact "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Contact.jsx"
click node_navbar "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Navbar.jsx"
click node_visitorcount "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/LiveVisitorCounter.jsx"
click node_share "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/CopyToClipboard.jsx"
click node_pdf "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ExportPDF.jsx"
click node_resume "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ResumeForPDF.jsx"
click node_toast "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/AnimatedToast.jsx"
click node_particles "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ParticleBackground.jsx"
click node_cursor "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/MagneticCursor.jsx"
click node_badges "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/AchievementBadges.jsx"
click node_bento "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/BentoGrid.jsx"
click node_marquee "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/InfiniteMarquee.jsx"
click node_globe "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ThreeGlobe.jsx"
click node_cube "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/RotatingCube.jsx"
click node_preloader "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Preloader.jsx"
click node_progress "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ScrollProgress.jsx"
click node_backtotop "https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/BackToTop.jsx"

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_home,node_about,node_experience,node_projects,node_services,node_testimonials,node_contact toneBlue
class node_navbar,node_visitorcount,node_share,node_pdf,node_resume,node_toast,node_storage toneAmber
class node_particles,node_cursor,node_badges,node_bento,node_marquee,node_globe,node_cube,node_preloader,node_progress,node_backtotop toneMint
class node_entry,node_app toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### Portfolio Sections

- [Home intro](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Home.jsx): `src/components/Home.jsx`
- [About and skills](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Experience](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Projects](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Services](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Services.jsx): `src/components/Services.jsx`
- [Testimonials](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Testimonials.jsx): `src/components/Testimonials.jsx`
- [Contact form](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Visitor Interactions

- [Navigation and theme](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Visitor counter](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/LiveVisitorCounter.jsx): `src/components/LiveVisitorCounter.jsx`
- [Copy and share](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/CopyToClipboard.jsx): `src/components/CopyToClipboard.jsx`
- [Resume export](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ExportPDF.jsx): `src/components/ExportPDF.jsx`
- [Resume content](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ResumeForPDF.jsx): `src/components/ResumeForPDF.jsx`
- [Toast feedback](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/AnimatedToast.jsx): `src/components/AnimatedToast.jsx`

### Visual Experience

- [Particle background](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ParticleBackground.jsx): `src/components/ParticleBackground.jsx`
- [Magnetic cursor](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/MagneticCursor.jsx): `src/components/MagneticCursor.jsx`
- [Achievement badges](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/AchievementBadges.jsx): `src/components/AchievementBadges.jsx`
- [Bento statistics](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/BentoGrid.jsx): `src/components/BentoGrid.jsx`
- [Skills marquee](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/InfiniteMarquee.jsx): `src/components/InfiniteMarquee.jsx`
- [3D globe](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ThreeGlobe.jsx): `src/components/ThreeGlobe.jsx`
- [3D tech cube](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/RotatingCube.jsx): `src/components/RotatingCube.jsx`
- [Loading screen](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/Preloader.jsx): `src/components/Preloader.jsx`
- [Scroll progress](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/ScrollProgress.jsx): `src/components/ScrollProgress.jsx`
- [Back to top](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/components/BackToTop.jsx): `src/components/BackToTop.jsx`

### App Runtime

- [React entry](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/index.js): `src/index.js`
- [Page composition](https://github.com/waleedbacha/waleed-portfolio/blob/main/src/App.js): `src/App.js`

### Other components

- **Portfolio visitor**
- **EmailJS service**
- **Browser localStorage**

## Connections

- Portfolio visitor → React entry: opens site
- React entry → Page composition: renders
- Page composition → Home intro: renders
- Page composition → About and skills: renders
- Page composition → Experience: renders
- Page composition → Projects: renders
- Page composition → Services: renders
- Page composition → Testimonials: renders
- Page composition → Contact form: renders
- Page composition → Navigation and theme: renders
- Page composition → Visitor counter: renders
- Page composition → Copy and share: renders
- Page composition → Resume export: renders
- Page composition → Toast feedback: provides context
- Page composition → Particle background: renders
- Page composition → Magnetic cursor: renders
- Page composition → Achievement badges: renders
- Page composition → Bento statistics: renders
- Page composition → Loading screen: renders while loading
- Page composition → Scroll progress: renders
- Page composition → Back to top: renders
- Navigation and theme → Browser localStorage: persists theme
- Page composition → Browser localStorage: reads theme
- About and skills → 3D tech cube: renders
- Page composition → 3D globe: renders
- Page composition → Skills marquee: renders
- Resume export → Resume content: exports content
- Contact form → EmailJS service: sends message