# meisamtj/meisamtj.ir architecture

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

## Overview

Meisam Tj. Website is a React personal portfolio. A visitor opens the site, the React entry point installs TanStack Router, and the root and index routes render the shared layout and home page. The page presents a profile and technology badges; the layout provides branding, animated content, and a theme control. Theme choice is persisted in browser local storage and applied to the document. The graph follows the sampled route and component calls; unsampled styling and UI details are not expanded.

Main entry points: [`src/components/shared/layout.tsx`](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/layout.tsx) (App layout), [`src/routes/__root.tsx`](https://github.com/meisamtj/meisamtj.ir/blob/main/src/routes/__root.tsx) (Root route), [`src/routeTree.gen.ts`](https://github.com/meisamtj/meisamtj.ir/blob/main/src/routeTree.gen.ts) (Route tree), [`src/components/shared/theme-mode-toggle.tsx`](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/theme-mode-toggle.tsx) (Theme toggle)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_entry["React entry<br/>[main.tsx]"]
  node_router_tree["Route tree<br/>[routeTree.gen.ts]"]
  node_root_route["Root route<br/>[__root.tsx]"]
  node_index_route["Home route<br/>[index.tsx]"]
end

subgraph group_presentation["Portfolio presentation"]
  node_app_layout["App layout<br/>[layout.tsx]"]
  node_home_page["Home page<br/>[home.tsx]"]
  node_logo["Site logo<br/>[meisamtj-logo.tsx]"]
  node_app_styles["App styles<br/>[app.css]"]
end

subgraph group_theme["Theme controls"]
  node_theme_provider["Theme provider<br/>[theme-provider.tsx]"]
  node_theme_toggle["Theme toggle"]
end

subgraph group_ui["UI primitives"]
  node_direction["Direction provider<br/>[direction.tsx]"]
  node_button["Button primitive<br/>[button.tsx]"]
  node_badge["Badge primitive<br/>[badge.tsx]"]
  node_class_utils["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Site visitor"))
node_browser(("Web browser"))
node_local_storage[("Browser local storage")]

node_visitor -->|"opens site"| node_browser
node_browser -.->|"loads app"| node_entry
node_entry -->|"installs routes"| node_router_tree
node_router_tree -->|"registers root"| node_root_route
node_router_tree -->|"registers home"| node_index_route
node_root_route -->|"wraps app"| node_theme_provider
node_root_route -->|"renders layout"| node_app_layout
node_root_route -->|"imports styles"| node_app_styles
node_app_layout -.->|"renders outlet"| node_index_route
node_index_route -->|"renders page"| node_home_page
node_app_layout -->|"sets direction"| node_direction
node_app_layout -->|"renders logo"| node_logo
node_app_layout -->|"renders toggle"| node_theme_toggle
node_theme_toggle -->|"reads and updates"| node_theme_provider
node_theme_toggle -->|"renders button"| node_button
node_theme_provider -->|"reads and writes"| node_local_storage
node_home_page -->|"renders badges"| node_badge
node_button -->|"merges classes"| node_class_utils
node_badge -->|"merges classes"| node_class_utils

click node_entry "https://github.com/meisamtj/meisamtj.ir/blob/main/src/main.tsx"
click node_router_tree "https://github.com/meisamtj/meisamtj.ir/blob/main/src/routeTree.gen.ts"
click node_root_route "https://github.com/meisamtj/meisamtj.ir/blob/main/src/routes/__root.tsx"
click node_index_route "https://github.com/meisamtj/meisamtj.ir/blob/main/src/routes/index.tsx"
click node_app_layout "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/layout.tsx"
click node_home_page "https://github.com/meisamtj/meisamtj.ir/blob/main/src/pages/home.tsx"
click node_logo "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/meisamtj-logo.tsx"
click node_direction "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/ui/direction.tsx"
click node_theme_provider "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/theme-provider.tsx"
click node_theme_toggle "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/theme-mode-toggle.tsx"
click node_button "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/ui/button.tsx"
click node_badge "https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/ui/badge.tsx"
click node_class_utils "https://github.com/meisamtj/meisamtj.ir/blob/main/src/lib/utils.ts"
click node_app_styles "https://github.com/meisamtj/meisamtj.ir/blob/main/src/styles/app.css"

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_entry,node_router_tree,node_root_route,node_index_route,node_browser toneBlue
class node_app_layout,node_home_page,node_logo,node_app_styles,node_local_storage toneAmber
class node_theme_provider,node_theme_toggle toneMint
class node_direction,node_button,node_badge,node_class_utils toneRose
class node_visitor toneIndigo
```

## Components

### App runtime

- [React entry](https://github.com/meisamtj/meisamtj.ir/blob/main/src/main.tsx): `src/main.tsx`
- [Route tree](https://github.com/meisamtj/meisamtj.ir/blob/main/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Root route](https://github.com/meisamtj/meisamtj.ir/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`
- [Home route](https://github.com/meisamtj/meisamtj.ir/blob/main/src/routes/index.tsx): `src/routes/index.tsx`

### Portfolio presentation

- [App layout](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/layout.tsx): `src/components/shared/layout.tsx`
- [Home page](https://github.com/meisamtj/meisamtj.ir/blob/main/src/pages/home.tsx): `src/pages/home.tsx`
- [Site logo](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/meisamtj-logo.tsx): `src/components/shared/meisamtj-logo.tsx`
- [App styles](https://github.com/meisamtj/meisamtj.ir/blob/main/src/styles/app.css): `src/styles/app.css`

### Theme controls

- [Theme provider](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/theme-provider.tsx): `src/components/shared/theme-provider.tsx`
- [Theme toggle](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/shared/theme-mode-toggle.tsx): `src/components/shared/theme-mode-toggle.tsx`

### UI primitives

- [Direction provider](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/ui/direction.tsx): `src/components/ui/direction.tsx`
- [Button primitive](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Badge primitive](https://github.com/meisamtj/meisamtj.ir/blob/main/src/components/ui/badge.tsx): `src/components/ui/badge.tsx`
- [Class utilities](https://github.com/meisamtj/meisamtj.ir/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **Site visitor**
- **Web browser**
- **Browser local storage**

## Connections

- Site visitor → Web browser: opens site (evidence: `README.md`)
- Web browser → React entry: loads app
- React entry → Route tree: installs routes (evidence: `src/main.tsx`)
- Route tree → Root route: registers root (evidence: `src/routeTree.gen.ts`)
- Route tree → Home route: registers home (evidence: `src/routeTree.gen.ts`)
- Root route → Theme provider: wraps app (evidence: `src/routes/__root.tsx`)
- Root route → App layout: renders layout (evidence: `src/routes/__root.tsx`)
- Root route → App styles: imports styles (evidence: `src/routes/__root.tsx`)
- App layout → Home route: renders outlet
- Home route → Home page: renders page (evidence: `src/routes/index.tsx`)
- App layout → Direction provider: sets direction (evidence: `src/components/shared/layout.tsx`)
- App layout → Site logo: renders logo (evidence: `src/components/shared/layout.tsx`)
- App layout → Theme toggle: renders toggle (evidence: `src/components/shared/layout.tsx`)
- Theme toggle → Theme provider: reads and updates (evidence: `src/components/shared/theme-mode-toggle.tsx`)
- Theme toggle → Button primitive: renders button (evidence: `src/components/shared/theme-mode-toggle.tsx`)
- Theme provider → Browser local storage: reads and writes (evidence: `src/components/shared/theme-provider.tsx`)
- Home page → Badge primitive: renders badges (evidence: `src/pages/home.tsx`)
- Button primitive → Class utilities: merges classes (evidence: `src/components/ui/button.tsx`)
- Badge primitive → Class utilities: merges classes (evidence: `src/components/ui/badge.tsx`)