# ankitpatel-20/portfolio-20 architecture

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

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

## Overview

This repository is a personal portfolio web app: visitors browse the owner’s profile, skills, projects, résumé, notes, and contact options; an administrator can manage portfolio content and review incoming records. The main runtime entry is App, which selects page sections and coordinates recruiter and meeting interfaces. Separate branches support local portfolio data and editing, Supabase-backed contact/appointment/note operations, and Google Meet sign-in and API access. The README is empty; edges are limited to relationships visible in the excerpts or SOURCE INDEX, so unsampled behavior is not inferred.

Main entry points: [`src/App.tsx`](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/App.tsx) (App Shell), [`src/utils/portfolioStorage.ts`](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/utils/portfolioStorage.ts) (Local Portfolio Storage), [`src/lib/supabase.ts`](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/supabase.ts) (Supabase Operations), [`src/data/portfolioData.ts`](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/data/portfolioData.ts) (Portfolio Content)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_portfolio["Portfolio Experience"]
  node_app["App Shell<br/>[App.tsx]"]
  node_home["Home Profile<br/>[HomeSection.tsx]"]
  node_about["About And Credentials<br/>[AboutSection.tsx]"]
  node_skills["Skills<br/>[SkillsSection.tsx]"]
  node_projects["Projects"]
  node_project_detail["Project Detail<br/>[ProjectModal.tsx]"]
  node_resume["Résumé<br/>[ResumeSection.tsx]"]
  node_socials["Social Links<br/>[SocialsSection.tsx]"]
  node_data_canvas["Data Canvas"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_engagement["Visitor Engagement"]
  node_notes["Notes And Notices<br/>[NotesSection.tsx]"]
  node_contact["Contact And Booking<br/>[ContactSection.tsx]"]
  node_scanner["ID Scanner<br/>[ScannerView.tsx]"]
  node_student_card["Student ID Card"]
  node_recruiter["Recruiter Drawer"]
  node_meet_modal["Meet Interface"]
end

subgraph group_admin["Administration"]
  node_project_editor["Project Editor"]
  node_resume_editor["Résumé Editor"]
  node_cv_upload["CV Upload<br/>[CVUploadModal.tsx]"]
  node_admin_panel["Admin Console"]
  node_admin_auth_modal["Admin Login<br/>[AdminAuthModal.tsx]"]
  node_admin_auth["Admin Auth State<br/>[adminAuth.ts]"]
  node_cert_editor["Certification Editor"]
end

subgraph group_services["Data And Integrations"]
  node_portfolio_data["Portfolio Content<br/>[portfolioData.ts]"]
  node_portfolio_storage[("Local Portfolio Storage")]
  node_supabase_lib["Supabase Operations<br/>[supabase.ts]"]
  node_meet_auth["Google Meet Auth<br/>[googleMeetAuth.ts]"]
  node_meet_api["Google Meet API Client<br/>[googleMeetApi.ts]"]
end

node_visitor(("Portfolio Visitor"))
node_supabase_service[("Supabase")]
node_firebase["Firebase Auth"]

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_home
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_resume
node_app -->|"renders"| node_socials
node_app -->|"renders"| node_notes
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_admin_panel
node_app -->|"renders"| node_recruiter
node_app -->|"renders"| node_meet_modal
node_app -->|"renders"| node_data_canvas
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_home -->|"opens"| node_student_card
node_home -->|"opens"| node_scanner
node_projects -->|"opens"| node_project_detail
node_projects -->|"opens"| node_project_editor
node_resume -->|"opens"| node_resume_editor
node_resume -->|"opens"| node_cv_upload
node_about -->|"opens"| node_cert_editor
node_about -->|"reads"| node_portfolio_data
node_skills -->|"reads"| node_portfolio_data
node_home -->|"reads"| node_portfolio_data
node_recruiter -->|"reads"| node_portfolio_data
node_student_card -->|"reads"| node_portfolio_data
node_notes -->|"loads"| node_portfolio_storage
node_notes -->|"saves notes"| node_supabase_lib
node_contact -->|"saves booking"| node_supabase_lib
node_scanner -->|"saves query"| node_supabase_lib
node_admin_panel -->|"loads records"| node_supabase_lib
node_supabase_lib -->|"reads and writes"| node_supabase_service
node_projects -->|"persists edits"| node_portfolio_storage
node_project_editor -->|"persists project"| node_portfolio_storage
node_resume_editor -->|"persists résumé"| node_portfolio_storage
node_cv_upload -->|"stores CV"| node_portfolio_storage
node_cert_editor -->|"persists credentials"| node_portfolio_storage
node_admin_panel -->|"checks access"| node_admin_auth
node_admin_auth_modal -->|"authenticates"| node_admin_auth
node_notes -->|"checks access"| node_admin_auth
node_meet_modal -->|"signs in"| node_meet_auth
node_meet_modal -->|"requests Meet"| node_meet_api
node_meet_auth -->|"authenticates"| node_firebase

click node_app "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/App.tsx"
click node_home "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/HomeSection.tsx"
click node_about "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/AboutSection.tsx"
click node_skills "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/SkillsSection.tsx"
click node_projects "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ProjectsSection.tsx"
click node_project_detail "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ProjectModal.tsx"
click node_project_editor "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ProjectEditorModal.tsx"
click node_resume "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ResumeSection.tsx"
click node_resume_editor "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ResumeEditorModal.tsx"
click node_cv_upload "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/CVUploadModal.tsx"
click node_socials "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/SocialsSection.tsx"
click node_notes "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/NotesSection.tsx"
click node_contact "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ContactSection.tsx"
click node_scanner "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ScannerView.tsx"
click node_student_card "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/StudentIDCardModal.tsx"
click node_recruiter "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/RecruiterDrawer.tsx"
click node_meet_modal "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/GoogleMeetModal.tsx"
click node_admin_panel "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/AdminPanelSection.tsx"
click node_admin_auth_modal "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/AdminAuthModal.tsx"
click node_admin_auth "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/utils/adminAuth.ts"
click node_cert_editor "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/CertificationEditorModal.tsx"
click node_portfolio_data "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/data/portfolioData.ts"
click node_portfolio_storage "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/utils/portfolioStorage.ts"
click node_supabase_lib "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/supabase.ts"
click node_meet_auth "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/googleMeetAuth.ts"
click node_meet_api "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/googleMeetApi.ts"
click node_data_canvas "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/DataUniverseCanvas.tsx"
click node_navbar "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/Navbar.tsx"
click node_footer "https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/Footer.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_app,node_home,node_about,node_skills,node_projects,node_project_detail,node_resume,node_socials,node_data_canvas,node_navbar,node_footer toneBlue
class node_notes,node_contact,node_scanner,node_student_card,node_recruiter,node_meet_modal,node_supabase_service toneAmber
class node_project_editor,node_resume_editor,node_cv_upload,node_admin_panel,node_admin_auth_modal,node_admin_auth,node_cert_editor toneMint
class node_portfolio_data,node_portfolio_storage,node_supabase_lib,node_meet_auth,node_meet_api toneRose
class node_visitor,node_firebase toneIndigo
```

## Components

### Portfolio Experience

- [App Shell](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/App.tsx): `src/App.tsx`
- [Home Profile](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/HomeSection.tsx): `src/components/HomeSection.tsx`
- [About And Credentials](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/AboutSection.tsx): `src/components/AboutSection.tsx`
- [Skills](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/SkillsSection.tsx): `src/components/SkillsSection.tsx`
- [Projects](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ProjectsSection.tsx): `src/components/ProjectsSection.tsx`
- [Project Detail](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ProjectModal.tsx): `src/components/ProjectModal.tsx`
- [Résumé](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ResumeSection.tsx): `src/components/ResumeSection.tsx`
- [Social Links](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/SocialsSection.tsx): `src/components/SocialsSection.tsx`
- [Data Canvas](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/DataUniverseCanvas.tsx): `src/components/DataUniverseCanvas.tsx`
- [Navigation](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Footer](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Visitor Engagement

- [Notes And Notices](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/NotesSection.tsx): `src/components/NotesSection.tsx`
- [Contact And Booking](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ContactSection.tsx): `src/components/ContactSection.tsx`
- [ID Scanner](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ScannerView.tsx): `src/components/ScannerView.tsx`
- [Student ID Card](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/StudentIDCardModal.tsx): `src/components/StudentIDCardModal.tsx`
- [Recruiter Drawer](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/RecruiterDrawer.tsx): `src/components/RecruiterDrawer.tsx`
- [Meet Interface](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/GoogleMeetModal.tsx): `src/components/GoogleMeetModal.tsx`

### Administration

- [Project Editor](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ProjectEditorModal.tsx): `src/components/ProjectEditorModal.tsx`
- [Résumé Editor](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/ResumeEditorModal.tsx): `src/components/ResumeEditorModal.tsx`
- [CV Upload](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/CVUploadModal.tsx): `src/components/CVUploadModal.tsx`
- [Admin Console](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/AdminPanelSection.tsx): `src/components/AdminPanelSection.tsx`
- [Admin Login](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/AdminAuthModal.tsx): `src/components/AdminAuthModal.tsx`
- [Admin Auth State](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/utils/adminAuth.ts): `src/utils/adminAuth.ts`
- [Certification Editor](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/components/CertificationEditorModal.tsx): `src/components/CertificationEditorModal.tsx`

### Data And Integrations

- [Portfolio Content](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/data/portfolioData.ts): `src/data/portfolioData.ts`
- [Local Portfolio Storage](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/utils/portfolioStorage.ts): `src/utils/portfolioStorage.ts`
- [Supabase Operations](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`
- [Google Meet Auth](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/googleMeetAuth.ts): `src/lib/googleMeetAuth.ts`
- [Google Meet API Client](https://github.com/ankitpatel-20/portfolio-20/blob/main/src/lib/googleMeetApi.ts): `src/lib/googleMeetApi.ts`

### Other components

- **Portfolio Visitor**
- **Supabase**
- **Firebase Auth**

## Connections

- Portfolio Visitor → App Shell: opens (evidence: `src/App.tsx`)
- App Shell → Home Profile: renders (evidence: `src/App.tsx`)
- App Shell → About And Credentials: renders (evidence: `src/App.tsx`)
- App Shell → Skills: renders (evidence: `src/App.tsx`)
- App Shell → Projects: renders (evidence: `src/App.tsx`)
- App Shell → Résumé: renders (evidence: `src/App.tsx`)
- App Shell → Social Links: renders (evidence: `src/App.tsx`)
- App Shell → Notes And Notices: renders (evidence: `src/App.tsx`)
- App Shell → Contact And Booking: renders (evidence: `src/App.tsx`)
- App Shell → Admin Console: renders (evidence: `src/App.tsx`)
- App Shell → Recruiter Drawer: renders (evidence: `src/App.tsx`)
- App Shell → Meet Interface: renders (evidence: `src/App.tsx`)
- App Shell → Data Canvas: renders (evidence: `src/App.tsx`)
- App Shell → Navigation: renders (evidence: `src/App.tsx`)
- App Shell → Footer: renders (evidence: `src/App.tsx`)
- Home Profile → Student ID Card: opens (evidence: `src/components/HomeSection.tsx`)
- Home Profile → ID Scanner: opens (evidence: `src/components/HomeSection.tsx`)
- Projects → Project Detail: opens (evidence: `src/components/ProjectsSection.tsx`)
- Projects → Project Editor: opens (evidence: `src/components/ProjectsSection.tsx`)
- Résumé → Résumé Editor: opens (evidence: `src/components/ResumeSection.tsx`)
- Résumé → CV Upload: opens (evidence: `src/components/ResumeSection.tsx`)
- About And Credentials → Certification Editor: opens (evidence: `src/components/AboutSection.tsx`)
- About And Credentials → Portfolio Content: reads (evidence: `src/components/AboutSection.tsx`)
- Skills → Portfolio Content: reads (evidence: `src/components/SkillsSection.tsx`)
- Home Profile → Portfolio Content: reads (evidence: `src/components/HomeSection.tsx`)
- Recruiter Drawer → Portfolio Content: reads (evidence: `src/components/RecruiterDrawer.tsx`)
- Student ID Card → Portfolio Content: reads (evidence: `src/components/StudentIDCardModal.tsx`)
- Notes And Notices → Local Portfolio Storage: loads (evidence: `src/components/NotesSection.tsx`)
- Notes And Notices → Supabase Operations: saves notes (evidence: `src/components/NotesSection.tsx`)
- Contact And Booking → Supabase Operations: saves booking (evidence: `src/components/ContactSection.tsx`)
- ID Scanner → Supabase Operations: saves query (evidence: `src/components/ScannerView.tsx`)
- Admin Console → Supabase Operations: loads records (evidence: `src/components/AdminPanelSection.tsx`)
- Supabase Operations → Supabase: reads and writes (evidence: `src/lib/supabase.ts`)
- Projects → Local Portfolio Storage: persists edits (evidence: `src/components/ProjectsSection.tsx`)
- Project Editor → Local Portfolio Storage: persists project (evidence: `src/components/ProjectEditorModal.tsx`)
- Résumé Editor → Local Portfolio Storage: persists résumé (evidence: `src/components/ResumeEditorModal.tsx`)
- CV Upload → Local Portfolio Storage: stores CV (evidence: `src/components/CVUploadModal.tsx`)
- Certification Editor → Local Portfolio Storage: persists credentials (evidence: `src/components/CertificationEditorModal.tsx`)
- Admin Console → Admin Auth State: checks access (evidence: `src/components/AdminPanelSection.tsx`)
- Admin Login → Admin Auth State: authenticates (evidence: `src/components/AdminAuthModal.tsx`)
- Notes And Notices → Admin Auth State: checks access (evidence: `src/components/NotesSection.tsx`)
- Meet Interface → Google Meet Auth: signs in (evidence: `src/components/GoogleMeetModal.tsx`)
- Meet Interface → Google Meet API Client: requests Meet (evidence: `src/components/GoogleMeetModal.tsx`)
- Google Meet Auth → Firebase Auth: authenticates (evidence: `src/lib/googleMeetAuth.ts`)