# yogananthj/portfolio.dev architecture

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

- Interactive diagram: https://gitdiagram.com/yogananthj/portfolio.dev
- Repository: https://github.com/yogananthj/portfolio.dev

## Overview

This repository is an interactive developer portfolio and command center. Visitors explore the developer profile and project catalog, inspect project architectures, try illustrative AI simulators and motion experiments, and use workspace and terminal tools. The graph preserves major README capabilities while distinguishing documented product functions from sampled implementation links; unsampled features are represented by their exact source paths, with uncertain relationships omitted.

Main entry points: [`src/App.tsx`](https://github.com/yogananthj/portfolio.dev/blob/main/src/App.tsx) (Application Shell), [`src/components/Hero.tsx`](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/Hero.tsx) (Profile & Hero), [`src/components/ProjectShowcase.tsx`](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ProjectShowcase.tsx) (Project Showcase), [`src/components/ExperienceSection.tsx`](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ExperienceSection.tsx) (Experience & Contact)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio Experience"]
  node_app["Application Shell<br/>[App.tsx]"]
  node_profile["Profile &amp; Hero<br/>[Hero.tsx]"]
  node_visiting_card["Digital Visiting Card"]
  node_project_catalog["Project Showcase"]
  node_experience_contact["Experience &amp; Contact"]
  node_github_activity["GitHub Activity"]
end

subgraph group_labs["Interactive Labs"]
  node_architecture["Architecture Explorer"]
  node_simulators["AI Project Simulators"]
  node_motion_lab["Motion Playground"]
  node_motion_detail["Experiment Detail"]
  node_motion_experiment["Galactic Core<br/>[GalacticCore.tsx]"]
end

subgraph group_workspace["Workspace Tools"]
  node_terminal["Developer CLI<br/>[TerminalDrawer.tsx]"]
  node_resume["Resume Modal<br/>[ResumeModal.tsx]"]
  node_layout_controls["Workspace Controls"]
end

subgraph group_foundation["Shared Foundation"]
  node_project_data["Portfolio Content<br/>[portfolioData.ts]"]
  node_architecture_data["Architecture Catalog"]
  node_layout_state["Layout &amp; Theme State<br/>[LayoutContext.tsx]"]
  node_error_monitor["Error Monitoring"]
  node_analytics["Analytics Utilities<br/>[ga4.ts]"]
  node_utm_tracking["External Link Tracking"]
end

node_visitor(("Portfolio Visitor"))

node_visitor -->|"opens portfolio"| node_app
node_app -->|"renders"| node_profile
node_profile -->|"renders"| node_visiting_card
node_app -->|"renders"| node_project_catalog
node_app -->|"renders"| node_architecture
node_architecture -->|"reads catalog"| node_architecture_data
node_app -->|"renders"| node_simulators
node_app -->|"renders"| node_motion_lab
node_motion_lab -->|"opens detail"| node_motion_detail
node_motion_detail -->|"renders experiment"| node_motion_experiment
node_app -->|"renders"| node_terminal
node_app -->|"renders"| node_resume
node_app -->|"renders"| node_layout_controls
node_layout_controls -->|"updates settings"| node_layout_state
node_app -->|"monitors runtime"| node_error_monitor
node_error_monitor -.-> node_analytics
node_app -->|"tracks external links"| node_utm_tracking
node_utm_tracking -->|"records link events"| node_analytics
node_project_catalog -.->|"displays portfolio content"| node_project_data
node_experience_contact -->|"reads content"| node_project_data
node_app -->|"renders sections"| node_experience_contact
node_app -->|"renders"| node_github_activity

click node_app "https://github.com/yogananthj/portfolio.dev/blob/main/src/App.tsx"
click node_profile "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/Hero.tsx"
click node_visiting_card "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/DigitalVisitingCard.tsx"
click node_project_catalog "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ProjectShowcase.tsx"
click node_project_data "https://github.com/yogananthj/portfolio.dev/blob/main/src/data/portfolioData.ts"
click node_experience_contact "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ExperienceSection.tsx"
click node_github_activity "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/GitHubActivitySection.tsx"
click node_architecture "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ArchitectureExplorer.tsx"
click node_architecture_data "https://github.com/yogananthj/portfolio.dev/blob/main/src/data/architectureData.ts"
click node_simulators "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/SimulatorsSection.tsx"
click node_motion_lab "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/motion-playground/MotionPlayground.tsx"
click node_motion_detail "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/motion-playground/detail/MotionExperimentPage.tsx"
click node_motion_experiment "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/motion-playground/experiments/GalacticCore.tsx"
click node_terminal "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/TerminalDrawer.tsx"
click node_resume "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ResumeModal.tsx"
click node_layout_controls "https://github.com/yogananthj/portfolio.dev/blob/main/src/components/LayoutController.tsx"
click node_layout_state "https://github.com/yogananthj/portfolio.dev/blob/main/src/context/LayoutContext.tsx"
click node_error_monitor "https://github.com/yogananthj/portfolio.dev/blob/main/src/hooks/useErrorMonitoring.ts"
click node_analytics "https://github.com/yogananthj/portfolio.dev/blob/main/src/utils/ga4.ts"
click node_utm_tracking "https://github.com/yogananthj/portfolio.dev/blob/main/src/hooks/useGlobalUtmTracking.ts"

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_app,node_profile,node_visiting_card,node_project_catalog,node_experience_contact,node_github_activity toneBlue
class node_architecture,node_simulators,node_motion_lab,node_motion_detail,node_motion_experiment toneAmber
class node_terminal,node_resume,node_layout_controls toneMint
class node_project_data,node_architecture_data,node_layout_state,node_error_monitor,node_analytics,node_utm_tracking toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio Experience

- [Application Shell](https://github.com/yogananthj/portfolio.dev/blob/main/src/App.tsx): `src/App.tsx`
- [Profile & Hero](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Digital Visiting Card](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/DigitalVisitingCard.tsx): `src/components/DigitalVisitingCard.tsx`
- [Project Showcase](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ProjectShowcase.tsx): `src/components/ProjectShowcase.tsx`
- [Experience & Contact](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ExperienceSection.tsx): `src/components/ExperienceSection.tsx`
- [GitHub Activity](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/GitHubActivitySection.tsx): `src/components/GitHubActivitySection.tsx`

### Interactive Labs

- [Architecture Explorer](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ArchitectureExplorer.tsx): `src/components/ArchitectureExplorer.tsx`
- [AI Project Simulators](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/SimulatorsSection.tsx): `src/components/SimulatorsSection.tsx`
- [Motion Playground](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/motion-playground/MotionPlayground.tsx): `src/components/motion-playground/MotionPlayground.tsx`
- [Experiment Detail](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/motion-playground/detail/MotionExperimentPage.tsx): `src/components/motion-playground/detail/MotionExperimentPage.tsx`
- [Galactic Core](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/motion-playground/experiments/GalacticCore.tsx): `src/components/motion-playground/experiments/GalacticCore.tsx`

### Workspace Tools

- [Developer CLI](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/TerminalDrawer.tsx): `src/components/TerminalDrawer.tsx`
- [Resume Modal](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/ResumeModal.tsx): `src/components/ResumeModal.tsx`
- [Workspace Controls](https://github.com/yogananthj/portfolio.dev/blob/main/src/components/LayoutController.tsx): `src/components/LayoutController.tsx`

### Shared Foundation

- [Portfolio Content](https://github.com/yogananthj/portfolio.dev/blob/main/src/data/portfolioData.ts): `src/data/portfolioData.ts`
- [Architecture Catalog](https://github.com/yogananthj/portfolio.dev/blob/main/src/data/architectureData.ts): `src/data/architectureData.ts`
- [Layout & Theme State](https://github.com/yogananthj/portfolio.dev/blob/main/src/context/LayoutContext.tsx): `src/context/LayoutContext.tsx`
- [Error Monitoring](https://github.com/yogananthj/portfolio.dev/blob/main/src/hooks/useErrorMonitoring.ts): `src/hooks/useErrorMonitoring.ts`
- [Analytics Utilities](https://github.com/yogananthj/portfolio.dev/blob/main/src/utils/ga4.ts): `src/utils/ga4.ts`
- [External Link Tracking](https://github.com/yogananthj/portfolio.dev/blob/main/src/hooks/useGlobalUtmTracking.ts): `src/hooks/useGlobalUtmTracking.ts`

### Other components

- **Portfolio Visitor**

## Connections

- Portfolio Visitor → Application Shell: opens portfolio (evidence: `README.md`)
- Application Shell → Profile & Hero: renders (evidence: `src/App.tsx`)
- Profile & Hero → Digital Visiting Card: renders (evidence: `src/components/Hero.tsx`)
- Application Shell → Project Showcase: renders (evidence: `src/App.tsx`)
- Application Shell → Architecture Explorer: renders (evidence: `src/App.tsx`)
- Architecture Explorer → Architecture Catalog: reads catalog (evidence: `src/components/ArchitectureExplorer.tsx`)
- Application Shell → AI Project Simulators: renders (evidence: `src/App.tsx`)
- Application Shell → Motion Playground: renders (evidence: `src/App.tsx`)
- Motion Playground → Experiment Detail: opens detail (evidence: `src/components/motion-playground/MotionPlayground.tsx`)
- Experiment Detail → Galactic Core: renders experiment (evidence: `src/components/motion-playground/detail/MotionExperimentPage.tsx`)
- Application Shell → Developer CLI: renders (evidence: `src/App.tsx`)
- Application Shell → Resume Modal: renders (evidence: `src/App.tsx`)
- Application Shell → Workspace Controls: renders (evidence: `src/App.tsx`)
- Workspace Controls → Layout & Theme State: updates settings (evidence: `src/components/LayoutController.tsx`)
- Application Shell → Error Monitoring: monitors runtime (evidence: `src/App.tsx`)
- Error Monitoring → Analytics Utilities
- Application Shell → External Link Tracking: tracks external links (evidence: `src/App.tsx`)
- External Link Tracking → Analytics Utilities: records link events (evidence: `src/hooks/useGlobalUtmTracking.ts`)
- Project Showcase → Portfolio Content: displays portfolio content (evidence: `README.md`)
- Experience & Contact → Portfolio Content: reads content (evidence: `src/components/ExperienceSection.tsx`)
- Application Shell → Experience & Contact: renders sections (evidence: `src/App.tsx`)
- Application Shell → GitHub Activity: renders (evidence: `src/App.tsx`)