# farhanahmedkhattak/university-project architecture

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

- Interactive diagram: https://gitdiagram.com/farhanahmedkhattak/university-project
- Repository: https://github.com/farhanahmedkhattak/university-project

## Overview

This repository is a React website presenting Vertex Technology and its research and technology capabilities. A visitor enters the app, navigates through the shared navbar, and reaches pages for company information, research, AI, software development, or IoT. The sampled source confirms route composition and the About page’s markup and animation setup; other page internals are only represented as documented by the tree and visible excerpts, so their internal wiring is not inferred.

Main entry points: [`UniversityProject/src/App.jsx`](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/App.jsx) (App Router), [`UniversityProject/src/pages/AboutUs/AboutPage.jsx`](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/AboutUs/AboutPage.jsx) (About Page), [`UniversityProject/src/main.jsx`](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/main.jsx) (React Entry), [`UniversityProject/src/features/about/aboutTemplate.js`](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutTemplate.js) (About Markup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Shell"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_app_router["App Router<br/>[App.jsx]"]
  node_navbar["Site Navigation<br/>[Navbar.jsx]"]
end

subgraph group_company["Company &amp; Research"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_about["About Page<br/>[AboutPage.jsx]"]
  node_research["Research Page<br/>[Research.jsx]"]
end

subgraph group_capabilities["Technology Capabilities"]
  node_ai["AI Services<br/>[Ai.jsx]"]
  node_development["Development Team<br/>[Development.jsx]"]
  node_iot["IoT Projects<br/>[IoT.jsx]"]
end

subgraph group_about_impl["About Rendering"]
  node_about_markup["About Markup<br/>[aboutTemplate.js]"]
  node_about_data["About Content<br/>[aboutData.js]"]
  node_about_motion["About Animations<br/>[aboutAnimations.js]"]
end

node_visitor(("Visitor"))
node_browser(("Web Browser"))

node_visitor -->|"opens site"| node_browser
node_browser -->|"loads app"| node_entry
node_entry -->|"renders"| node_app_router
node_app_router -->|"renders"| node_navbar
node_app_router -->|"routes to /"| node_home
node_app_router -->|"routes to /about"| node_about
node_app_router -->|"routes to /research"| node_research
node_app_router -->|"routes to /ai"| node_ai
node_app_router -->|"routes to /development"| node_development
node_app_router -->|"routes to /iot"| node_iot
node_visitor -->|"selects page"| node_navbar
node_about -->|"renders markup"| node_about_markup
node_about -->|"initializes motion"| node_about_motion
node_about_markup -->|"uses content"| node_about_data

click node_entry "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/main.jsx"
click node_app_router "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/App.jsx"
click node_navbar "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/components/Navbar.jsx"
click node_home "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/HOME/Home.jsx"
click node_about "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/AboutUs/AboutPage.jsx"
click node_research "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/Research/Research.jsx"
click node_about_markup "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutTemplate.js"
click node_about_data "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutData.js"
click node_about_motion "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutAnimations.js"
click node_ai "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/AI/Ai.jsx"
click node_development "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/Development/Development.jsx"
click node_iot "https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/IOT/IoT.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_entry,node_app_router,node_navbar,node_browser toneBlue
class node_home,node_about,node_research toneAmber
class node_ai,node_development,node_iot toneMint
class node_about_markup,node_about_data,node_about_motion toneRose
class node_visitor toneIndigo
```

## Components

### App Shell

- [React Entry](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/main.jsx): `UniversityProject/src/main.jsx`
- [App Router](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/App.jsx): `UniversityProject/src/App.jsx`
- [Site Navigation](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/components/Navbar.jsx): `UniversityProject/src/components/Navbar.jsx`

### Company & Research

- [Home Page](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/HOME/Home.jsx): `UniversityProject/src/pages/HOME/Home.jsx`
- [About Page](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/AboutUs/AboutPage.jsx): `UniversityProject/src/pages/AboutUs/AboutPage.jsx`
- [Research Page](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/Research/Research.jsx): `UniversityProject/src/pages/Research/Research.jsx`

### Technology Capabilities

- [AI Services](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/AI/Ai.jsx): `UniversityProject/src/pages/AI/Ai.jsx`
- [Development Team](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/Development/Development.jsx): `UniversityProject/src/pages/Development/Development.jsx`
- [IoT Projects](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/pages/IOT/IoT.jsx): `UniversityProject/src/pages/IOT/IoT.jsx`

### About Rendering

- [About Markup](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutTemplate.js): `UniversityProject/src/features/about/aboutTemplate.js`
- [About Content](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutData.js): `UniversityProject/src/features/about/aboutData.js`
- [About Animations](https://github.com/farhanahmedkhattak/university-project/blob/main/UniversityProject/src/features/about/aboutAnimations.js): `UniversityProject/src/features/about/aboutAnimations.js`

### Other components

- **Visitor**
- **Web Browser**

## Connections

- Visitor → Web Browser: opens site
- Web Browser → React Entry: loads app
- React Entry → App Router: renders
- App Router → Site Navigation: renders
- App Router → Home Page: routes to /
- App Router → About Page: routes to /about
- App Router → Research Page: routes to /research
- App Router → AI Services: routes to /ai
- App Router → Development Team: routes to /development
- App Router → IoT Projects: routes to /iot
- Visitor → Site Navigation: selects page
- About Page → About Markup: renders markup
- About Page → About Animations: initializes motion
- About Markup → About Content: uses content