# asfand-yar-dev/portfolio_of_asfand_yar architecture

> Architecture diagram of the GitHub repository asfand-yar-dev/portfolio_of_asfand_yar, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/asfand-yar-dev/portfolio_of_asfand_yar
- Repository: https://github.com/asfand-yar-dev/portfolio_of_asfand_yar

## Overview

This is a statically rendered personal portfolio: visitors browse the developer’s profile, work history, projects, skills, services, and contact options. The App Router page composes these sections, with shared site metadata and portfolio content supplied from `lib`. Client-side features add theme persistence, responsive navigation, and motion effects; the README also documents static project details, structured metadata, sitemap/robots, and accessibility fallbacks. The sampled code establishes the page composition and selected interactions; unsampled component internals are represented only where their paths and capabilities are documented.

Main entry points: [`app/page.tsx`](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/page.tsx) (Home page), [`components/Header.tsx`](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Header.tsx) (Navigation and theme), [`app/layout.tsx`](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/layout.tsx) (Root layout), [`lib/site.ts`](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/site.ts) (Site identity)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Page composition"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_page["Home page<br/>[page.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_experience["Experience<br/>[Experience.tsx]"]
  node_projects["Projects<br/>[Projects.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_services["Services<br/>[Services.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_content["Portfolio data<br/>[content.ts]"]
end

subgraph group_interaction["Visitor experience"]
  node_header["Navigation and theme<br/>[Header.tsx]"]
  node_scroll["Scroll effects"]
  node_background["Engineering background"]
  node_compute["Interactive compute core<br/>[ComputeCore.tsx]"]
  node_coremotion["Core pointer motion<br/>[enhance-core.ts]"]
end

subgraph group_metadata["Site identity"]
  node_site["Site identity<br/>[site.ts]"]
  node_robots["Robots endpoint<br/>[robots.js]"]
  node_sitemap["Sitemap endpoint<br/>[sitemap.js]"]
end

node_visitor(("Portfolio visitor"))
node_analytics["Vercel analytics"]

node_visitor -->|"opens site"| node_layout
node_layout -->|"wraps page"| node_page
node_layout -->|"reads metadata"| node_site
node_layout -.->|"mounts on Vercel"| node_analytics
node_page -->|"renders"| node_header
node_page -->|"renders"| node_background
node_page -->|"renders"| node_scroll
node_page -->|"renders"| node_hero
node_page -->|"renders"| node_about
node_page -->|"renders"| node_experience
node_page -->|"renders"| node_projects
node_page -->|"renders"| node_skills
node_page -->|"renders"| node_services
node_page -->|"renders"| node_contact
node_page -->|"renders"| node_footer
node_page -->|"reads projects"| node_content
node_page -->|"reads identity"| node_site
node_header -->|"reads links"| node_site
node_header -->|"offers navigation"| node_visitor
node_header -->|"persists theme"| node_header
node_page -->|"publishes alongside"| node_robots
node_page -->|"publishes alongside"| node_sitemap
node_compute -->|"uses pointer logic"| node_coremotion

click node_layout "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/layout.tsx"
click node_page "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/page.tsx"
click node_hero "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Hero.tsx"
click node_about "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/About.tsx"
click node_experience "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Experience.tsx"
click node_projects "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Projects.tsx"
click node_skills "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Skills.tsx"
click node_services "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Services.tsx"
click node_contact "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Contact.tsx"
click node_footer "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Footer.tsx"
click node_content "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/content.ts"
click node_header "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Header.tsx"
click node_scroll "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/ScrollExperience.tsx"
click node_background "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/EngineeringBackground.tsx"
click node_compute "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/ComputeCore.tsx"
click node_coremotion "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/enhance-core.ts"
click node_site "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/site.ts"
click node_robots "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/robots.js"
click node_sitemap "https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/sitemap.js"

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_page toneBlue
class node_hero,node_about,node_experience,node_projects,node_skills,node_services,node_contact,node_footer,node_content toneAmber
class node_header,node_scroll,node_background,node_compute,node_coremotion toneMint
class node_site,node_robots,node_sitemap toneRose
class node_visitor,node_analytics toneIndigo
```

## Components

### Page composition

- [Root layout](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home page](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/page.tsx): `app/page.tsx`

### Portfolio content

- [Hero](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [About](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/About.tsx): `components/About.tsx`
- [Experience](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Experience.tsx): `components/Experience.tsx`
- [Projects](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Projects.tsx): `components/Projects.tsx`
- [Skills](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Skills.tsx): `components/Skills.tsx`
- [Services](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Services.tsx): `components/Services.tsx`
- [Contact](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Contact.tsx): `components/Contact.tsx`
- [Footer](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Portfolio data](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/content.ts): `lib/content.ts`

### Visitor experience

- [Navigation and theme](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/Header.tsx): `components/Header.tsx`
- [Scroll effects](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/ScrollExperience.tsx): `components/ScrollExperience.tsx`
- [Engineering background](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/EngineeringBackground.tsx): `components/EngineeringBackground.tsx`
- [Interactive compute core](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/components/ComputeCore.tsx): `components/ComputeCore.tsx`
- [Core pointer motion](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/enhance-core.ts): `lib/enhance-core.ts`

### Site identity

- [Site identity](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/lib/site.ts): `lib/site.ts`
- [Robots endpoint](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/robots.js): `app/robots.js`
- [Sitemap endpoint](https://github.com/asfand-yar-dev/portfolio_of_asfand_yar/blob/main/app/sitemap.js): `app/sitemap.js`

### Other components

- **Portfolio visitor**
- **Vercel analytics**

## Connections

- Portfolio visitor → Root layout: opens site
- Root layout → Home page: wraps page
- Root layout → Site identity: reads metadata
- Root layout → Vercel analytics: mounts on Vercel
- Home page → Navigation and theme: renders
- Home page → Engineering background: renders
- Home page → Scroll effects: renders
- Home page → Hero: renders
- Home page → About: renders
- Home page → Experience: renders
- Home page → Projects: renders
- Home page → Skills: renders
- Home page → Services: renders
- Home page → Contact: renders
- Home page → Footer: renders
- Home page → Portfolio data: reads projects
- Home page → Site identity: reads identity
- Navigation and theme → Site identity: reads links
- Navigation and theme → Portfolio visitor: offers navigation
- Navigation and theme → Navigation and theme: persists theme
- Home page → Robots endpoint: publishes alongside
- Home page → Sitemap endpoint: publishes alongside
- Interactive compute core → Core pointer motion: uses pointer logic