Editor-Portfolio-Web

Kashyap Bera - Cinematic Video Portfolio & Reel Showcase

A production-quality portfolio website for video editor and post-production specialist Kashyap Bera. Built with a dark & cinematic aesthetic, featuring an Instagram/TikTok-style 9:16 vertical reel viewer with view-only video protection (zero third-party video subscriptions), smooth GSAP ScrollTrigger + Lenis animations, and a private admin panel.

📽️ Features Overview

Cinematic Dark Design: Curated color palette (Deep Wine #7A1527 & Champagne Cream #F5EDE0, dynamically changeable from the admin panel), Syne display typography, Inter body typography, glassmorphism, and subtle ambient glows.
Reel-Style Video Viewer:
- Vertical 9:16 format (full-screen on mobile, centered phone-frame player with simulated bezel on desktop).
- Swipe up/down on touch devices; Up/Down arrow keys on desktop.
- Autoplay muted by default, tap to unmute, tap to play/pause, thin accent progress bar.
- Preloads next reel in sequence; categorized filter tabs.
- Quick toggle to thumbnail Grid View with modal player.
View-Only Video Protection & Streaming Pipeline:
- No Third-Party Services: No Vimeo, Wistia, or Cloudflare Stream subscriptions required.
- FFmpeg Transcoding: Uploads are automatically compressed to H.264 MP4 (optimized 1080p, 9:16 aspect ratio) with -movflags +faststart and poster thumbnails extracted.
- Private Storage: Stored exclusively in /backend/storage/videos/ (never exposed as public static files).
- Signed Range Streaming: Videos are served through /api/stream/{reel_id} supporting HTTP 206 Partial Content (Byte Range requests) for instantaneous seeking, requiring a short-lived HMAC signed token.
- Deterrents: controlsList="nodownload noplaybackrate", disablePictureInPicture, right-click context menu disabled, pointer drag disabled, and an admin-toggleable moving watermark overlay.
Full Portfolio Sections:
- Word-by-word masked text reveal in Hero with animated scroll indicator.
- Work section with reel cards and layout switcher.
- About section with animated stat counters and word-by-word scroll highlighting.
- Services cards with staggered reveals and hover glows.
- Technical Skills & Tools proficiency meters.
- 4-Stage Post-Production Pipeline with self-drawing accent line.
- Client Testimonials carousel.
- Transparent Value Pricing packages.
- Contact Form with honeypot bot trap and rate limiting.
Administrative Control Panel (/admin):
- Secure bcrypt + JWT authentication.
- Real-time Analytics Dashboard & Weekly Views Trajectory chart.
- Reels Manager: upload with progress bar, drag-and-drop reordering, publish/feature toggles, edit modal, delete.
- Categories Manager: filter tags CRUD.
- Site Content Editor: edit Hero, About, Services, Skills, Process, Testimonials, Pricing, and Socials without touching code.
- Appearance Editor: live color palette pickers, watermark text & toggle, animation controls.
- Messages Inbox: client inquiries with read/unread flags and one-click direct email reply.
- Settings: change password, SEO metadata tags, Open Graph banner URL.

🔒 Security & Protection Notice

[!NOTE] View-Only Protection & Deterrence Notice: While this application implements industry-grade deterrents against direct video downloads (private filesystem storage, signed temporary tokens, HTTP Range chunk streaming, anti-hotlink origin verification, context menu blocking, and dynamic moving watermarks), complete client-side screen recording prevention is technically impossible on the open web (as any frame displayed on a screen or captured by external cameras can be recorded). The implemented architecture successfully blocks direct URL copying, video grabbing software, and casual unauthorized distribution.

Hosting & Bandwidth Considerations: Self-hosted video streaming consumes backend storage and bandwidth. For high-traffic scaling, the backend streaming function getPlayableVideoUrl(reelId) is decoupled so it can easily map to private object storage buckets (e.g. Cloudflare R2 or AWS S3 with CloudFront signed cookies) in the future without changing the frontend player.

🛠️ Tech Stack & Requirements

Frontend: React (Vite), Tailwind CSS, React Router v7, GSAP + ScrollTrigger, Lenis smooth scroll, Plyr open-source player, Lucide icons.
Backend: FastAPI (Python 3.11+), Motor / MongoDB (with resilient auto-fallback to file-backed JSON store in local offline dev), PyJWT, bcrypt, python-multipart, SlowAPI.
Transcoding: FFmpeg 7+ / 9+ with libx264 and aac.

🚀 Local Development Setup

1. Prerequisites

Ensure you have Node.js (v18+), Python (v3.11+), and FFmpeg installed.

Installing FFmpeg on Windows:

winget install Gyan.FFmpeg --silent --accept-package-agreements --accept-source-agreements

Or download from gyan.dev/ffmpeg and add the bin folder to your system PATH.

2. Backend Setup

# Navigate to backend directory
cd "backend"

# Install Python dependencies
pip install -r requirements.txt

# Create .env from template
copy .env.example .env

# Seed the database with sample demo reels and default admin account
python -m app.seed

# Start the FastAPI server
uvicorn app.main:app --host 127.0.0.1 --port 8000 --reload

Backend API will be accessible at:

API Base: http://127.0.0.1:8000
Interactive OpenAPI Docs: http://127.0.0.1:8000/api/docs

Default Admin Credentials:

Email: admin@kashyapbera.com
Password: admin123 (Change immediately in /admin/settings)

3. Frontend Setup

# Open a new terminal and navigate to frontend directory
cd "frontend"

# Install NPM packages
npm install

# Start Vite development server
npm run dev

Frontend will be accessible at:

Public Portfolio: http://127.0.0.1:5173/
Reel Feed (9:16): http://127.0.0.1:5173/reels
Admin Portal: http://127.0.0.1:5173/admin/login

🌐 Production Deployment

Frontend (Vercel / Netlify / Cloudflare Pages)

Push repository to GitHub.
Link the /frontend directory as Root Directory on Vercel.
Build Command: npm run build
Output Directory: dist
Environment Variable:
- VITE_API_URL: Your deployed backend URL (e.g. https://api.kashyapbera.com)

Backend (Render / Railway / VPS / DigitalOcean)

Videos are stored in the server’s storage folder, so deploy to a service with persistent disk storage:

Render / Railway: Add a Persistent Disk volume mounted to /app/backend/storage (at least 20GB–50GB depending on your reel library).

Install ffmpeg via Docker or buildpack:

FROM python:3.11-slim
RUN apt-get update && apt-get install -y ffmpeg && rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY backend/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY backend .
EXPOSE 8000
CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

Set environment variables in the hosting dashboard:
- ENVIRONMENT=production
- BACKEND_PORT=8000
- FRONTEND_URL=https://kashyapbera.com
- MONGODB_URL=mongodb+srv://... (MongoDB Atlas cluster URI)
- JWT_SECRET=your_production_secret_32_chars
- STREAM_SECRET=your_production_stream_secret_32_chars
- ADMIN_EMAIL=your_email@domain.com
- ADMIN_PASSWORD=your_secure_password