# thesyedfaaiz/syedfaaiz-se architecture

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

- Interactive diagram: https://gitdiagram.com/thesyedfaaiz/syedfaaiz-se
- Repository: https://github.com/thesyedfaaiz/syedfaaiz-se

## Overview

This is a personal portfolio and engineering case-study site. Visitors browse the profile and project catalog, then open project-specific case studies with capability details and interactive architecture diagrams. The main internal layers are shared project/content data and reusable case-study presentation components. The source index and excerpts support the main rendering and case-study relationships; unsampled details and external integrations are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/App.tsx) (Portfolio app), [`src/components/ProjectCaseStudy.tsx`](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ProjectCaseStudy.tsx) (Case study dispatch), [`src/components/DetailedCaseStudy.tsx`](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/DetailedCaseStudy.tsx) (Case study layout), [`src/components/Projects.tsx`](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/Projects.tsx) (Projects section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site experience"]
  node_app["Portfolio app<br/>[App.tsx]"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_workflow["AI workflows<br/>[AIWorkflows.tsx]"]
  node_scene["System scene<br/>[SystemScene.tsx]"]
  node_footer["Public footer<br/>[PublicFooter.tsx]"]
end

subgraph group_projects["Project stories"]
  node_projects_section["Projects section<br/>[Projects.tsx]"]
  node_all_studies["Case study catalog<br/>[AllCaseStudies.tsx]"]
  node_project_route["Case study dispatch"]
  node_project_card["Project card<br/>[ProjectCard.tsx]"]
  node_study_layout["Case study layout"]
  node_architecture["Architecture diagrams"]
  node_adal_study["Adal AI study"]
  node_idp_study["Identity study<br/>[IdPCaseStudy.tsx]"]
  node_miniripple_study["MiniRipple study"]
  node_mortgage_study["Mortgage CRM study"]
  node_zaffixx_study["Zaffixx study"]
end

subgraph group_content["Portfolio content"]
  node_project_data["Project catalog data<br/>[projects.ts]"]
  node_profile_data["Profile content<br/>[content.ts]"]
end

subgraph group_seo["Search presentation"]
  node_metadata["Route metadata<br/>[RouteMetadata.tsx]"]
  node_site_config["SEO site data<br/>[site.ts]"]
  node_prerender["SEO prerender<br/>[prerender.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_workflow
node_app -->|"renders"| node_scene
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_projects_section
node_projects_section -->|"renders"| node_project_card
node_projects_section -->|"reads catalog"| node_project_data
node_app -->|"routes to"| node_all_studies
node_all_studies -->|"renders"| node_project_card
node_all_studies -->|"reads catalog"| node_project_data
node_app -->|"dispatches studies"| node_project_route
node_project_route -->|"dispatches"| node_adal_study
node_project_route -->|"dispatches"| node_idp_study
node_project_route -->|"dispatches"| node_miniripple_study
node_project_route -->|"dispatches"| node_mortgage_study
node_project_route -->|"dispatches"| node_zaffixx_study
node_adal_study -->|"uses layout"| node_study_layout
node_idp_study -->|"uses layout"| node_study_layout
node_miniripple_study -->|"uses layout"| node_study_layout
node_mortgage_study -->|"uses layout"| node_study_layout
node_zaffixx_study -->|"uses layout"| node_study_layout
node_study_layout -->|"renders diagram"| node_architecture
node_app -->|"renders"| node_metadata
node_metadata -->|"uses SEO data"| node_site_config
node_site_config -->|"reads catalog"| node_project_data
node_site_config -->|"reads profile"| node_profile_data
node_metadata -->|"uses page model"| node_prerender

click node_app "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/App.tsx"
click node_navigation "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/Navigation.tsx"
click node_workflow "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/AIWorkflows.tsx"
click node_scene "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/SystemScene.tsx"
click node_footer "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/PublicFooter.tsx"
click node_projects_section "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/Projects.tsx"
click node_all_studies "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/AllCaseStudies.tsx"
click node_project_route "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ProjectCaseStudy.tsx"
click node_project_card "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ProjectCard.tsx"
click node_study_layout "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/DetailedCaseStudy.tsx"
click node_architecture "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ArchitectureDiagram.tsx"
click node_adal_study "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/AdalAICaseStudy.tsx"
click node_idp_study "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/IdPCaseStudy.tsx"
click node_miniripple_study "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/MiniRippleCaseStudy.tsx"
click node_mortgage_study "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/MortgageCRMCaseStudy.tsx"
click node_zaffixx_study "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ZaffixxCaseStudy.tsx"
click node_project_data "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/data/projects.ts"
click node_profile_data "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/data/content.ts"
click node_metadata "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/seo/RouteMetadata.tsx"
click node_site_config "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/seo/site.ts"
click node_prerender "https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/seo/prerender.ts"

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_app,node_navigation,node_workflow,node_scene,node_footer toneBlue
class node_projects_section,node_all_studies,node_project_route,node_project_card,node_study_layout,node_architecture,node_adal_study,node_idp_study,node_miniripple_study,node_mortgage_study,node_zaffixx_study toneAmber
class node_project_data,node_profile_data toneMint
class node_metadata,node_site_config,node_prerender toneRose
class node_visitor toneIndigo
```

## Components

### Site experience

- [Portfolio app](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/Navigation.tsx): `src/components/Navigation.tsx`
- [AI workflows](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/AIWorkflows.tsx): `src/components/AIWorkflows.tsx`
- [System scene](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/SystemScene.tsx): `src/components/SystemScene.tsx`
- [Public footer](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/PublicFooter.tsx): `src/components/PublicFooter.tsx`

### Project stories

- [Projects section](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Case study catalog](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/AllCaseStudies.tsx): `src/components/AllCaseStudies.tsx`
- [Case study dispatch](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ProjectCaseStudy.tsx): `src/components/ProjectCaseStudy.tsx`
- [Project card](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ProjectCard.tsx): `src/components/ProjectCard.tsx`
- [Case study layout](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/DetailedCaseStudy.tsx): `src/components/DetailedCaseStudy.tsx`
- [Architecture diagrams](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ArchitectureDiagram.tsx): `src/components/ArchitectureDiagram.tsx`
- [Adal AI study](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/AdalAICaseStudy.tsx): `src/components/AdalAICaseStudy.tsx`
- [Identity study](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/IdPCaseStudy.tsx): `src/components/IdPCaseStudy.tsx`
- [MiniRipple study](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/MiniRippleCaseStudy.tsx): `src/components/MiniRippleCaseStudy.tsx`
- [Mortgage CRM study](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/MortgageCRMCaseStudy.tsx): `src/components/MortgageCRMCaseStudy.tsx`
- [Zaffixx study](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/components/ZaffixxCaseStudy.tsx): `src/components/ZaffixxCaseStudy.tsx`

### Portfolio content

- [Project catalog data](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Profile content](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/data/content.ts): `src/data/content.ts`

### Search presentation

- [Route metadata](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/seo/RouteMetadata.tsx): `src/seo/RouteMetadata.tsx`
- [SEO site data](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/src/seo/site.ts): `src/seo/site.ts`
- [SEO prerender](https://github.com/thesyedfaaiz/syedfaaiz-se/blob/main/seo/prerender.ts): `seo/prerender.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Portfolio app: opens site
- Portfolio app → Navigation: renders (evidence: `src/App.tsx`)
- Portfolio app → AI workflows: renders (evidence: `src/App.tsx`)
- Portfolio app → System scene: renders (evidence: `src/App.tsx`)
- Portfolio app → Public footer: renders (evidence: `src/App.tsx`)
- Portfolio app → Projects section: renders (evidence: `src/App.tsx`)
- Projects section → Project card: renders (evidence: `src/components/Projects.tsx`)
- Projects section → Project catalog data: reads catalog (evidence: `src/components/Projects.tsx`)
- Portfolio app → Case study catalog: routes to (evidence: `src/App.tsx`)
- Case study catalog → Project card: renders (evidence: `src/components/AllCaseStudies.tsx`)
- Case study catalog → Project catalog data: reads catalog (evidence: `src/components/AllCaseStudies.tsx`)
- Portfolio app → Case study dispatch: dispatches studies (evidence: `src/App.tsx`)
- Case study dispatch → Adal AI study: dispatches (evidence: `src/components/ProjectCaseStudy.tsx`)
- Case study dispatch → Identity study: dispatches (evidence: `src/components/ProjectCaseStudy.tsx`)
- Case study dispatch → MiniRipple study: dispatches (evidence: `src/components/ProjectCaseStudy.tsx`)
- Case study dispatch → Mortgage CRM study: dispatches (evidence: `src/components/ProjectCaseStudy.tsx`)
- Case study dispatch → Zaffixx study: dispatches (evidence: `src/components/ProjectCaseStudy.tsx`)
- Adal AI study → Case study layout: uses layout (evidence: `src/components/AdalAICaseStudy.tsx`)
- Identity study → Case study layout: uses layout (evidence: `src/components/IdPCaseStudy.tsx`)
- MiniRipple study → Case study layout: uses layout (evidence: `src/components/MiniRippleCaseStudy.tsx`)
- Mortgage CRM study → Case study layout: uses layout (evidence: `src/components/MortgageCRMCaseStudy.tsx`)
- Zaffixx study → Case study layout: uses layout (evidence: `src/components/ZaffixxCaseStudy.tsx`)
- Case study layout → Architecture diagrams: renders diagram (evidence: `src/components/DetailedCaseStudy.tsx`)
- Portfolio app → Route metadata: renders (evidence: `src/App.tsx`)
- Route metadata → SEO site data: uses SEO data (evidence: `src/seo/RouteMetadata.tsx`)
- SEO site data → Project catalog data: reads catalog (evidence: `src/seo/site.ts`)
- SEO site data → Profile content: reads profile (evidence: `src/seo/site.ts`)
- Route metadata → SEO prerender: uses page model (evidence: `src/seo/RouteMetadata.tsx`)