537 lines
18 KiB
Markdown
537 lines
18 KiB
Markdown
# 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
|