# zain358/mayansh-portfolio-assets architecture

> Architecture diagram of the GitHub repository zain358/mayansh-portfolio-assets, 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/zain358/mayansh-portfolio-assets
- Repository: https://github.com/zain358/mayansh-portfolio-assets

## Overview

This is a personal developer portfolio: visitors browse the services page or use the contact form to send a project inquiry. The root layout provides the shared page shell and includes analytics integrations; the contact page also renders the footer. The services page presents five interactive capability cards with remotely hosted imagery. The tree and excerpts are sparse, and the email-sending implementation and several imported components are not included, so their internal behavior and wiring are not expanded here.

Main entry points: [`layout.tsx`](https://github.com/zain358/mayansh-portfolio-assets/blob/main/layout.tsx) (Shared layout), [`connect/page.tsx`](https://github.com/zain358/mayansh-portfolio-assets/blob/main/connect/page.tsx) (Contact form), [`services/page.tsx`](https://github.com/zain358/mayansh-portfolio-assets/blob/main/services/page.tsx) (Services page), [`Footer.tsx`](https://github.com/zain358/mayansh-portfolio-assets/blob/main/Footer.tsx) (Contact footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio experience"]
  node_layout["Shared layout<br/>[layout.tsx]"]
  node_services["Services page<br/>[page.tsx]"]
  node_cloudinary["Cloudinary images"]
end

subgraph group_contact["Contact workflow"]
  node_connect["Contact form<br/>[page.tsx]"]
  node_email["Email sender"]
  node_footer["Contact footer<br/>[Footer.tsx]"]
end

subgraph group_telemetry["Usage telemetry"]
  node_vercel_analytics["Vercel Analytics"]
  node_speed_insights["Speed Insights"]
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_layout
node_layout -->|"renders route"| node_services
node_layout -->|"renders route"| node_connect
node_services -.->|"loads images"| node_cloudinary
node_visitor -->|"submits inquiry"| node_connect
node_connect -->|"sends form data"| node_email
node_connect -->|"renders"| node_footer
node_layout -->|"includes"| node_vercel_analytics
node_layout -->|"includes"| node_speed_insights

click node_layout "https://github.com/zain358/mayansh-portfolio-assets/blob/main/layout.tsx"
click node_services "https://github.com/zain358/mayansh-portfolio-assets/blob/main/services/page.tsx"
click node_connect "https://github.com/zain358/mayansh-portfolio-assets/blob/main/connect/page.tsx"
click node_footer "https://github.com/zain358/mayansh-portfolio-assets/blob/main/Footer.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_services,node_cloudinary toneBlue
class node_connect,node_email,node_footer toneAmber
class node_vercel_analytics,node_speed_insights toneMint
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Shared layout](https://github.com/zain358/mayansh-portfolio-assets/blob/main/layout.tsx): `layout.tsx`
- [Services page](https://github.com/zain358/mayansh-portfolio-assets/blob/main/services/page.tsx): `services/page.tsx`
- **Cloudinary images**

### Contact workflow

- [Contact form](https://github.com/zain358/mayansh-portfolio-assets/blob/main/connect/page.tsx): `connect/page.tsx`
- **Email sender**
- [Contact footer](https://github.com/zain358/mayansh-portfolio-assets/blob/main/Footer.tsx): `Footer.tsx`

### Usage telemetry

- **Vercel Analytics**
- **Speed Insights**

### Other components

- **Visitor**

## Connections

- Visitor → Shared layout: visits
- Shared layout → Services page: renders route
- Shared layout → Contact form: renders route
- Services page → Cloudinary images: loads images
- Visitor → Contact form: submits inquiry
- Contact form → Email sender: sends form data
- Contact form → Contact footer: renders
- Shared layout → Vercel Analytics: includes
- Shared layout → Speed Insights: includes