How meisamtj/meisamtj.ir works
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: layout.tsx App layout · __root.tsx Root route · routeTree.gen.ts Route tree · theme-mode-toggle.tsx Theme toggle
Components 17
App runtime
- React entry
src/main.tsx - Route tree
src/routeTree.gen.ts - Root route
src/routes/__root.tsx - Home route
src/routes/index.tsx
Portfolio presentation
- App layout
src/components/shared/layout.tsx - Home page
src/pages/home.tsx - Site logo
src/components/shared/meisamtj-logo.tsx - App styles
src/styles/app.css
Theme controls
- Theme provider
src/components/shared/theme-provider.tsx - Theme toggle
src/components/shared/theme-mode-toggle.tsx
UI primitives
- Direction provider
src/components/ui/direction.tsx - Button primitive
src/components/ui/button.tsx - Badge primitive
src/components/ui/badge.tsx - Class utilities
src/lib/utils.ts
Other components
- Site visitor
- Web browser
- Browser local storage
Connections 19
- Site visitor → Web browser: opens site
README.md - Web browser → React entry: loads app
- React entry → Route tree: installs routes
src/main.tsx - Route tree → Root route: registers root
src/routeTree.gen.ts - Route tree → Home route: registers home
src/routeTree.gen.ts - Root route → Theme provider: wraps app
src/routes/__root.tsx - Root route → App layout: renders layout
src/routes/__root.tsx - Root route → App styles: imports styles
src/routes/__root.tsx - App layout → Home route: renders outlet
- Home route → Home page: renders page
src/routes/index.tsx - App layout → Direction provider: sets direction
src/components/shared/layout.tsx - App layout → Site logo: renders logo
src/components/shared/layout.tsx - App layout → Theme toggle: renders toggle
src/components/shared/layout.tsx - Theme toggle → Theme provider: reads and updates
src/components/shared/theme-mode-toggle.tsx - Theme toggle → Button primitive: renders button
src/components/shared/theme-mode-toggle.tsx - Theme provider → Browser local storage: reads and writes
src/components/shared/theme-provider.tsx - Home page → Badge primitive: renders badges
src/pages/home.tsx - Button primitive → Class utilities: merges classes
src/components/ui/button.tsx - Badge primitive → Class utilities: merges classes
src/components/ui/badge.tsx