📌 Project Overview
The VFX Portfolio is a curated visual platform designed to present a range of post-production work, including green screen compositing, CGI integration, editing, and VFX breakdowns. Built with React, TypeScript, and Material UI, it offers an immersive and interactive viewing experience with video embeds, project breakdowns, and scroll-based navigation.
A custom admin dashboard is integrated to allow seamless uploading and updating of new shots, project reels, and visual content. This makes the site ideal not only for showcasing finished work but also for continuously updating with ongoing experiments, breakdowns, and client deliverables.
🧩 Core Features
🎬 Project Breakdown Viewer
Horizontally scrollable cards for each VFX project
Reels or clips embedded directly via YouTube or Firebase
Click-to-expand for detailed breakdowns or alternate angles
Smooth animation and hover previews using Material UI transitions
🎨 Gallery Integration
A VFX & Editing Gallery with categorized media:
Before/After shots
Behind the Scenes (BTS) from editing timelines or green screen sets
Still Frames highlighting color grading or compositing
🔧 Admin-Controlled Content
Firebase-authenticated dashboard to manage project uploads
Each card contains:
Project title
Description
Video/thumbnail
Tags (e.g., compositing, CGI, green screen, breakdown)
🖥️ Tool Focus Pages (Optional)
Optional pages that segment projects by software used:
Nuke: Node-based compositing projects
Unreal Engine: Real-time rendering and environment work
DaVinci Resolve: Editing timelines, color correction samples
After Effects: Motion graphics, visual overlays
🧰 Tech Stack
Feature | Technology Used |
|---|---|
Frontend Framework | React with TypeScript |
UI Design | Material UI |
Media Storage | Firebase Storage |
Auth & Backend | Firebase Auth + Firestore |
Video Integration | Firebase videos / YouTube embeds |
Hosting | Firebase Hosting |
🗂️ Site Structure
Page / Section | Functionality |
|---|---|
Home | Hero banner, recent projects, and CTA |
VFX Projects | Scrollable cards with breakdowns, videos, and metadata |
Gallery | Categorized stills and timeline shots |
Tool Tabs | (Optional) Software-wise grouping of work |
Admin Dashboard | Auth-protected content management system |
Contact | Contact form or link to production inquiry |
💼 Use Cases
Freelance project showcase for VFX clients
Studio-ready demo site for application submissions
Continuous library of R&D experiments and short-form visual experiments