# muhammad-saad-riaz/m-saad-riaz-portfolio-v2 architecture

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

- Interactive diagram: https://gitdiagram.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2
- Repository: https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2

## Overview

This is a personal developer portfolio site: visitors browse a single-page presentation of the developer’s work, experience, background, process, and skills, then use contact or social links to reach out. The Next.js home page composes the portfolio sections inside a shared layout with navigation and footer. The sampled code confirms specific data reads for navigation, experience, featured work, and contact; wiring for other section data is not asserted.

Main entry points: [`src/app/page.tsx`](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/app/page.tsx) (Home Page), [`src/components/layout/Navbar.tsx`](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/layout/Navbar.tsx) (Navbar), [`src/data/portfolio-data.ts`](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/data/portfolio-data.ts) (Portfolio Data), [`src/components/layout/Footer.tsx`](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/layout/Footer.tsx) (Footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Page Shell"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_home["Home Page<br/>[page.tsx]"]
end

subgraph group_portfolio["Portfolio Sections"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_featured["Featured Project"]
  node_experience["Experience<br/>[Experience.tsx]"]
  node_testimonial["Testimonial<br/>[Testimonial.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_projects["Projects<br/>[Projects.tsx]"]
  node_process["Process<br/>[Process.tsx]"]
  node_techstack["Tech Stack<br/>[TechStack.tsx]"]
end

subgraph group_contact["Navigation &amp; Contact"]
  node_navbar["Navbar<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_contactsection["Contact<br/>[Contact.tsx]"]
end

subgraph group_content["Content &amp; UI"]
  node_data["Portfolio Data<br/>[portfolio-data.ts]"]
  node_navigation["Navigation Links<br/>[navigation.ts]"]
  node_social["Social Links<br/>[social-links.ts]"]
  node_button["Button UI<br/>[button.tsx]"]
  node_badge["Badge UI<br/>[badge.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_layout -->|"renders"| node_navbar
node_layout -->|"wraps"| node_home
node_layout -->|"renders"| node_footer
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_featured
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_testimonial
node_home -->|"renders"| node_about
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_process
node_home -->|"renders"| node_techstack
node_home -->|"renders"| node_contactsection
node_navbar -->|"reads identity"| node_data
node_navbar -->|"reads links"| node_navigation
node_navbar -->|"reads links"| node_social
node_navbar -->|"uses"| node_button
node_featured -->|"reads project"| node_data
node_featured -->|"uses"| node_badge
node_experience -->|"reads experience"| node_data
node_experience -->|"uses"| node_badge
node_contactsection -->|"reads identity"| node_data
node_contactsection -->|"reads links"| node_social
node_footer -->|"reads identity"| node_data
node_footer -->|"reads links"| node_navigation
node_footer -->|"reads links"| node_social

click node_layout "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/app/layout.tsx"
click node_home "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/app/page.tsx"
click node_navbar "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/layout/Navbar.tsx"
click node_footer "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/layout/Footer.tsx"
click node_hero "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Hero.tsx"
click node_featured "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/FeaturedProject.tsx"
click node_experience "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Experience.tsx"
click node_testimonial "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Testimonial.tsx"
click node_about "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/About.tsx"
click node_projects "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Projects.tsx"
click node_process "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Process.tsx"
click node_techstack "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/TechStack.tsx"
click node_contactsection "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Contact.tsx"
click node_data "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/data/portfolio-data.ts"
click node_navigation "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/constants/navigation.ts"
click node_social "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/constants/social-links.ts"
click node_button "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/ui/button.tsx"
click node_badge "https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/ui/badge.tsx"

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_layout,node_home toneBlue
class node_hero,node_featured,node_experience,node_testimonial,node_about,node_projects,node_process,node_techstack toneAmber
class node_navbar,node_footer,node_contactsection toneMint
class node_data,node_navigation,node_social,node_button,node_badge toneRose
class node_visitor toneIndigo
```

## Components

### Page Shell

- [Root Layout](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home Page](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/app/page.tsx): `src/app/page.tsx`

### Portfolio Sections

- [Hero](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Hero.tsx): `src/components/sections/Hero.tsx`
- [Featured Project](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/FeaturedProject.tsx): `src/components/sections/FeaturedProject.tsx`
- [Experience](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Experience.tsx): `src/components/sections/Experience.tsx`
- [Testimonial](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Testimonial.tsx): `src/components/sections/Testimonial.tsx`
- [About](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/About.tsx): `src/components/sections/About.tsx`
- [Projects](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Projects.tsx): `src/components/sections/Projects.tsx`
- [Process](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Process.tsx): `src/components/sections/Process.tsx`
- [Tech Stack](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/TechStack.tsx): `src/components/sections/TechStack.tsx`

### Navigation & Contact

- [Navbar](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/layout/Navbar.tsx): `src/components/layout/Navbar.tsx`
- [Footer](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/layout/Footer.tsx): `src/components/layout/Footer.tsx`
- [Contact](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/sections/Contact.tsx): `src/components/sections/Contact.tsx`

### Content & UI

- [Portfolio Data](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/data/portfolio-data.ts): `src/data/portfolio-data.ts`
- [Navigation Links](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/constants/navigation.ts): `src/constants/navigation.ts`
- [Social Links](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/constants/social-links.ts): `src/constants/social-links.ts`
- [Button UI](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Badge UI](https://github.com/muhammad-saad-riaz/m-saad-riaz-portfolio-v2/blob/main/src/components/ui/badge.tsx): `src/components/ui/badge.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home Page: opens
- Root Layout → Navbar: renders
- Root Layout → Home Page: wraps
- Root Layout → Footer: renders
- Home Page → Hero: renders
- Home Page → Featured Project: renders
- Home Page → Experience: renders
- Home Page → Testimonial: renders
- Home Page → About: renders
- Home Page → Projects: renders
- Home Page → Process: renders
- Home Page → Tech Stack: renders
- Home Page → Contact: renders
- Navbar → Portfolio Data: reads identity
- Navbar → Navigation Links: reads links
- Navbar → Social Links: reads links
- Navbar → Button UI: uses
- Featured Project → Portfolio Data: reads project
- Featured Project → Badge UI: uses
- Experience → Portfolio Data: reads experience
- Experience → Badge UI: uses
- Contact → Portfolio Data: reads identity
- Contact → Social Links: reads links
- Footer → Portfolio Data: reads identity
- Footer → Navigation Links: reads links
- Footer → Social Links: reads links