# mohd-azim/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/mohd-azim/portfolio
- Repository: https://github.com/mohd-azim/portfolio

## Overview

This is a React portfolio site presenting an engineer’s profile, skills, career, projects, system-design demonstrations, articles, and contact options. A visitor loads the app and browses its composed sections; the hero also runs an interactive terminal, while the chatbot responds from local data and the contact form posts to an external endpoint. Source evidence establishes the app’s composition and several data dependencies; unsampled components are included as capabilities, but their internal behavior and connections are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/App.jsx) (Page composition), [`src/data/portfolio.js`](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/portfolio.js) (Portfolio content), [`src/components/Contact.jsx`](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Contact.jsx) (Contact form), [`src/main.jsx`](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/main.jsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App composition"]
  node_main["React entry<br/>[main.jsx]"]
  node_app_component["Page composition<br/>[App.jsx]"]
end

subgraph group_profile["Profile sections"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Hero profile<br/>[Hero.jsx]"]
  node_about["About section<br/>[About.jsx]"]
  node_skills["Skills section<br/>[Skills.jsx]"]
  node_experience["Experience section<br/>[Experience.jsx]"]
  node_projects["Projects section<br/>[Projects.jsx]"]
  node_education["Education section<br/>[Education.jsx]"]
  node_contact["Contact form<br/>[Contact.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_interactive["Interactive features"]
  node_terminal["Interactive terminal"]
  node_system_design["System design demos<br/>[SystemDesign.jsx]"]
  node_chatbot["Portfolio chatbot<br/>[Chatbot.jsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.jsx]"]
  node_particles["Particle background"]
end

subgraph group_content["Content and data"]
  node_blog["Article carousel<br/>[Blog.jsx]"]
  node_portfolio_data["Portfolio content<br/>[portfolio.js]"]
  node_blog_data["Article index<br/>[blog.json]"]
  node_chatbot_data["Chatbot responses<br/>[chatbot-data.json]"]
end

node_visitor(("Visitor"))
node_contact_service{{"Contact endpoint"}}

node_visitor -->|"opens site"| node_main
node_main -->|"renders app"| node_app_component
node_app_component -->|"renders"| node_navbar
node_app_component -->|"renders"| node_hero
node_app_component -->|"renders"| node_about
node_app_component -->|"renders"| node_skills
node_app_component -->|"renders"| node_experience
node_app_component -->|"renders"| node_projects
node_app_component -->|"renders"| node_education
node_app_component -->|"renders"| node_contact
node_app_component -->|"renders"| node_footer
node_app_component -->|"renders"| node_terminal
node_app_component -->|"renders"| node_system_design
node_app_component -->|"renders"| node_chatbot
node_app_component -->|"renders"| node_cursor
node_app_component -->|"renders"| node_particles
node_app_component -->|"renders"| node_blog
node_hero -->|"renders"| node_terminal
node_about -->|"reads profile"| node_portfolio_data
node_navbar -->|"reads profile"| node_portfolio_data
node_skills -->|"reads profile"| node_portfolio_data
node_experience -->|"reads profile"| node_portfolio_data
node_projects -->|"reads projects"| node_portfolio_data
node_education -->|"reads profile"| node_portfolio_data
node_footer -->|"reads profile"| node_portfolio_data
node_contact -->|"reads contact details"| node_portfolio_data
node_blog -->|"reads articles"| node_blog_data
node_chatbot -->|"reads responses"| node_chatbot_data
node_contact -->|"posts message"| node_contact_service

click node_main "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/main.jsx"
click node_app_component "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/App.jsx"
click node_navbar "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Navbar.jsx"
click node_hero "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Hero.jsx"
click node_about "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/About.jsx"
click node_skills "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Skills.jsx"
click node_experience "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Experience.jsx"
click node_projects "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Projects.jsx"
click node_education "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Education.jsx"
click node_contact "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Contact.jsx"
click node_footer "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Footer.jsx"
click node_terminal "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/InteractiveTerminal.jsx"
click node_system_design "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/SystemDesign.jsx"
click node_chatbot "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Chatbot.jsx"
click node_cursor "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/CustomCursor.jsx"
click node_particles "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/ParticleBackground.jsx"
click node_blog "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Blog.jsx"
click node_portfolio_data "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/portfolio.js"
click node_blog_data "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/blog.json"
click node_chatbot_data "https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/chatbot-data.json"

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_main,node_app_component toneBlue
class node_navbar,node_hero,node_about,node_skills,node_experience,node_projects,node_education,node_contact,node_footer toneAmber
class node_terminal,node_system_design,node_chatbot,node_cursor,node_particles toneMint
class node_blog,node_portfolio_data,node_blog_data,node_chatbot_data toneRose
class node_visitor,node_contact_service toneIndigo
```

## Components

### App composition

- [React entry](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/main.jsx): `src/main.jsx`
- [Page composition](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/App.jsx): `src/App.jsx`

### Profile sections

- [Navigation](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Hero profile](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About section](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/About.jsx): `src/components/About.jsx`
- [Skills section](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Experience section](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Projects section](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Education section](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Education.jsx): `src/components/Education.jsx`
- [Contact form](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Footer](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Footer.jsx): `src/components/Footer.jsx`

### Interactive features

- [Interactive terminal](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/InteractiveTerminal.jsx): `src/components/InteractiveTerminal.jsx`
- [System design demos](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/SystemDesign.jsx): `src/components/SystemDesign.jsx`
- [Portfolio chatbot](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Chatbot.jsx): `src/components/Chatbot.jsx`
- [Custom cursor](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/CustomCursor.jsx): `src/components/CustomCursor.jsx`
- [Particle background](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/ParticleBackground.jsx): `src/components/ParticleBackground.jsx`

### Content and data

- [Article carousel](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/components/Blog.jsx): `src/components/Blog.jsx`
- [Portfolio content](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/portfolio.js): `src/data/portfolio.js`
- [Article index](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/blog.json): `src/data/blog.json`
- [Chatbot responses](https://github.com/mohd-azim/portfolio/blob/portfolio_test/src/data/chatbot-data.json): `src/data/chatbot-data.json`

### Other components

- **Visitor**
- **Contact endpoint**

## Connections

- Visitor → React entry: opens site (evidence: `src/main.jsx`)
- React entry → Page composition: renders app (evidence: `src/main.jsx`)
- Page composition → Navigation: renders (evidence: `src/App.jsx`)
- Page composition → Hero profile: renders (evidence: `src/App.jsx`)
- Page composition → About section: renders (evidence: `src/App.jsx`)
- Page composition → Skills section: renders (evidence: `src/App.jsx`)
- Page composition → Experience section: renders (evidence: `src/App.jsx`)
- Page composition → Projects section: renders (evidence: `src/App.jsx`)
- Page composition → Education section: renders (evidence: `src/App.jsx`)
- Page composition → Contact form: renders (evidence: `src/App.jsx`)
- Page composition → Footer: renders (evidence: `src/App.jsx`)
- Page composition → Interactive terminal: renders (evidence: `src/App.jsx`)
- Page composition → System design demos: renders (evidence: `src/App.jsx`)
- Page composition → Portfolio chatbot: renders (evidence: `src/App.jsx`)
- Page composition → Custom cursor: renders (evidence: `src/App.jsx`)
- Page composition → Particle background: renders (evidence: `src/App.jsx`)
- Page composition → Article carousel: renders (evidence: `src/App.jsx`)
- Hero profile → Interactive terminal: renders (evidence: `src/components/Hero.jsx`)
- About section → Portfolio content: reads profile (evidence: `src/components/About.jsx`)
- Navigation → Portfolio content: reads profile (evidence: `src/components/Navbar.jsx`)
- Skills section → Portfolio content: reads profile (evidence: `src/components/Skills.jsx`)
- Experience section → Portfolio content: reads profile (evidence: `src/components/Experience.jsx`)
- Projects section → Portfolio content: reads projects (evidence: `src/components/Projects.jsx`)
- Education section → Portfolio content: reads profile (evidence: `src/components/Education.jsx`)
- Footer → Portfolio content: reads profile (evidence: `src/components/Footer.jsx`)
- Contact form → Portfolio content: reads contact details (evidence: `src/components/Contact.jsx`)
- Article carousel → Article index: reads articles (evidence: `src/components/Blog.jsx`)
- Portfolio chatbot → Chatbot responses: reads responses (evidence: `src/components/Chatbot.jsx`)
- Contact form → Contact endpoint: posts message (evidence: `src/components/Contact.jsx`)