How marcusteoqiyang/marcus-portfolio works
This is a portfolio website with a separate admin CMS. Visitors open the portfolio, which loads profile, experience, and project content and presents featured projects, project details, and contact links. Administrators manage portfolio content and themes through authenticated API operations; the server persists changes locally and synchronizes supported data with Supabase. The supplied excerpts confirm these paths and the theme-management and auth flows, but omit much of the admin page and server routing, so uncertain component wiring is not shown.
Main entry points: Portfolio.tsx Portfolio page · Admin.tsx Admin page · server.ts Portfolio API · App.tsx App routing
Components 18
Portfolio experience
- App routing
src/App.tsx - Portfolio page
src/pages/Portfolio.tsx - Project details
src/components/ProjectDetailsModal.tsx - Floating navigation
src/components/FloatingNav.tsx - Scroll effects
src/components/ScrollReveal.tsx
Admin CMS
- Admin page
src/pages/Admin.tsx - Admin authentication
src/hooks/admin/useAdminAuth.ts - Portfolio editing
src/hooks/admin/usePortfolioData.ts - Theme management
src/hooks/admin/useThemeManagement.ts - CMS tabs
src/components/admin/tabs - Editing dialogs
src/components/admin/modals
API and persistence
- Portfolio API
server/server.ts - Local JSON data
server/db.json
Supabase integration
- Supabase client
src/lib/supabase.ts - Supabase server adapter
server/supabase.ts - Supabase data
supabase/schema.sql
Other components
- Visitor
- Administrator
Connections 21
- Visitor → App routing: opens site
- Administrator → App routing: opens admin
- App routing → Portfolio page: routes to
- App routing → Admin page: routes to
- Portfolio page → Supabase client: loads portfolio
- Portfolio page → Portfolio API: fallback fetch
- Portfolio page → Floating navigation: renders navigation
- Portfolio page → Scroll effects: reveals sections
- Portfolio page → Project details: shows project
- Admin authentication → Portfolio API: auth requests
- Portfolio editing → Portfolio API: fetches and edits
- Theme management → Portfolio API: manages themes
- Admin page → Admin authentication: uses auth
- Admin page → Portfolio editing: loads CMS data
- Admin page → Theme management: manages appearance
- Admin page → CMS tabs: renders tabs
- Admin page → Editing dialogs: opens editors
- Portfolio API → Local JSON data: reads and writes
- Portfolio API → Supabase server adapter: fetches and syncs
- Supabase server adapter → Supabase data: reads and writes
- Supabase client → Supabase data: loads portfolio