How michelecolella/portfolio works
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: Home.tsx Portfolio page · App.tsx App router · index.ts Data access layer · portfolioExporter.ts Portfolio exporter
Components 29
Application
- App router
src/App.tsx - Language context
src/i18n/index.tsx - Mobile preview
src/context/MobilePreviewContext.tsx
Public portfolio
- Portfolio page
src/pages/Home.tsx - Project loader
src/hooks/useProjects.ts - Project cards
src/components/projects/ProjectCard.tsx - Project details
src/components/ui/ProjectModal.tsx - Project filters
src/components/ui/FilterBar.tsx - Technology tabs
src/components/ui/TechTabs.tsx - Certification carousel
src/components/ui/Carousel.tsx
Administration
- Admin routes
src/pages/admin/index.tsx - Admin dashboard
src/pages/admin/AdminDashboard.tsx - Content editors
src/pages/admin/tabs - Admin login
src/pages/admin/AdminLogin.tsx - Admin auth context
src/context/AdminAuthContext.tsx - Export control
src/components/admin/ExportDataButton.tsx
Data and export
- Portfolio data context
src/hooks/usePortfolioData.tsx - Export controller
src/hooks/useDataExport.ts - Portfolio exporter
src/lib/export/portfolioExporter.ts - Markdown formatter
src/lib/export/markdown.ts - Media downloader
src/lib/export/mediaDownloader.ts - Data access layer
src/lib/dal/index.ts - Firestore provider
src/lib/dal/firebase/database.ts - Firebase auth
src/lib/dal/firebase/auth.ts - Firebase storage
src/lib/dal/firebase/storage.ts
Other components
- Visitor
- Administrator
- Firebase services
- Browser download
Connections 34
- 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