Biohazard VFX Website

Overview

The Biohazard VFX Website has been successfully modernized and transformed from a simple static html, js + css site into a modern Nextjs app.

Date: August 16, 2025
Original Site: Static HTML/CSS/JS in /BiohazardVFX_Website/deprecated/
New Site: Next.js app in /BiohazardVFX_Website/biohazard-vfx

Recent Changes (2025-08-16)

• HeroSection hook fix: resolved "Invalid hook call" by moving useState and useEffect inside src/components/HeroSection.tsx before the return.
• Next.js dev loop fix: added src/pages/_document.tsx to satisfy Pages Router artifacts generated by Next. If you hit ENOENT for /.next/server/pages/_document.js, clear cache with rm -rf .next and restart npm run dev.
• Site Assets (CMS-style control for backgrounds/videos):
  • Prisma: added AssetType enum and SiteAsset model in prisma/schema.prisma.
  • API: src/app/api/assets/route.ts (GET/POST) and src/app/api/assets/[id]/route.ts (PUT/DELETE).
  • Admin: new assets manager at /admin/assets for CRUD and previews.
  • Helpers: src/lib/assets.ts with fetchAssetByKey and server-cached getAsset.
  • Integrations: home hero video key home.showreel.video; projects header can pull projects.hero.image (with fallback).

Migration/seed reminder

• Run npx prisma migrate dev then npx tsx prisma/seed.ts to create and seed default site assets.

Troubleshooting

• Dev loop ENOENT for _document.js:
  1. Ensure src/pages/_document.tsx exists (added in this repo).
  2. Stop dev server, run rm -rf .next, then npm run dev.
• HeroSection video not updating: confirm an asset with key home.showreel.video exists via /admin/assets and has a valid url.

How to test the app

---

Davane & Parth if you want to try it this is where I recommend starting.

open your shell, use cd to change your directory if need be.

Run:

1. git clone https://git.biohazardvfx.com/BiohazardVFX/biohazard-vfx.git

2. cd biohazard-vfx

3. npm install

4. Copy .env.example to .env and update the environment variables:

   cp .env.example .env
   

   Then edit .env.local to add your UploadThing credentials if needed. However, the default DATABASE_URL="File:./dev.db" is fine for testing purposes.

5. npx prisma generate

6. npx prisma migrate dev

7. npx tsx prisma/seed.ts

8. npm run dev

The site will be available at: http://localhost:3000

Accessing the Admin Dashboard

1. Navigate to: http://localhost:3000/admin/login
2. Login with:
   • Email: admin@biohazardvfx.com
   • Password: @Biohazard12

Testing Database Functionality

All content (projects, blog posts, team members, FAQs) should now be fully editable through the admin CMS:

1. Projects: Go to Admin → Projects to create, edit, or delete projects
2. Blog Posts: Go to Admin → Blog to create, edit, or delete blog posts
3. Team Members: Go to Admin → Team to create, edit, or delete team members
4. FAQs: Go to Admin → FAQ to create, edit, or delete FAQs

Docker Deployment

Using Docker Compose (Recommended for TrueNAS Scale)

1. Build and start the containers:

   docker-compose up -d
   

2. The application will be available at: http://localhost:3000

Using Docker CLI

1. Build the Docker image:

   docker build -t biohazard-vfx .
   

2. Run the container:

   docker run -d \
     --name biohazard-vfx \
     -p 3000:3000 \
     -e NODE_ENV=production \
     biohazard-vfx
   

Environment Variables

When deploying, make sure to set the following environment variables:

• DATABASE_URL - Your database connection string
• NEXTAUTH_URL - The URL of your application (e.g., https://yourdomain.com)
• NEXTAUTH_SECRET - A secret key for NextAuth.js
• UPLOADTHING_TOKEN - UploadThing server token (base64); generate in UploadThing dashboard or via CLI
• Any other environment variables from your .env file

For TrueNAS Scale deployment, you can configure these in the container settings.

Automated Docker Image Building

This repository includes GitHub Actions workflows to automatically build and push Docker images:

1. GitHub Container Registry (GHCR) - .github/workflows/docker.yml
2. Docker Hub - .github/workflows/docker-hub.yml

Setting up GitHub Actions for Gitea

If you're using Gitea and want to set up automated Docker builds, you have a few options:

1. Use GitHub as a mirror: Push your code to GitHub and use the provided GitHub Actions workflows
2. Use Gitea Actions (if available): Gitea has experimental Actions support
3. Use external CI/CD: Set up Jenkins, Drone CI, or another CI/CD system

For GitHub + GHCR:

1. Fork this repository to your GitHub account or push it to a new GitHub repository
2. The workflow will automatically trigger on pushes to main/master branches
3. Images will be pushed to ghcr.io/yourusername/biohazard-vfx/website:tag

For Docker Hub:

1. Create a Docker Hub account
2. Add your Docker Hub credentials as secrets in your repository:
   • DOCKER_USERNAME
   • DOCKER_PASSWORD
3. The workflow will push images to biohazardvfx/website:tag

Manual Docker Image Building and Pushing:

If you prefer to manually build and push the image:

1. Build the image:

   docker build -t biohazardvfx/website:latest .
   

2. Tag the image for Docker Hub:

   docker tag biohazardvfx/website:latest yourdockerhubusername/biohazardvfx:latest
   

3. Log in to Docker Hub:

   docker login
   

4. Push the image:

   docker push yourdockerhubusername/biohazardvfx:latest
   

For Gitea Package Registry (if available):

If your Gitea instance has package registry support:

1. Build the image:

   docker build -t yourgiteaurl/username/biohazardvfx:latest .
   

2. Log in to the Gitea container registry:

   docker login yourgiteaurl
   

3. Push the image:

   docker push yourgiteaurl/username/biohazardvfx:latest
   

Verifying Content Changes

After making changes in the admin panel:

1. Visit the public pages to verify your changes appear
2. Check that all content is properly saved to the database
3. Test file uploads for images and videos

Database Verification

To verify the database is working correctly:

# View database content
npx prisma studio

# This will open a web interface where you can see all content
# stored in the database including projects, blog posts, etc.

Deployment considerations

Environment Variables

Create a .env.production file with:

DATABASE_URL="your-production-database-url"
NEXTAUTH_URL="https://biohazardvfx.com"
NEXTAUTH_SECRET="generate-a-secure-secret"
WEB3FORMS_ACCESS_KEY="your-web3forms-key"
UPLOADTHING_TOKEN="your-uploadthing-base64-token"
# (Optional legacy) If you still have these from an older setup, you can keep them for reference
# UPLOADTHING_SECRET="your-uploadthing-secret"
# UPLOADTHING_APP_ID="your-uploadthing-app-id"

#### Generating `UPLOADTHING_TOKEN`
- In the UploadThing dashboard, create a Server Token and copy the value (it will look like a long base64 string). Set it as `UPLOADTHING_TOKEN`.
- Alternatively, use the CLI: `npx uploadthing@latest token` and paste the output into `UPLOADTHING_TOKEN`.
- Restart your dev server after setting the token.

Database

• Consider migrating from SQLite to PostgreSQL for production
• Set up automated backups
• Implement database migrations strategy

Hosting Options

• Vercel - Optimal for Next.js apps
• Netlify - Good alternative
• Self-hosted - Using Node.js server

CDN & Media

• Consider CDN for video content
• Optimize image delivery
• Implement proper caching headers

Deploying on Truenas Scale Dragonfish as a Custom App

1. Build a Slim Image

• Add to next.config.js:

module.exports = { output: 'standalone' }

TLDR:

• Run npm run build. Next.js emits .next/standalone/ which is a minimal Node server with only needed deps.
• Your Dockerfile should copy .next/standalone and run node server.js.

2. Container Registry

Since the repo is hosted on git.biohazardvfx.com (Gitea), use its built-in Container Registry:

# login to your Gitea registry
docker login git.biohazardvfx.com

# build & tag
docker build -t git.biohazardvfx.com/<owner>/<image>:prod .

# push
docker push git.biohazardvfx.com/<owner>/<image>:prod

• <owner> = your Gitea user/org (e.g. biohazardvfx).
• This makes the image available at git.biohazardvfx.com/<owner>/<image>:prod.

3. TrueNAS SCALE Custom App

• Image: git.biohazardvfx.com/<owner>/<image>:prod

• Command: leave default (node server.js from Dockerfile)

• Env Vars: mirror .env.production

• Ports: expose container 3000 → NodePort (e.g. 31000)

• Storage: add Host Path volume:

  • Host path: /mnt/tank/apps/your-next/cache
  • Mount path: /app/.next/cache
  • Purpose: persist ISR/data cache so it survives restarts.

4. Reverse Proxy

• Use Nginx Proxy Manager to map biohazardvfx.com → NAS-IP:31000.
• Ensure websocket headers pass through (NPM defaults handle this).

5. Notes & Gotchas

• Ensure git.biohazardvfx.com registry has valid TLS.
• Use Gitea Personal Access Token for docker login if password auth is locked.
• Permissions: container must write to /app/.next/cache (adjust dataset perms if needed).
• For multiple replicas: use a shared cache mechanism (S3/Redis). For single replica: Host Path is fine.

Checklist:

1. Build standalone Next.js → 2. Push to Gitea Registry → 3. Configure SCALE Custom App (image/env/ports/storage) → 4. Proxy through Nginx Proxy Manager → 5. Test ISR persistence.

What Was Accomplished

1. Complete Technology Stack Upgrade

From:

• Static HTML files
• Vanilla JavaScript
• Plain CSS with custom properties
• Manual content updates
• No build system

To:

• Next.js 15.4.6 with App Router
• React 19 with TypeScript
• Tailwind CSS 3.4 for styling
• Prisma ORM with SQLite database
• NextAuth.js for authentication
• Modern build pipeline with hot reload

2. New Features Implemented

Content Management System

• Full admin dashboard for managing all site content
• Secure authentication system
• Database-driven content (no more manual file editing)

Blog System

• Blog listing page with article previews
• Individual blog post pages with rich content
• Category and author management
• SEO-optimized blog structure

Enhanced Project Portfolio

• Dedicated projects listing page at /projects
• Dynamic project grid with all 8 original projects
• Individual project pages with video/embed support
• Credits and info display from original text files
• Responsive grid layout with size variations

Modern UI/UX

• Preserved original dark theme aesthetic
• Smooth animations and transitions
• Mobile-responsive design
• Improved navigation with left-side slide-in menu
• Interactive team menu overlay

3. Technical Improvements

Performance

• Automatic code splitting
• Image optimization with Next.js Image component
• Lazy loading for better initial load times
• Optimized font loading

Developer Experience

• Full TypeScript support with type safety
• Component-based architecture
• Hot module replacement
• ESLint configuration
• Organized file structure

SEO & Accessibility

• Next.js metadata API for SEO
• Structured data for search engines
• ARIA labels for accessibility
• Semantic HTML structure

📁 Project Structure

biohazard-vfx/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── admin/             # Admin dashboard pages
│   │   │   ├── login/         # Admin login
│   │   │   └── page.tsx       # Dashboard home
│   │   ├── api/               # API routes for content management
│   │   ├── blog/              # Blog pages
│   │   │   ├── [slug]/        # Individual blog posts
│   │   │   └── page.tsx       # Blog listing
│   │   ├── contact/           # Contact form page
│   │   ├── crew/              # Team/crew page
│   │   ├── faq/               # FAQ page
│   │   ├── projects/          # Project pages
│   │   │   ├── [id]/          # Individual projects
│   │   │   └── page.tsx       # Projects listing
│   │   ├── globals.css        # Global styles
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Homepage
│   ├── components/            # Reusable React components
│   │   ├── Navigation.tsx     # Site navigation (updated)
│   │   ├── HeroSection.tsx    # Hero video section
│   │   ├── ProjectsGrid.tsx   # Project portfolio grid
│   │   ├── TeamMenu.tsx       # Team overlay menu
│   │   ├── Footer.tsx         # Site footer
│   │   ├── TestimonialsSection.tsx  # Client testimonials
│   │   ├── ProcessSection.tsx       # VFX process visualization
│   │   ├── ServicesSection.tsx      # Studio services showcase
│   │   └── Providers.tsx      # Auth providers
│   ├── lib/                   # Utilities
│   │   ├── auth.ts           # NextAuth configuration
│   │   ├── prisma.ts         # Prisma client
│   │   ├── uploadthing.ts    # UploadThing integration
│   │   └── metadata.ts       # SEO metadata utilities
│   └── types/                 # TypeScript definitions
│       ├── index.ts          # Data models
│       └── next-auth.d.ts    # Auth types
├── prisma/
│   ├── schema.prisma         # Database schema
│   ├── seed.ts              # Database seeding
│   └── migrations/          # Database migrations
├── public/                   # Static assets
│   ├── images/              # Image files
│   ├── videos/              # Video files
│   └── projects/            # Project assets
├── docs/                    # Documentation
│   └── session-summary.md   # Development session summaries
└── Configuration files
    ├── next.config.js       # Next.js config
    ├── tailwind.config.js   # Tailwind CSS config
    ├── tsconfig.json        # TypeScript config
    └── package.json         # Dependencies

🔧 How to Use

Starting the Development Server

cd /home/Nicholai/Nextcloud/Dev/BiohazardVFX_Website/biohazard-vfx
npm run dev

The site will be available at: http://localhost:3000

Accessing the Admin Dashboard

1. Navigate to: http://localhost:3000/admin/login
2. Login with:
   • Email: admin@biohazardvfx.com
   • Password: @Biohazard12
3. Dashboard Features:
   • Projects Management
   • Blog Management
   • Media Library
   • Team Management
   • FAQ Management

Database Management

# View database
npx prisma studio

# Create new migration
npx prisma migrate dev --name your-migration-name

# Seed database
npx tsx prisma/seed.ts

Building for Production

npm run build
npm start

🗺️ Site Map

Public Pages

• / - Homepage with hero video, about, projects, team, crew sections
• /projects - Dedicated projects listing page
• /projects/[id] - Individual project pages
• /contact - Contact form with Web3Forms integration
• /faq - Frequently asked questions
• /crew - Detailed team page with bios
• /blog - Blog listing page
• /blog/[slug] - Individual blog posts

Admin Pages (Protected)

• /admin - Dashboard home
• /admin/login - Admin login
• /admin/projects - Manage projects
• /admin/blog - Manage blog posts
• /admin/media - Media library
• /admin/team - Manage team members
• /admin/faq - Manage FAQs

🔄 Data Migration

Projects

All 8 projects from the original site have been preserved:

1. Biohazard VFX Showreel
2. Post Malone Ft. Morgan Wallen - "I Had Some Help"
3. "305" Jordan Adetunji ft Bryson Tiller
4. The Temper Trap - Sweet Disposition (ARTBAT Remix)
5. 2Hollis "Album Trailer"
6. Enhypen "Bad Desire"
7. SNIPES x Adidas — 2024 Holiday Campaign
8. 1900Rugrat "One Take Freestyle"

Content

• About text preserved from written/about_us.txt
• Crew story from written/crew.txt
• FAQ data from written/faq.json
• All project credits and info files maintained
• Blog posts migrated from JSON to database

🔄 Recent Improvements

Navigation System (August 2025)

• Redesigned Navigation: Replaced the full-screen overlay menu with a sleek left-side sliding panel
• Less Intrusive: The new navigation slides in from the left and only covers a portion of the screen
• Improved UX: Added backdrop blur, outside click detection, and keyboard escape functionality
• Consistent Design: Matches the site's dark theme with subtle borders and proper spacing
• Better Mobile Experience: More compact and easier to use on mobile devices

Visual Enhancements (August 2025)

• Comprehensive Visual Upgrade: Added images and visual elements across all pages
• About Section: Two-column layout with studio image
• Blog Section: Added featured header image
• Projects Section: Dedicated projects listing page with header image
• Crew/Team Section: Added team collaboration image
• FAQ Section: Added visual element to break up text
• Contact Page: Added studio image to complement form
• Project Pages: Added hero images and galleries
• New Sections: Added testimonials, process, and services sections

Admin Dashboard Improvements (August 2025)

• Database Integration: All content now managed through database instead of localStorage
• API Routes: Created comprehensive API for content management
• Improved Forms: Enhanced project creation/editing with direct text input for credits and info
• Better Error Handling: Improved error messages and logging throughout the admin interface
• Enhanced UX: Added backdrop click to close modals and improved form layouts
• Fixed CRUD Operations: Resolved API endpoint mismatches and method implementations
• Enhanced Security: Improved authentication checks for all admin operations
• Upload Integration: Fixed file upload functionality with proper authentication