# cybertechguruji/portfolio architecture

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

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

## Overview

This is a data-analyst portfolio website: visitors browse project case studies and dashboards, read articles, learn about the analyst, and make contact. The main content workflow loads Markdown and notebook files into listing or slug pages, which render case studies with interactive dashboard/notebook views. The graph also includes the portfolio’s biography, testimonials, résumé/certifications, contact, navigation, and theme capabilities. Some component implementations were only indexed or partially excerpted, so uncertain interactions are omitted.

Main entry points: [`src/lib/markdown.ts`](https://github.com/cybertechguruji/portfolio/blob/main/src/lib/markdown.ts) (Markdown content), [`src/app/page.tsx`](https://github.com/cybertechguruji/portfolio/blob/main/src/app/page.tsx) (Home page), [`src/app/layout.tsx`](https://github.com/cybertechguruji/portfolio/blob/main/src/app/layout.tsx) (Site shell), [`src/app/projects/[slug]/page.tsx`](https://github.com/cybertechguruji/portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx) (Project detail)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Portfolio experience"]
  node_site_shell["Site shell<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
  node_navigation["Navigation<br/>[navbar.tsx]"]
  node_footer["Footer<br/>[footer.tsx]"]
  node_theme["Theme controls<br/>[theme-toggle.tsx]"]
  node_analytics_console["Analytics console"]
  node_content_card["Content card<br/>[card.tsx]"]
end

subgraph group_content["Content publishing"]
  node_content_store["Markdown content<br/>[markdown.ts]"]
  node_notebook_parser["Notebook parser<br/>[notebook.ts]"]
  node_content_files["Articles and projects"]
  node_blog_list["Article listing<br/>[page.tsx]"]
  node_blog_detail["Article detail<br/>[page.tsx]"]
end

subgraph group_projects["Project showcases"]
  node_project_list["Project listing<br/>[page.tsx]"]
  node_project_detail["Project detail<br/>[page.tsx]"]
  node_dashboard["Interactive dashboard"]
  node_notebook_view["Notebook viewer"]
end

subgraph group_profile["Profile and contact"]
  node_profile_page["About page<br/>[page.tsx]"]
  node_profile_data["Profile content<br/>[about.ts]"]
  node_certificates["Certificate list"]
  node_testimonials["Testimonial carousel"]
  node_contact_page["Contact page<br/>[page.tsx]"]
  node_contact_data["Contact details<br/>[contact.ts]"]
  node_contact_form["Contact form<br/>[contact-form.tsx]"]
  node_email_card["Email copy card"]
end

node_visitor(("Portfolio visitor"))
node_external_contact(("Form email service"))

node_visitor -->|"opens site"| node_site_shell
node_site_shell -->|"renders"| node_navigation
node_site_shell -->|"renders"| node_footer
node_site_shell -->|"provides theme"| node_theme
node_visitor -->|"opens home"| node_home
node_home -->|"loads listings"| node_content_store
node_home -->|"renders cards"| node_content_card
node_home -->|"renders"| node_analytics_console
node_home -->|"renders"| node_testimonials
node_visitor -->|"browses articles"| node_blog_list
node_blog_list -->|"loads articles"| node_content_store
node_blog_list -->|"renders cards"| node_content_card
node_visitor -->|"reads article"| node_blog_detail
node_blog_detail -->|"loads article"| node_content_store
node_visitor -->|"browses projects"| node_project_list
node_project_list -->|"loads projects"| node_content_store
node_project_list -->|"renders cards"| node_content_card
node_visitor -->|"opens case study"| node_project_detail
node_project_detail -->|"loads project"| node_content_store
node_project_detail -->|"renders dashboard"| node_dashboard
node_project_detail -->|"renders notebook"| node_notebook_view
node_content_store -->|"reads content"| node_content_files
node_content_store -->|"parses notebook"| node_notebook_parser
node_notebook_view -->|"displays parsed cells"| node_notebook_parser
node_visitor -->|"views profile"| node_profile_page
node_profile_page -->|"uses profile"| node_profile_data
node_profile_page -->|"renders certificates"| node_certificates
node_profile_page -->|"renders testimonials"| node_testimonials
node_visitor -->|"opens contact"| node_contact_page
node_contact_page -->|"renders form"| node_contact_form
node_contact_page -->|"renders email card"| node_email_card
node_contact_page -->|"uses contact details"| node_contact_data
node_contact_form -->|"uses configuration"| node_contact_data
node_contact_form -.->|"submits form"| node_external_contact

click node_site_shell "https://github.com/cybertechguruji/portfolio/blob/main/src/app/layout.tsx"
click node_home "https://github.com/cybertechguruji/portfolio/blob/main/src/app/page.tsx"
click node_navigation "https://github.com/cybertechguruji/portfolio/blob/main/src/components/navbar.tsx"
click node_footer "https://github.com/cybertechguruji/portfolio/blob/main/src/components/footer.tsx"
click node_theme "https://github.com/cybertechguruji/portfolio/blob/main/src/components/theme-toggle.tsx"
click node_analytics_console "https://github.com/cybertechguruji/portfolio/blob/main/src/components/analytics-console.tsx"
click node_content_card "https://github.com/cybertechguruji/portfolio/blob/main/src/components/card.tsx"
click node_content_store "https://github.com/cybertechguruji/portfolio/blob/main/src/lib/markdown.ts"
click node_notebook_parser "https://github.com/cybertechguruji/portfolio/blob/main/src/lib/notebook.ts"
click node_content_files "https://github.com/cybertechguruji/portfolio/tree/main/content"
click node_blog_list "https://github.com/cybertechguruji/portfolio/blob/main/src/app/blogs/page.tsx"
click node_blog_detail "https://github.com/cybertechguruji/portfolio/blob/main/src/app/blogs/%5Bslug%5D/page.tsx"
click node_project_list "https://github.com/cybertechguruji/portfolio/blob/main/src/app/projects/page.tsx"
click node_project_detail "https://github.com/cybertechguruji/portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx"
click node_dashboard "https://github.com/cybertechguruji/portfolio/blob/main/src/components/project-dashboard.tsx"
click node_notebook_view "https://github.com/cybertechguruji/portfolio/blob/main/src/components/project-notebook.tsx"
click node_profile_page "https://github.com/cybertechguruji/portfolio/blob/main/src/app/about/page.tsx"
click node_profile_data "https://github.com/cybertechguruji/portfolio/blob/main/src/data/about.ts"
click node_certificates "https://github.com/cybertechguruji/portfolio/blob/main/src/components/certificate-list.tsx"
click node_testimonials "https://github.com/cybertechguruji/portfolio/blob/main/src/components/testimonial-carousel.tsx"
click node_contact_page "https://github.com/cybertechguruji/portfolio/blob/main/src/app/contact/page.tsx"
click node_contact_data "https://github.com/cybertechguruji/portfolio/blob/main/src/data/contact.ts"
click node_contact_form "https://github.com/cybertechguruji/portfolio/blob/main/src/components/contact-form.tsx"
click node_email_card "https://github.com/cybertechguruji/portfolio/blob/main/src/components/email-copy-card.tsx"

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_site_shell,node_home,node_navigation,node_footer,node_theme,node_analytics_console,node_content_card toneBlue
class node_content_store,node_notebook_parser,node_content_files,node_blog_list,node_blog_detail toneAmber
class node_project_list,node_project_detail,node_dashboard,node_notebook_view toneMint
class node_profile_page,node_profile_data,node_certificates,node_testimonials,node_contact_page,node_contact_data,node_contact_form,node_email_card toneRose
class node_visitor,node_external_contact toneIndigo
```

## Components

### Portfolio experience

- [Site shell](https://github.com/cybertechguruji/portfolio/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home page](https://github.com/cybertechguruji/portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Navigation](https://github.com/cybertechguruji/portfolio/blob/main/src/components/navbar.tsx): `src/components/navbar.tsx`
- [Footer](https://github.com/cybertechguruji/portfolio/blob/main/src/components/footer.tsx): `src/components/footer.tsx`
- [Theme controls](https://github.com/cybertechguruji/portfolio/blob/main/src/components/theme-toggle.tsx): `src/components/theme-toggle.tsx`
- [Analytics console](https://github.com/cybertechguruji/portfolio/blob/main/src/components/analytics-console.tsx): `src/components/analytics-console.tsx`
- [Content card](https://github.com/cybertechguruji/portfolio/blob/main/src/components/card.tsx): `src/components/card.tsx`

### Content publishing

- [Markdown content](https://github.com/cybertechguruji/portfolio/blob/main/src/lib/markdown.ts): `src/lib/markdown.ts`
- [Notebook parser](https://github.com/cybertechguruji/portfolio/blob/main/src/lib/notebook.ts): `src/lib/notebook.ts`
- [Articles and projects](https://github.com/cybertechguruji/portfolio/tree/main/content): `content`
- [Article listing](https://github.com/cybertechguruji/portfolio/blob/main/src/app/blogs/page.tsx): `src/app/blogs/page.tsx`
- [Article detail](https://github.com/cybertechguruji/portfolio/blob/main/src/app/blogs/%5Bslug%5D/page.tsx): `src/app/blogs/[slug]/page.tsx`

### Project showcases

- [Project listing](https://github.com/cybertechguruji/portfolio/blob/main/src/app/projects/page.tsx): `src/app/projects/page.tsx`
- [Project detail](https://github.com/cybertechguruji/portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx): `src/app/projects/[slug]/page.tsx`
- [Interactive dashboard](https://github.com/cybertechguruji/portfolio/blob/main/src/components/project-dashboard.tsx): `src/components/project-dashboard.tsx`
- [Notebook viewer](https://github.com/cybertechguruji/portfolio/blob/main/src/components/project-notebook.tsx): `src/components/project-notebook.tsx`

### Profile and contact

- [About page](https://github.com/cybertechguruji/portfolio/blob/main/src/app/about/page.tsx): `src/app/about/page.tsx`
- [Profile content](https://github.com/cybertechguruji/portfolio/blob/main/src/data/about.ts): `src/data/about.ts`
- [Certificate list](https://github.com/cybertechguruji/portfolio/blob/main/src/components/certificate-list.tsx): `src/components/certificate-list.tsx`
- [Testimonial carousel](https://github.com/cybertechguruji/portfolio/blob/main/src/components/testimonial-carousel.tsx): `src/components/testimonial-carousel.tsx`
- [Contact page](https://github.com/cybertechguruji/portfolio/blob/main/src/app/contact/page.tsx): `src/app/contact/page.tsx`
- [Contact details](https://github.com/cybertechguruji/portfolio/blob/main/src/data/contact.ts): `src/data/contact.ts`
- [Contact form](https://github.com/cybertechguruji/portfolio/blob/main/src/components/contact-form.tsx): `src/components/contact-form.tsx`
- [Email copy card](https://github.com/cybertechguruji/portfolio/blob/main/src/components/email-copy-card.tsx): `src/components/email-copy-card.tsx`

### Other components

- **Portfolio visitor**
- **Form email service**

## Connections

- Portfolio visitor → Site shell: opens site (evidence: `README.md`)
- Site shell → Navigation: renders (evidence: `src/app/layout.tsx`)
- Site shell → Footer: renders (evidence: `src/app/layout.tsx`)
- Site shell → Theme controls: provides theme (evidence: `src/app/layout.tsx`)
- Portfolio visitor → Home page: opens home (evidence: `README.md`)
- Home page → Markdown content: loads listings (evidence: `src/app/page.tsx`)
- Home page → Content card: renders cards (evidence: `src/app/page.tsx`)
- Home page → Analytics console: renders (evidence: `src/app/page.tsx`)
- Home page → Testimonial carousel: renders (evidence: `src/app/page.tsx`)
- Portfolio visitor → Article listing: browses articles (evidence: `README.md`)
- Article listing → Markdown content: loads articles (evidence: `src/app/blogs/page.tsx`)
- Article listing → Content card: renders cards (evidence: `src/app/blogs/page.tsx`)
- Portfolio visitor → Article detail: reads article (evidence: `README.md`)
- Article detail → Markdown content: loads article (evidence: `src/app/blogs/[slug]/page.tsx`)
- Portfolio visitor → Project listing: browses projects (evidence: `README.md`)
- Project listing → Markdown content: loads projects (evidence: `src/app/projects/page.tsx`)
- Project listing → Content card: renders cards (evidence: `src/app/projects/page.tsx`)
- Portfolio visitor → Project detail: opens case study (evidence: `README.md`)
- Project detail → Markdown content: loads project (evidence: `src/app/projects/[slug]/page.tsx`)
- Project detail → Interactive dashboard: renders dashboard (evidence: `src/app/projects/[slug]/page.tsx`)
- Project detail → Notebook viewer: renders notebook (evidence: `src/app/projects/[slug]/page.tsx`)
- Markdown content → Articles and projects: reads content (evidence: `src/lib/markdown.ts`)
- Markdown content → Notebook parser: parses notebook (evidence: `src/lib/markdown.ts`)
- Notebook viewer → Notebook parser: displays parsed cells (evidence: `src/components/project-notebook.tsx`)
- Portfolio visitor → About page: views profile (evidence: `README.md`)
- About page → Profile content: uses profile (evidence: `src/app/about/page.tsx`)
- About page → Certificate list: renders certificates (evidence: `src/app/about/page.tsx`)
- About page → Testimonial carousel: renders testimonials (evidence: `src/app/about/page.tsx`)
- Portfolio visitor → Contact page: opens contact (evidence: `README.md`)
- Contact page → Contact form: renders form (evidence: `src/app/contact/page.tsx`)
- Contact page → Email copy card: renders email card (evidence: `src/app/contact/page.tsx`)
- Contact page → Contact details: uses contact details (evidence: `src/app/contact/page.tsx`)
- Contact form → Contact details: uses configuration (evidence: `src/components/contact-form.tsx`)
- Contact form → Form email service: submits form