# michelecolella/portfolio architecture

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

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

## Overview

This is a bilingual, Firebase-backed portfolio website with a public portfolio and a protected admin area. The main visitor flow loads portfolio and project data, presents profile, timeline, technology, certification, and project sections, and supports browsing project details. Administrators authenticate to manage portfolio content; they can also export portfolio data as a downloadable archive. The excerpts establish the data and export paths, but do not show admin-tab wiring, so those interactions are not connected here.

Main entry points: [`src/pages/Home.tsx`](https://github.com/michelecolella/portfolio/blob/main/src/pages/Home.tsx) (Portfolio page), [`src/App.tsx`](https://github.com/michelecolella/portfolio/blob/main/src/App.tsx) (App router), [`src/lib/dal/index.ts`](https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/index.ts) (Data access layer), [`src/lib/export/portfolioExporter.ts`](https://github.com/michelecolella/portfolio/blob/main/src/lib/export/portfolioExporter.ts) (Portfolio exporter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Application"]
  node_app["App router<br/>[App.tsx]"]
  node_language["Language context<br/>[index.tsx]"]
  node_mobile["Mobile preview"]
end

subgraph group_public["Public portfolio"]
  node_home["Portfolio page<br/>[Home.tsx]"]
  node_projects["Project loader<br/>[useProjects.ts]"]
  node_projectcards["Project cards<br/>[ProjectCard.tsx]"]
  node_projectmodal["Project details<br/>[ProjectModal.tsx]"]
  node_filter["Project filters<br/>[FilterBar.tsx]"]
  node_tech["Technology tabs<br/>[TechTabs.tsx]"]
  node_carousel["Certification carousel<br/>[Carousel.tsx]"]
end

subgraph group_admin["Administration"]
  node_adminpage["Admin routes<br/>[index.tsx]"]
  node_dashboard["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_tabs["Content editors"]
  node_login["Admin login<br/>[AdminLogin.tsx]"]
  node_authcontext["Admin auth context"]
  node_exportbutton["Export control"]
end

subgraph group_data["Data and export"]
  node_portfolio["Portfolio data context"]
  node_exporthook["Export controller<br/>[useDataExport.ts]"]
  node_exporter["Portfolio exporter"]
  node_markdown["Markdown formatter<br/>[markdown.ts]"]
  node_media["Media downloader<br/>[mediaDownloader.ts]"]
  node_dal["Data access layer<br/>[index.ts]"]
  node_database["Firestore provider<br/>[database.ts]"]
  node_auth["Firebase auth<br/>[auth.ts]"]
  node_storage["Firebase storage<br/>[storage.ts]"]
end

node_visitor(("Visitor"))
node_administrator(("Administrator"))
node_firebase[("Firebase services")]
node_download(("Browser download"))

node_visitor -->|"opens"| node_app
node_administrator -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_adminpage
node_app -->|"provides"| node_language
node_app -->|"provides"| node_mobile
node_app -->|"provides"| node_portfolio
node_home -->|"reads"| node_portfolio
node_home -->|"loads"| node_projects
node_home -->|"renders"| node_projectcards
node_home -->|"renders"| node_projectmodal
node_home -->|"renders"| node_filter
node_home -->|"renders"| node_tech
node_home -->|"renders"| node_carousel
node_portfolio -->|"subscribes via"| node_dal
node_projects -->|"queries via"| node_dal
node_adminpage -->|"routes"| node_dashboard
node_adminpage -->|"routes"| node_login
node_login -->|"authenticates via"| node_authcontext
node_authcontext -->|"calls"| node_dal
node_dashboard -->|"hosts"| node_tabs
node_dashboard -->|"offers"| node_exportbutton
node_exportbutton -->|"starts"| node_exporthook
node_exporthook -->|"runs"| node_exporter
node_exporthook -->|"downloads"| node_download
node_exporter -->|"formats"| node_markdown
node_exporter -->|"downloads assets"| node_media
node_exporter -->|"reads via"| node_dal
node_dal -->|"delegates"| node_database
node_dal -->|"delegates"| node_auth
node_dal -->|"delegates"| node_storage
node_database -->|"reads/writes"| node_firebase
node_auth -->|"authenticates"| node_firebase
node_storage -->|"transfers files"| node_firebase

click node_app "https://github.com/michelecolella/portfolio/blob/main/src/App.tsx"
click node_language "https://github.com/michelecolella/portfolio/blob/main/src/i18n/index.tsx"
click node_mobile "https://github.com/michelecolella/portfolio/blob/main/src/context/MobilePreviewContext.tsx"
click node_home "https://github.com/michelecolella/portfolio/blob/main/src/pages/Home.tsx"
click node_projects "https://github.com/michelecolella/portfolio/blob/main/src/hooks/useProjects.ts"
click node_portfolio "https://github.com/michelecolella/portfolio/blob/main/src/hooks/usePortfolioData.tsx"
click node_projectcards "https://github.com/michelecolella/portfolio/blob/main/src/components/projects/ProjectCard.tsx"
click node_projectmodal "https://github.com/michelecolella/portfolio/blob/main/src/components/ui/ProjectModal.tsx"
click node_filter "https://github.com/michelecolella/portfolio/blob/main/src/components/ui/FilterBar.tsx"
click node_tech "https://github.com/michelecolella/portfolio/blob/main/src/components/ui/TechTabs.tsx"
click node_carousel "https://github.com/michelecolella/portfolio/blob/main/src/components/ui/Carousel.tsx"
click node_adminpage "https://github.com/michelecolella/portfolio/blob/main/src/pages/admin/index.tsx"
click node_dashboard "https://github.com/michelecolella/portfolio/blob/main/src/pages/admin/AdminDashboard.tsx"
click node_tabs "https://github.com/michelecolella/portfolio/tree/main/src/pages/admin/tabs"
click node_login "https://github.com/michelecolella/portfolio/blob/main/src/pages/admin/AdminLogin.tsx"
click node_authcontext "https://github.com/michelecolella/portfolio/blob/main/src/context/AdminAuthContext.tsx"
click node_exportbutton "https://github.com/michelecolella/portfolio/blob/main/src/components/admin/ExportDataButton.tsx"
click node_exporthook "https://github.com/michelecolella/portfolio/blob/main/src/hooks/useDataExport.ts"
click node_exporter "https://github.com/michelecolella/portfolio/blob/main/src/lib/export/portfolioExporter.ts"
click node_markdown "https://github.com/michelecolella/portfolio/blob/main/src/lib/export/markdown.ts"
click node_media "https://github.com/michelecolella/portfolio/blob/main/src/lib/export/mediaDownloader.ts"
click node_dal "https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/index.ts"
click node_database "https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/firebase/database.ts"
click node_auth "https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/firebase/auth.ts"
click node_storage "https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/firebase/storage.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_language,node_mobile,node_download toneBlue
class node_home,node_projects,node_projectcards,node_projectmodal,node_filter,node_tech,node_carousel,node_firebase toneAmber
class node_adminpage,node_dashboard,node_tabs,node_login,node_authcontext,node_exportbutton toneMint
class node_portfolio,node_exporthook,node_exporter,node_markdown,node_media,node_dal,node_database,node_auth,node_storage toneRose
class node_visitor,node_administrator toneIndigo
```

## Components

### Application

- [App router](https://github.com/michelecolella/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Language context](https://github.com/michelecolella/portfolio/blob/main/src/i18n/index.tsx): `src/i18n/index.tsx`
- [Mobile preview](https://github.com/michelecolella/portfolio/blob/main/src/context/MobilePreviewContext.tsx): `src/context/MobilePreviewContext.tsx`

### Public portfolio

- [Portfolio page](https://github.com/michelecolella/portfolio/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Project loader](https://github.com/michelecolella/portfolio/blob/main/src/hooks/useProjects.ts): `src/hooks/useProjects.ts`
- [Project cards](https://github.com/michelecolella/portfolio/blob/main/src/components/projects/ProjectCard.tsx): `src/components/projects/ProjectCard.tsx`
- [Project details](https://github.com/michelecolella/portfolio/blob/main/src/components/ui/ProjectModal.tsx): `src/components/ui/ProjectModal.tsx`
- [Project filters](https://github.com/michelecolella/portfolio/blob/main/src/components/ui/FilterBar.tsx): `src/components/ui/FilterBar.tsx`
- [Technology tabs](https://github.com/michelecolella/portfolio/blob/main/src/components/ui/TechTabs.tsx): `src/components/ui/TechTabs.tsx`
- [Certification carousel](https://github.com/michelecolella/portfolio/blob/main/src/components/ui/Carousel.tsx): `src/components/ui/Carousel.tsx`

### Administration

- [Admin routes](https://github.com/michelecolella/portfolio/blob/main/src/pages/admin/index.tsx): `src/pages/admin/index.tsx`
- [Admin dashboard](https://github.com/michelecolella/portfolio/blob/main/src/pages/admin/AdminDashboard.tsx): `src/pages/admin/AdminDashboard.tsx`
- [Content editors](https://github.com/michelecolella/portfolio/tree/main/src/pages/admin/tabs): `src/pages/admin/tabs`
- [Admin login](https://github.com/michelecolella/portfolio/blob/main/src/pages/admin/AdminLogin.tsx): `src/pages/admin/AdminLogin.tsx`
- [Admin auth context](https://github.com/michelecolella/portfolio/blob/main/src/context/AdminAuthContext.tsx): `src/context/AdminAuthContext.tsx`
- [Export control](https://github.com/michelecolella/portfolio/blob/main/src/components/admin/ExportDataButton.tsx): `src/components/admin/ExportDataButton.tsx`

### Data and export

- [Portfolio data context](https://github.com/michelecolella/portfolio/blob/main/src/hooks/usePortfolioData.tsx): `src/hooks/usePortfolioData.tsx`
- [Export controller](https://github.com/michelecolella/portfolio/blob/main/src/hooks/useDataExport.ts): `src/hooks/useDataExport.ts`
- [Portfolio exporter](https://github.com/michelecolella/portfolio/blob/main/src/lib/export/portfolioExporter.ts): `src/lib/export/portfolioExporter.ts`
- [Markdown formatter](https://github.com/michelecolella/portfolio/blob/main/src/lib/export/markdown.ts): `src/lib/export/markdown.ts`
- [Media downloader](https://github.com/michelecolella/portfolio/blob/main/src/lib/export/mediaDownloader.ts): `src/lib/export/mediaDownloader.ts`
- [Data access layer](https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/index.ts): `src/lib/dal/index.ts`
- [Firestore provider](https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/firebase/database.ts): `src/lib/dal/firebase/database.ts`
- [Firebase auth](https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/firebase/auth.ts): `src/lib/dal/firebase/auth.ts`
- [Firebase storage](https://github.com/michelecolella/portfolio/blob/main/src/lib/dal/firebase/storage.ts): `src/lib/dal/firebase/storage.ts`

### Other components

- **Visitor**
- **Administrator**
- **Firebase services**
- **Browser download**

## Connections

- Visitor → App router: opens
- Administrator → App router: opens
- App router → Portfolio page: routes
- App router → Admin routes: routes
- App router → Language context: provides
- App router → Mobile preview: provides
- App router → Portfolio data context: provides
- Portfolio page → Portfolio data context: reads
- Portfolio page → Project loader: loads
- Portfolio page → Project cards: renders
- Portfolio page → Project details: renders
- Portfolio page → Project filters: renders
- Portfolio page → Technology tabs: renders
- Portfolio page → Certification carousel: renders
- Portfolio data context → Data access layer: subscribes via
- Project loader → Data access layer: queries via
- Admin routes → Admin dashboard: routes
- Admin routes → Admin login: routes
- Admin login → Admin auth context: authenticates via
- Admin auth context → Data access layer: calls
- Admin dashboard → Content editors: hosts
- Admin dashboard → Export control: offers
- Export control → Export controller: starts
- Export controller → Portfolio exporter: runs
- Export controller → Browser download: downloads
- Portfolio exporter → Markdown formatter: formats
- Portfolio exporter → Media downloader: downloads assets
- Portfolio exporter → Data access layer: reads via
- Data access layer → Firestore provider: delegates
- Data access layer → Firebase auth: delegates
- Data access layer → Firebase storage: delegates
- Firestore provider → Firebase services: reads/writes
- Firebase auth → Firebase services: authenticates
- Firebase storage → Firebase services: transfers files