# 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:
   ```bash
   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:
   ```bash
   docker-compose up -d
   ```

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

### Using Docker CLI

1. Build the Docker image:
   ```bash
   docker build -t biohazard-vfx .
   ```

2. Run the container:
   ```bash
   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:
   ```bash
   docker build -t biohazardvfx/website:latest .
   ```

2. Tag the image for Docker Hub:
   ```bash
   docker tag biohazardvfx/website:latest yourdockerhubusername/biohazardvfx:latest
   ```

3. Log in to Docker Hub:
   ```bash
   docker login
   ```

4. Push the image:
   ```bash
   docker push yourdockerhubusername/biohazardvfx:latest
   ```

### For Gitea Package Registry (if available):

If your Gitea instance has package registry support:

1. Build the image:
   ```bash
   docker build -t yourgiteaurl/username/biohazardvfx:latest .
   ```

2. Log in to the Gitea container registry:
   ```bash
   docker login yourgiteaurl
   ```

3. Push the image:
   ```bash
   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:
```bash
# 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:

```env
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`:

```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:

```bash
# 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

```bash
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

```bash
# 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

```bash
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