180 lines
4.8 KiB
Markdown
180 lines
4.8 KiB
Markdown
# 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:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd biohazard-vfx-website
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Run the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Open [http://localhost:3000](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:**
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
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
|