Biohazard VFX Website

A modern, minimal Next.js website for Biohazard VFX studio, built with React, TypeScript, Tailwind CSS, and shadcn/ui components.

Features

• Homepage: Hero section, studio showreel, featured projects, and capabilities overview
• About: Studio origins, values, technical capabilities, and client testimonials
• Services: Comprehensive service offerings with detailed descriptions
• Portfolio: Masonry grid layout showcasing projects with varying aspect ratios
• Contact: Multi-step smart contact form for efficient client intake

Tech Stack

• Framework: Next.js 15.5.4 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui (New York style)
• Icons: Lucide React
• Fonts: Geist Sans & Geist Mono

Getting Started

Prerequisites

• Node.js 20+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd biohazard-vfx-website

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking

Project Structure

biohazard-vfx-website/
├── src/
│   ├── app/                    # Next.js app directory
│   │   ├── about/             # About page
│   │   ├── contact/           # Contact page
│   │   ├── portfolio/         # Portfolio page
│   │   ├── services/          # Services page
│   │   ├── layout.tsx         # Root layout with navigation & footer
│   │   ├── page.tsx           # Homepage
│   │   └── globals.css        # Global styles & CSS variables
│   ├── components/            # React components
│   │   ├── ui/               # shadcn/ui components
│   │   ├── Footer.tsx
│   │   ├── Hero.tsx
│   │   ├── MasonryGrid.tsx
│   │   ├── MultiStepForm.tsx
│   │   ├── Navigation.tsx
│   │   ├── ProjectCard.tsx
│   │   ├── ServiceCard.tsx
│   │   └── VideoPlayer.tsx
│   ├── data/                 # Data files
│   │   ├── projects.ts       # Project data
│   │   └── services.ts       # Services data
│   └── lib/
│       └── utils.ts          # Utility functions
├── public/                   # Static assets
└── components.json          # shadcn/ui configuration

Customization

Styling

The project uses shadcn/ui with the New York style variant. You can quickly try different styles by:

1. Modifying CSS variables in src/app/globals.css
2. Updating the shadcn theme in components.json
3. All components use shadcn classnames for easy theme switching

Content

Update content in the data files:

• Projects: Edit src/data/projects.ts
• Services: Edit src/data/services.ts

Replace placeholder images with your own:

• Update image URLs in data files
• Add images to the public/ directory

Adding New Pages

1. Create a new directory in src/app/
2. Add a page.tsx file
3. Export metadata and default component
4. Update navigation in src/components/Navigation.tsx

SEO & Performance

The site includes:

• ✅ Metadata for all pages
• ✅ Canonical links
• ✅ Open Graph tags
• ✅ JSON-LD structured data
• ✅ Font preloading
• ✅ Image lazy loading
• ✅ Next.js Image optimization

Deployment

Cloudflare Workers (Current)

This project is deployed to Cloudflare Workers using OpenNext:

Prerequisites:

• Cloudflare account with Workers enabled
• Domain configured in Cloudflare (if using custom domain)

Build & Deploy:

# Build for Cloudflare Workers
npx opennextjs-cloudflare build

# Deploy to Cloudflare
npx wrangler deploy

Configuration Files:

• wrangler.toml - Cloudflare Workers configuration
• open-next.config.ts - OpenNext adapter settings
• next.config.ts - Next.js configuration

Live URLs:

• Production: https://biohazardvfx.com
• Worker: https://biohazard-vfx-website.nicholaivogelfilms.workers.dev

Important Notes:

• Linting and TypeScript errors are ignored during build (can be re-enabled in next.config.ts)
• Compatible with Next.js 15.5.4
• Uses nodejs_compat compatibility flag
• Requires compatibility date 2024-09-23 or later

Alternative: Vercel

For Vercel deployment, revert next.config.ts to remove Cloudflare-specific settings:

npm run build
# Then deploy via Vercel dashboard or CLI

License

Private - All rights reserved to Biohazard VFX

Support

For issues or questions, contact: info@biohazardvfx.com