📌 Project Overview
The Actor Portfolio is designed as a complete digital identity for professional actors, enabling them to present their visual and video-based work in an elegant and interactive format. The platform prioritizes a clean user interface, structured content presentation, and easy backend control to support regular updates without requiring technical skills.
Ideal for talent managers, casting agents, or the actors themselves, this platform transforms a static portfolio into an engaging and living website with sections that highlight identity, media presence, and professional experience.
🧩 Core Features
1. Responsive Design Built on Material UI
Fully responsive layout tailored for all screen sizes
Grid-based design for visual balance and image-heavy content
Material UI components ensure consistency and accessibility
2. Dedicated Admin Dashboard (Firebase Auth Secured)
Role-based login system to restrict access to authorized users
Admins can upload and manage headshots, reels, gallery images, and project metadata
Uses Firestore for real-time syncing and Firebase Storage for media uploads
3. Categorized Gallery System
Headshots: High-resolution portraits in a horizontal scrollable layout
Modeling Shots: Stylized full-body and editorial photography
Behind-the-Scenes (BTS): Images from set life, makeup room, rehearsals, etc.
Each section uses swipeable carousels for smooth UX on mobile and desktop.
4. Acting Projects Section
Projects displayed in portrait-mode card layout (like movie posters)
Embedded trailers or showreels via YouTube player or Firebase videos
Horizontal scroll navigation with intuitive hover effects
Filter-ready design if future categories are added (TV, Film, Commercials, etc.)
5. About & Contact Pages
About Section: Bio with optional training background, achievements, and representation
Contact Section: Firebase-integrated contact form or link to talent agent’s email
🧰 Tech Stack
Feature Category | Technology Used |
|---|---|
Frontend Framework | React with TypeScript |
Styling & UI | Material UI |
State Management | React Hooks + useEffect/useState |
Backend Database | Firebase Firestore |
Media Hosting | Firebase Storage |
Authentication | Firebase Auth (email-based login) |
Hosting Platform | Firebase Hosting |
Rich Media Support | YouTube embeds, video previews, image CDN |
🗂️ Website Structure
Page / Component | Functionality |
|---|---|
Home | Featured banner, latest projects, call-to-action links |
About | Actor biography, background, and resume info |
Acting Projects | Scrollable project cards with embedded videos and thumbnails |
Gallery | Categorized carousels for Headshots, Modeling, and BTS |
Contact | Email form or clickable social/contact cards |
Admin Dashboard | Auth-protected panel to manage content across all sections |
🔒 Admin Panel Capabilities
Add/edit/remove projects (with title, image, video link, description, etc.)
Upload gallery photos with assigned categories
Control order and visibility of media assets
Real-time sync—updates instantly reflect on the frontend
Secure login with Firebase Authentication (email-password only)