# mzaeemali/portfolio architecture

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

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

## Overview

#### Purpose and runtime
This is a single-page portfolio site built with React, TypeScript, and Vite. The browser entry point is `src/main.tsx`, which mounts the application from `src/App.tsx`. Vite configuration and TypeScript project boundaries are defined in `vite.config.ts`, `tsconfig.app.json`, and `tsconfig.json`.

#### Application routing and page boundary
`src/App.tsx` is the application composition and route-selection boundary. The primary portfolio experience is `src/pages/Home.tsx`; unmatched navigation is handled by `src/pages/NotFound.tsx`. The repository does not show a server-side application layer; rendering is client-side.

#### Portfolio data model
Portfolio content is centralized in `data/portfolio.json` and exposed to React through `lib/portfolio-data.ts`. This separates editable resume/project/service content from presentation components. The expected flow is JSON data → typed/accessor layer → section components in the home page.

#### Home-page composition
`src/pages/Home.tsx` assembles the major landing-page sections. Core content/presentation modules include:
- Hero and primary navigation: `components/hero.tsx`, `components/navigation.tsx`
- Work and professional history: `components/projects.tsx`, `components/experience.tsx`, `components/contracts.tsx`
- Skills and offered capabilities: `components/skills.tsx`, `components/services.tsx`, `components/credentials.tsx`
- Supporting conversion/content sections: `components/contact.tsx`, `components/testimonials.tsx`, `components/faq.tsx`

These components are the main feature boundaries and should remain independently reusable from the page shell.

#### Interaction, animation, and visual systems
Motion behavior is centralized in `lib/motion.ts` and reused by components such as `components/fade-in.tsx` and `components/spotlight-card.tsx`. Visual background/interactive effects are isolated in `components/particle-field.tsx`, `components/web-lines-canvas.tsx`, and `components/git-timeline.tsx`, limiting canvas/effect logic outside content sections. `components/command-palette.tsx`, `components/view-toggle.tsx`, and `components/back-to-top.tsx` provide global navigation or display controls.

#### Styling, UI primitives, and deployment assets
Global styling begins in `src/index.css`; reusable UI primitives currently include `components/ui/button.tsx`. Theme-related behavior is represented by `lib/theme.ts`, while icon mapping is in `lib/tech-icons.ts`. Static SEO assets are served from `public/robots.txt` and `public/sitemap.xml`. `wrangler.jsonc` indicates a Cloudflare Workers/Pages-oriented deployment configuration; `.env.example` defines the environment-variable contract if runtime configuration is needed.

Main entry points: [`src/pages/Home.tsx`](https://github.com/mzaeemali/portfolio/blob/main/src/pages/Home.tsx) (Home Page), [`src/main.tsx`](https://github.com/mzaeemali/portfolio/blob/main/src/main.tsx) (Browser Entry), [`src/App.tsx`](https://github.com/mzaeemali/portfolio/blob/main/src/App.tsx) (App & Route Selection), [`wrangler.jsonc`](https://github.com/mzaeemali/portfolio/blob/main/wrangler.jsonc) (Cloudflare Deployment)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Client Runtime"]
  node_entry["Browser Entry<br/>React entry<br/>[main.tsx]"]
  node_app["App &amp; Route Selection<br/>application shell<br/>[App.tsx]"]
  node_notfound["Not Found Page<br/>fallback page<br/>[NotFound.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_portfoliojson[("Portfolio JSON<br/>content data<br/>[portfolio.json]")]
  node_portfoliodata["Typed Portfolio Access<br/>data accessor<br/>[portfolio-data.ts]"]
end

subgraph group_home["Home Experience"]
  node_homepage["Home Page<br/>page composition<br/>[Home.tsx]"]
  node_sections["Portfolio Sections<br/>content components<br/>[projects.tsx]"]
  node_hero["Hero &amp; Navigation<br/>landing components<br/>[hero.tsx]"]
end

subgraph group_shared["Shared UI Systems"]
  node_globalcontrols["Global Controls<br/>interaction components"]
  node_motion["Motion System<br/>animation library<br/>[motion.ts]"]
  node_animatedui["Animated UI<br/>motion components<br/>[fade-in.tsx]"]
  node_visualeffects["Visual Effects<br/>canvas/effect components<br/>[particle-field.tsx]"]
  node_theme["Theme &amp; Icons<br/>visual utilities<br/>[theme.ts]"]
  node_styles["Global Styles<br/>stylesheet<br/>[index.css]"]
  node_button["Button Primitive<br/>UI primitive<br/>[button.tsx]"]
end

subgraph group_delivery["Build &amp; Delivery"]
  node_vite{{"Vite Build<br/>build config<br/>[vite.config.ts]"}}
  node_tsconfig["TypeScript Projects<br/>compiler config<br/>[tsconfig.json]"]
  node_wrangler{{"Cloudflare Deployment<br/>deployment config<br/>[wrangler.jsonc]"}}
  node_seo["SEO Assets<br/>static metadata<br/>[robots.txt]"]
end

node_vite -->|"builds"| node_entry
node_tsconfig -.->|"types"| node_entry
node_wrangler -->|"deploys build"| node_vite
node_entry -->|"mounts"| node_app
node_app -->|"primary route"| node_homepage
node_app -->|"unmatched route"| node_notfound
node_portfoliojson -->|"content source"| node_portfoliodata
node_portfoliodata -->|"supplies content"| node_homepage
node_homepage -->|"composes"| node_hero
node_homepage -->|"composes"| node_sections
node_homepage -->|"includes"| node_globalcontrols
node_homepage -->|"uses"| node_visualeffects
node_sections -->|"uses"| node_animatedui
node_animatedui -->|"uses"| node_motion
node_hero -->|"uses"| node_motion
node_homepage -->|"uses"| node_theme
node_homepage -->|"uses"| node_button
node_entry -->|"loads"| node_styles
node_wrangler -->|"serves"| node_seo

click node_vite "https://github.com/mzaeemali/portfolio/blob/main/vite.config.ts"
click node_tsconfig "https://github.com/mzaeemali/portfolio/blob/main/tsconfig.json"
click node_wrangler "https://github.com/mzaeemali/portfolio/blob/main/wrangler.jsonc"
click node_entry "https://github.com/mzaeemali/portfolio/blob/main/src/main.tsx"
click node_app "https://github.com/mzaeemali/portfolio/blob/main/src/App.tsx"
click node_homepage "https://github.com/mzaeemali/portfolio/blob/main/src/pages/Home.tsx"
click node_notfound "https://github.com/mzaeemali/portfolio/blob/main/src/pages/NotFound.tsx"
click node_portfoliojson "https://github.com/mzaeemali/portfolio/blob/main/data/portfolio.json"
click node_portfoliodata "https://github.com/mzaeemali/portfolio/blob/main/lib/portfolio-data.ts"
click node_sections "https://github.com/mzaeemali/portfolio/blob/main/components/projects.tsx"
click node_hero "https://github.com/mzaeemali/portfolio/blob/main/components/hero.tsx"
click node_globalcontrols "https://github.com/mzaeemali/portfolio/blob/main/components/command-palette.tsx"
click node_motion "https://github.com/mzaeemali/portfolio/blob/main/lib/motion.ts"
click node_animatedui "https://github.com/mzaeemali/portfolio/blob/main/components/fade-in.tsx"
click node_visualeffects "https://github.com/mzaeemali/portfolio/blob/main/components/particle-field.tsx"
click node_theme "https://github.com/mzaeemali/portfolio/blob/main/lib/theme.ts"
click node_styles "https://github.com/mzaeemali/portfolio/blob/main/src/index.css"
click node_button "https://github.com/mzaeemali/portfolio/blob/main/components/ui/button.tsx"
click node_seo "https://github.com/mzaeemali/portfolio/blob/main/public/robots.txt"

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,node_notfound toneBlue
class node_portfoliojson,node_portfoliodata toneAmber
class node_homepage,node_sections,node_hero toneMint
class node_globalcontrols,node_motion,node_animatedui,node_visualeffects,node_theme,node_styles,node_button toneRose
class node_vite,node_tsconfig,node_wrangler,node_seo toneIndigo
```

## Components

### Client Runtime

- [Browser Entry](https://github.com/mzaeemali/portfolio/blob/main/src/main.tsx): React entry · `src/main.tsx`
- [App & Route Selection](https://github.com/mzaeemali/portfolio/blob/main/src/App.tsx): application shell · Chooses the portfolio or unmatched route client-side. · `src/App.tsx`
- [Not Found Page](https://github.com/mzaeemali/portfolio/blob/main/src/pages/NotFound.tsx): fallback page · `src/pages/NotFound.tsx`

### Portfolio Content

- [Portfolio JSON](https://github.com/mzaeemali/portfolio/blob/main/data/portfolio.json): content data · Editable resume, project, and service content. · `data/portfolio.json`
- [Typed Portfolio Access](https://github.com/mzaeemali/portfolio/blob/main/lib/portfolio-data.ts): data accessor · `lib/portfolio-data.ts`

### Home Experience

- [Home Page](https://github.com/mzaeemali/portfolio/blob/main/src/pages/Home.tsx): page composition · Assembles the portfolio landing sections. · `src/pages/Home.tsx`
- [Portfolio Sections](https://github.com/mzaeemali/portfolio/blob/main/components/projects.tsx): content components · Projects, experience, contracts, skills, services, credentials, contact, testimonials, and FAQ. · `components/projects.tsx`
- [Hero & Navigation](https://github.com/mzaeemali/portfolio/blob/main/components/hero.tsx): landing components · Primary introduction and site navigation. · `components/hero.tsx`

### Shared UI Systems

- [Global Controls](https://github.com/mzaeemali/portfolio/blob/main/components/command-palette.tsx): interaction components · Command palette, view toggle, and back-to-top controls. · `components/command-palette.tsx`
- [Motion System](https://github.com/mzaeemali/portfolio/blob/main/lib/motion.ts): animation library · `lib/motion.ts`
- [Animated UI](https://github.com/mzaeemali/portfolio/blob/main/components/fade-in.tsx): motion components · Fade-in and spotlight-card presentation effects. · `components/fade-in.tsx`
- [Visual Effects](https://github.com/mzaeemali/portfolio/blob/main/components/particle-field.tsx): canvas/effect components · Particle field, web-lines canvas, and git timeline effects. · `components/particle-field.tsx`
- [Theme & Icons](https://github.com/mzaeemali/portfolio/blob/main/lib/theme.ts): visual utilities · Theme behavior and technology icon mapping. · `lib/theme.ts`
- [Global Styles](https://github.com/mzaeemali/portfolio/blob/main/src/index.css): stylesheet · `src/index.css`
- [Button Primitive](https://github.com/mzaeemali/portfolio/blob/main/components/ui/button.tsx): UI primitive · `components/ui/button.tsx`

### Build & Delivery

- [Vite Build](https://github.com/mzaeemali/portfolio/blob/main/vite.config.ts): build config · Defines the client build and development runtime. · `vite.config.ts`
- [TypeScript Projects](https://github.com/mzaeemali/portfolio/blob/main/tsconfig.json): compiler config · `tsconfig.json`
- [Cloudflare Deployment](https://github.com/mzaeemali/portfolio/blob/main/wrangler.jsonc): deployment config · `wrangler.jsonc`
- [SEO Assets](https://github.com/mzaeemali/portfolio/blob/main/public/robots.txt): static metadata · Robots and sitemap files served as static assets. · `public/robots.txt`

## Connections

- Vite Build → Browser Entry: builds
- TypeScript Projects → Browser Entry: types
- Cloudflare Deployment → Vite Build: deploys build
- Browser Entry → App & Route Selection: mounts
- App & Route Selection → Home Page: primary route
- App & Route Selection → Not Found Page: unmatched route
- Portfolio JSON → Typed Portfolio Access: content source
- Typed Portfolio Access → Home Page: supplies content
- Home Page → Hero & Navigation: composes
- Home Page → Portfolio Sections: composes
- Home Page → Global Controls: includes
- Home Page → Visual Effects: uses
- Portfolio Sections → Animated UI: uses
- Animated UI → Motion System: uses
- Hero & Navigation → Motion System: uses
- Home Page → Theme & Icons: uses
- Home Page → Button Primitive: uses
- Browser Entry → Global Styles: loads
- Cloudflare Deployment → SEO Assets: serves