# ahsaanjameel595/tayyab_portfolio architecture

> Architecture diagram of the GitHub repository ahsaanjameel595/tayyab_portfolio, 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/ahsaanjameel595/tayyab_portfolio
- Repository: https://github.com/ahsaanjameel595/tayyab_portfolio

## Overview

This is a Next.js portfolio and inquiry site for freelance graphic designer Tayyab Munir. Visitors browse the designer’s profile, services, selected work, case studies, and client feedback, then can submit a project inquiry through the contact form. Page modules assemble shared presentation components with static content data; the contact form validates locally and submits directly to Web3Forms. The README is the stock Next.js starter README; the map reflects the supplied tree and sampled page/form source.

Main entry points: [`app/page.tsx`](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/page.tsx) (Home), [`components/Hero.tsx`](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/Hero.tsx) (Hero), [`app/services/page.tsx`](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/services/page.tsx) (Services Page), [`app/portfolio/page.tsx`](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/portfolio/page.tsx) (Portfolio)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Site Pages"]
  node_home["Home<br/>[page.tsx]"]
  node_about["About<br/>[page.tsx]"]
  node_services_page["Services Page<br/>[page.tsx]"]
  node_portfolio["Portfolio<br/>[page.tsx]"]
  node_case_studies["Case Studies<br/>[page.tsx]"]
  node_testimonials_page["Testimonials<br/>[page.tsx]"]
  node_contact_page["Contact Page<br/>[page.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_content_data["Process &amp; FAQs<br/>[content.ts]"]
  node_projects["Project Records<br/>[projects.ts]"]
  node_services["Service Records<br/>[services.ts]"]
  node_testimonials["Testimonial Records<br/>[testimonials.ts]"]
end

subgraph group_ui["Shared Presentation"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_project_card["Project Card<br/>[ProjectCard.tsx]"]
  node_service_card["Service Card<br/>[ServiceCard.tsx]"]
  node_testimonial_card["Testimonial Card"]
end

subgraph group_inquiry["Project Inquiry"]
  node_contact_form["Contact Form<br/>[ContactForm.tsx]"]
  node_web3forms{{"Web3Forms"}}
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_about
node_visitor -->|"opens"| node_services_page
node_visitor -->|"opens"| node_portfolio
node_visitor -->|"opens"| node_case_studies
node_visitor -->|"opens"| node_testimonials_page
node_visitor -->|"opens"| node_contact_page
node_home -->|"renders"| node_hero
node_home -->|"reads"| node_projects
node_home -->|"renders"| node_project_card
node_home -->|"reads"| node_services
node_home -->|"renders"| node_service_card
node_home -->|"reads"| node_content_data
node_about -->|"renders"| node_hero
node_about -->|"reads"| node_content_data
node_services_page -->|"renders"| node_hero
node_services_page -->|"reads"| node_services
node_services_page -->|"renders"| node_service_card
node_services_page -->|"reads"| node_content_data
node_portfolio -->|"renders"| node_hero
node_portfolio -->|"reads"| node_projects
node_portfolio -->|"renders"| node_project_card
node_case_studies -->|"renders"| node_hero
node_case_studies -->|"reads"| node_projects
node_testimonials_page -->|"renders"| node_hero
node_testimonials_page -->|"reads"| node_testimonials
node_testimonials_page -->|"renders"| node_testimonial_card
node_contact_page -->|"renders"| node_hero
node_contact_page -->|"renders"| node_contact_form
node_contact_form -->|"reads"| node_services
node_contact_form -->|"submits"| node_web3forms

click node_home "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/page.tsx"
click node_about "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/about/page.tsx"
click node_services_page "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/services/page.tsx"
click node_portfolio "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/portfolio/page.tsx"
click node_case_studies "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/case-studies/page.tsx"
click node_testimonials_page "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/testimonials/page.tsx"
click node_contact_page "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/contact/page.tsx"
click node_content_data "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/content.ts"
click node_projects "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/projects.ts"
click node_services "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/services.ts"
click node_testimonials "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/testimonials.ts"
click node_hero "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/Hero.tsx"
click node_project_card "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/ProjectCard.tsx"
click node_service_card "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/ServiceCard.tsx"
click node_testimonial_card "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/TestimonialCard.tsx"
click node_contact_form "https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/ContactForm.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_home,node_about,node_services_page,node_portfolio,node_case_studies,node_testimonials_page,node_contact_page toneBlue
class node_content_data,node_projects,node_services,node_testimonials toneAmber
class node_hero,node_project_card,node_service_card,node_testimonial_card toneMint
class node_contact_form,node_web3forms toneRose
class node_visitor toneIndigo
```

## Components

### Site Pages

- [Home](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [About](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/about/page.tsx): `app/about/page.tsx`
- [Services Page](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/services/page.tsx): `app/services/page.tsx`
- [Portfolio](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/portfolio/page.tsx): `app/portfolio/page.tsx`
- [Case Studies](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/case-studies/page.tsx): `app/case-studies/page.tsx`
- [Testimonials](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/testimonials/page.tsx): `app/testimonials/page.tsx`
- [Contact Page](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/app/contact/page.tsx): `app/contact/page.tsx`

### Portfolio Content

- [Process & FAQs](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/content.ts): `data/content.ts`
- [Project Records](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/projects.ts): `data/projects.ts`
- [Service Records](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/services.ts): `data/services.ts`
- [Testimonial Records](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/data/testimonials.ts): `data/testimonials.ts`

### Shared Presentation

- [Hero](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [Project Card](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/ProjectCard.tsx): `components/ProjectCard.tsx`
- [Service Card](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/ServiceCard.tsx): `components/ServiceCard.tsx`
- [Testimonial Card](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/TestimonialCard.tsx): `components/TestimonialCard.tsx`

### Project Inquiry

- [Contact Form](https://github.com/ahsaanjameel595/tayyab_portfolio/blob/main/components/ContactForm.tsx): `components/ContactForm.tsx`
- **Web3Forms**

### Other components

- **Visitor**

## Connections

- Visitor → Home: opens
- Visitor → About: opens
- Visitor → Services Page: opens
- Visitor → Portfolio: opens
- Visitor → Case Studies: opens
- Visitor → Testimonials: opens
- Visitor → Contact Page: opens
- Home → Hero: renders
- Home → Project Records: reads
- Home → Project Card: renders
- Home → Service Records: reads
- Home → Service Card: renders
- Home → Process & FAQs: reads
- About → Hero: renders
- About → Process & FAQs: reads
- Services Page → Hero: renders
- Services Page → Service Records: reads
- Services Page → Service Card: renders
- Services Page → Process & FAQs: reads
- Portfolio → Hero: renders
- Portfolio → Project Records: reads
- Portfolio → Project Card: renders
- Case Studies → Hero: renders
- Case Studies → Project Records: reads
- Testimonials → Hero: renders
- Testimonials → Testimonial Records: reads
- Testimonials → Testimonial Card: renders
- Contact Page → Hero: renders
- Contact Page → Contact Form: renders
- Contact Form → Service Records: reads
- Contact Form → Web3Forms: submits