# akshatdev2002/dataakshx_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/akshatdev2002/dataakshx_portfolio
- Repository: https://github.com/akshatdev2002/dataakshx_portfolio

## Overview

This is a cyberpunk-themed personal portfolio presented as a data-engineering pipeline. Visitors browse profile and resource pages, can explore the portfolio’s interactive ETL-style DAG and open profile sections, or submit a contact message. The DAG’s stage layout and major site capabilities are documented in the README; sampled source confirms its rendering/modal routing and contact verification/email flow. Wiring from the homepage and the resource/resume page implementations was not sampled, so those links are kept conservative.

Main entry points: [`src/components/Modal/PipelineModal.tsx`](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Modal/PipelineModal.tsx) (Task Detail Modal), [`src/components/Pipeline/Pipeline.tsx`](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/Pipeline.tsx) (DAG Canvas), [`src/components/contact/Contact.tsx`](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/contact/Contact.tsx) (Contact Form), [`src/app/api/contact/route.ts`](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/api/contact/route.ts) (Contact API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio DAG"]
  node_portfolio["Portfolio Page<br/>[page.tsx]"]
  node_ingest["Visitor Ingestion<br/>[IngestionCard.tsx]"]
  node_pipeline["DAG Canvas<br/>[Pipeline.tsx]"]
  node_dag_node["Task Cards<br/>[PipelineNode.tsx]"]
  node_connectors["DAG Connectors"]
  node_modal["Task Detail Modal<br/>[PipelineModal.tsx]"]
  node_about["About Stage<br/>[About.tsx]"]
  node_experience_stage["Experience Stage<br/>[Experience.tsx]"]
  node_skills["Skills Stage<br/>[Skills.tsx]"]
  node_education["Education Stage<br/>[Education.tsx]"]
  node_projects["Projects Stage<br/>[Projects.tsx]"]
  node_freelancing["Freelancing Stage<br/>[Freelancing.tsx]"]
end

subgraph group_site["Portfolio Site"]
  node_home["Homepage<br/>[page.tsx]"]
  node_scene["3D Scene"]
  node_resources["Resources Page<br/>[page.tsx]"]
  node_resume["Resume Page<br/>[page.tsx]"]
end

subgraph group_contact["Contact Flow"]
  node_contact_page["Contact Page<br/>[page.tsx]"]
  node_contact_form["Contact Form<br/>[Contact.tsx]"]
  node_contact_api["Contact API<br/>[route.ts]"]
end

subgraph group_integrations["External Services"]
  node_recaptcha["Google reCAPTCHA"]
  node_smtp["SMTP Mail Service"]
end

node_visitor(("Visitor"))
node_mail_recipient(("Contact Recipient"))

node_visitor -->|"browses"| node_home
node_home -->|"shows"| node_scene
node_visitor -->|"opens"| node_portfolio
node_portfolio -->|"renders"| node_pipeline
node_visitor -->|"enters details"| node_ingest
node_ingest -->|"completes intake"| node_pipeline
node_pipeline -->|"renders"| node_dag_node
node_pipeline -->|"renders"| node_connectors
node_dag_node -->|"clicks task"| node_pipeline
node_pipeline -->|"opens task"| node_modal
node_modal -->|"routes content"| node_about
node_modal -->|"routes content"| node_experience_stage
node_modal -->|"routes content"| node_skills
node_modal -->|"routes content"| node_education
node_modal -->|"routes content"| node_projects
node_modal -->|"routes content"| node_freelancing
node_visitor -->|"opens"| node_resources
node_visitor -->|"opens"| node_resume
node_visitor -->|"opens"| node_contact_page
node_contact_page -->|"renders"| node_contact_form
node_contact_form -->|"requests token"| node_recaptcha
node_contact_form -->|"POSTs message"| node_contact_api
node_contact_api -->|"verifies token"| node_recaptcha
node_contact_api -->|"sends email"| node_smtp
node_smtp -->|"delivers email"| node_mail_recipient

click node_home "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/page.tsx"
click node_scene "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/ThreeBackground/HackerSceneClient.tsx"
click node_portfolio "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/portfolio/page.tsx"
click node_ingest "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Ingestion/IngestionCard.tsx"
click node_pipeline "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/Pipeline.tsx"
click node_dag_node "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/PipelineNode.tsx"
click node_connectors "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/PipelineConnector.tsx"
click node_modal "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Modal/PipelineModal.tsx"
click node_about "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/About.tsx"
click node_experience_stage "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Experience.tsx"
click node_skills "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Skills.tsx"
click node_education "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Education.tsx"
click node_projects "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Projects.tsx"
click node_freelancing "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Freelancing.tsx"
click node_resources "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/resources/page.tsx"
click node_resume "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/resume/page.tsx"
click node_contact_page "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/contact/page.tsx"
click node_contact_form "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/contact/Contact.tsx"
click node_contact_api "https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/api/contact/route.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_portfolio,node_ingest,node_pipeline,node_dag_node,node_connectors,node_modal,node_about,node_experience_stage,node_skills,node_education,node_projects,node_freelancing toneBlue
class node_home,node_scene,node_resources,node_resume toneAmber
class node_contact_page,node_contact_form,node_contact_api toneMint
class node_recaptcha,node_smtp toneRose
class node_visitor,node_mail_recipient toneIndigo
```

## Components

### Portfolio DAG

- [Portfolio Page](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/portfolio/page.tsx): `src/app/portfolio/page.tsx`
- [Visitor Ingestion](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Ingestion/IngestionCard.tsx): `src/components/Ingestion/IngestionCard.tsx`
- [DAG Canvas](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/Pipeline.tsx): `src/components/Pipeline/Pipeline.tsx`
- [Task Cards](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/PipelineNode.tsx): `src/components/Pipeline/PipelineNode.tsx`
- [DAG Connectors](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Pipeline/PipelineConnector.tsx): `src/components/Pipeline/PipelineConnector.tsx`
- [Task Detail Modal](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Modal/PipelineModal.tsx): `src/components/Modal/PipelineModal.tsx`
- [About Stage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/About.tsx): `src/components/Sections/About.tsx`
- [Experience Stage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Experience.tsx): `src/components/Sections/Experience.tsx`
- [Skills Stage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Skills.tsx): `src/components/Sections/Skills.tsx`
- [Education Stage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Education.tsx): `src/components/Sections/Education.tsx`
- [Projects Stage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Projects.tsx): `src/components/Sections/Projects.tsx`
- [Freelancing Stage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/Sections/Freelancing.tsx): `src/components/Sections/Freelancing.tsx`

### Portfolio Site

- [Homepage](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [3D Scene](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/ThreeBackground/HackerSceneClient.tsx): `src/components/ThreeBackground/HackerSceneClient.tsx`
- [Resources Page](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/resources/page.tsx): `src/app/resources/page.tsx`
- [Resume Page](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/resume/page.tsx): `src/app/resume/page.tsx`

### Contact Flow

- [Contact Page](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`
- [Contact Form](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/components/contact/Contact.tsx): `src/components/contact/Contact.tsx`
- [Contact API](https://github.com/akshatdev2002/dataakshx_portfolio/blob/main/src/app/api/contact/route.ts): `src/app/api/contact/route.ts`

### External Services

- **Google reCAPTCHA**
- **SMTP Mail Service**

### Other components

- **Visitor**
- **Contact Recipient**

## Connections

- Visitor → Homepage: browses
- Homepage → 3D Scene: shows
- Visitor → Portfolio Page: opens
- Portfolio Page → DAG Canvas: renders
- Visitor → Visitor Ingestion: enters details
- Visitor Ingestion → DAG Canvas: completes intake
- DAG Canvas → Task Cards: renders
- DAG Canvas → DAG Connectors: renders
- Task Cards → DAG Canvas: clicks task
- DAG Canvas → Task Detail Modal: opens task
- Task Detail Modal → About Stage: routes content
- Task Detail Modal → Experience Stage: routes content
- Task Detail Modal → Skills Stage: routes content
- Task Detail Modal → Education Stage: routes content
- Task Detail Modal → Projects Stage: routes content
- Task Detail Modal → Freelancing Stage: routes content
- Visitor → Resources Page: opens
- Visitor → Resume Page: opens
- Visitor → Contact Page: opens
- Contact Page → Contact Form: renders
- Contact Form → Google reCAPTCHA: requests token
- Contact Form → Contact API: POSTs message
- Contact API → Google reCAPTCHA: verifies token
- Contact API → SMTP Mail Service: sends email
- SMTP Mail Service → Contact Recipient: delivers email