# Biohazard VFX Website

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

## Tech Stack

- **Framework**: [Next.js 15](https://nextjs.org/) with App Router
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
- **UI Components**: [ShadCN UI](https://ui.shadcn.com/)
- **Deployment**: [Cloudflare Workers](https://workers.cloudflare.com/) via [OpenNext](https://open-next.js.org/)
- **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:
   ```bash
   git clone <repository-url>
   cd biohazard-vfx-website
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Create environment variables file:
   ```bash
   cp .env.example .env.local
   ```
   
   Edit `.env.local` and add your environment variables.

4. Run the development server:
   ```bash
   npm run dev
   ```

5. Open [http://localhost:3000](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:

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

```env
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:
   ```bash
   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](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](CONTRIBUTING.md) guide

---

Built with ❤️ by Biohazard VFX