Biohazard VFX Website

Official website for Biohazard VFX - showcasing our portfolio of visual effects work and studio capabilities.

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: ShadCN UI
• Deployment: Cloudflare Workers via OpenNext
• Version Control: Gitea with Gitea Actions CI/CD

Features

• Modern, responsive design
• Optimized for performance
• SEO-friendly
• Dark mode support
• Portfolio showcase
• Accessible (WCAG compliant)

Getting Started

Prerequisites

• Node.js 20.x or higher
• npm (comes with Node.js)
• Git

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Create environment variables file:

   cp .env.example .env.local
   

   Edit .env.local and add your environment variables.

4. Run the development server:

   npm run dev
   

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

Development

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build the application for production
• npm run build:open-next - Build with OpenNext for Cloudflare deployment
• npm run start - Start production server locally
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking

Project Structure

biohazard-vfx-website/
├── .gitea/                 # Gitea configuration
│   ├── workflows/          # CI/CD workflows
│   ├── issue_template/     # Issue templates
│   └── pull_request_template.md
├── src/
│   ├── app/               # Next.js App Router pages
│   ├── components/        # React components
│   │   └── ui/           # ShadCN UI components
│   ├── lib/              # Utility functions
│   └── hooks/            # Custom React hooks
├── public/               # Static assets
├── .env.example         # Environment variables template
├── components.json      # ShadCN UI configuration
├── next.config.ts       # Next.js configuration
├── open-next.config.ts  # OpenNext configuration
├── wrangler.toml        # Cloudflare Workers configuration
├── tailwind.config.ts   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

Adding UI Components

This project uses ShadCN UI. To add a new component:

npx shadcn@latest add button
npx shadcn@latest add card
# etc.

Components will be added to src/components/ui/.

Environment Variables

Create a .env.local file based on .env.example:

NEXT_PUBLIC_APP_NAME="Biohazard VFX"
NEXT_PUBLIC_APP_URL="http://localhost:3000"

Deployment

Cloudflare Workers

This project uses OpenNext to deploy Next.js to Cloudflare Workers.

Prerequisites

1. Cloudflare account
2. Wrangler CLI installed (npm install -g wrangler)
3. Cloudflare API token with Workers permissions

Deployment Steps

1. Configure wrangler.toml with your account details

2. Set up secrets in Gitea:

   • CLOUDFLARE_API_TOKEN
   • CLOUDFLARE_ACCOUNT_ID

3. Deploy:

   npm run build:open-next
   npx wrangler deploy
   

Automatic Deployment

The project uses Gitea Actions for CI/CD:

• Pull Requests: Automatic preview deployment
• Main Branch: Automatic production deployment
• Develop Branch: Automatic development deployment

See .gitea/workflows/ for workflow configurations.

Contributing

We welcome contributions from internal developers! Please read CONTRIBUTING.md for:

• Development workflow
• Coding standards
• Git workflow
• Pull request process
• Testing guidelines

Quick Contribution Guide

1. Create a feature branch from develop
2. Make your changes
3. Run linting and type checking
4. Create a Pull Request
5. Wait for review and CI checks
6. Address feedback
7. Merge after approval

CI/CD

Workflows

• CI: Runs linting, type checking, and builds on every PR
• Deploy Preview: Deploys preview environments for PRs
• Deploy Production: Deploys to production on main branch merges

Status Badges

Add status badges here once workflows are running.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance

• Lighthouse Score Target: 90+
• First Contentful Paint: < 1.5s
• Time to Interactive: < 3.5s
• Largest Contentful Paint: < 2.5s

License

Proprietary - Biohazard VFX. All rights reserved.

Team

This project is maintained by the Biohazard VFX development team.

Support

For questions or issues:

• Create an issue using the appropriate template
• Contact the development team
• Check the CONTRIBUTING.md guide

---

Built with ❤️ by Biohazard VFX