biohazard-vfx-website/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Biohazard VFX is a modern Next.js 15 website for a visual effects studio, deployed to Cloudflare Workers using OpenNext. The site showcases portfolio work, services, and provides a multi-step contact form for client intake.

Tech Stack:

• Next.js 15.5.4 with App Router
• TypeScript (strict mode)
• React 19.1.0
• Tailwind CSS 4
• shadcn/ui (New York style)
• Framer Motion for animations
• Cloudflare Workers deployment via OpenNext

Development Commands

# Development
npm run dev              # Start dev server with Turbopack
npm run type-check       # Run TypeScript compiler (no emit)
npm run lint             # Run ESLint

# Building
npm run build            # Standard Next.js build
npm run build:open-next  # Build for Cloudflare Workers (runs next build + open-next build)

# Production
npm start                # Start Next.js production server (not used for Cloudflare deployment)

Deployment (Cloudflare Workers)

The site deploys to Cloudflare Workers, not Vercel. Critical deployment files:

• wrangler.toml: Cloudflare Workers configuration with routes for biohazardvfx.com
• open-next.config.ts: OpenNext adapter configuration for Cloudflare
• next.config.ts: Ignores lint/TypeScript errors during build (required for deployment)

Deploy commands:

npx opennextjs-cloudflare build  # Build for Cloudflare
npx wrangler deploy              # Deploy to Cloudflare Workers

Live URLs:

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

Cloudflare-specific requirements:

• Requires nodejs_compat compatibility flag
• Compatibility date: 2024-09-23 or later
• Assets binding configured at .open-next/assets

Architecture

Path Aliases

• @/* maps to ./src/* (configured in tsconfig.json)
• shadcn/ui aliases: @/components, @/components/ui, @/lib/utils

App Structure (Next.js App Router)

Pages are in src/app/:

• page.tsx - Homepage with hero, featured projects, capabilities
• about/page.tsx - Studio origins, values, testimonials
• services/page.tsx - Service offerings with ServiceCard components
• portfolio/page.tsx - Masonry grid portfolio layout
• contact/page.tsx - Multi-step contact form
• layout.tsx - Root layout with Navigation and Footer (removed from individual pages)

Important: Navigation and Footer components are only in the root layout. Individual pages should NOT include them.

Data Files

Content is separated from components in src/data/:

• projects.ts - Project data with Project interface (id, title, description, category, thumbnailUrl, videoUrl, aspectRatio, featured, tags)
• services.ts - Services data

When adding new projects or services, update these files rather than hardcoding data in components.

Component Organization

Custom components in src/components/:

• Layout: Navigation, Footer
• Page sections: Hero, ContactSection, MissionSection, BrandingSection
• Content display: ProjectCard, ServiceCard, MasonryGrid, ProjectShowcase, VideoPlayer, VideoPreview
• Interactive: MultiStepForm (4-step client intake), HorizontalAccordion
• Visual effects: DepthMap, CursorDotBackground, ScrollProgressBar, SectionDivider
• Third-party: InstagramFeed, ClientLogoGrid

shadcn/ui components in src/components/ui/:

• Uses New York style variant
• Includes: accordion, button, card, dialog, hover-card, input, label, navigation-menu, progress, select, separator, textarea

Styling System

Fonts: Nine Google Fonts preloaded in layout.tsx:

• Geist Sans (primary), Geist Mono
• Bebas Neue, Orbitron, Inter, JetBrains Mono, Space Mono, Rajdhani, Exo 2
• Available as CSS variables: --font-geist-sans, --font-bebas, etc.

Theme:

• Dark mode by default (className="dark" on html element)
• CSS variables in src/app/globals.css
• shadcn/ui config in components.json (New York style, neutral base color)

Tailwind:

• Tailwind CSS 4 with PostCSS
• Config: tailwind.config.ts
• Global styles: src/app/globals.css

SEO & Metadata

All pages include Next.js Metadata API:

• Open Graph tags
• Twitter cards
• Canonical links
• JSON-LD structured data (Organization schema in root layout)
• metadataBase: https://biohazardvfx.com

Forms & Validation

MultiStepForm component uses:

• react-hook-form for form state
• zod for validation (via @hookform/resolvers)
• 4 steps: Project Type → Budget/Timeline → Project Details → Contact Info
• Progress indicator using shadcn/ui Progress component

Images

Next.js Image optimization configured in next.config.ts:

• Remote patterns allowed: images.unsplash.com
• unoptimized: false (optimization enabled)

Key Constraints

1. Cloudflare deployment: Do not suggest Vercel-specific features that won't work with OpenNext
2. Build config: Lint and TypeScript errors are ignored during build (required for deployment). Do not remove these settings from next.config.ts
3. Dark theme only: Site uses dark mode by default. Do not create light mode variants unless explicitly requested
4. Layout structure: Navigation and Footer are in root layout only. Do not add them to individual pages
5. Data separation: Project and service data lives in src/data/. Keep content separate from components

Common Tasks

Add a new page:

1. Create directory in src/app/
2. Add page.tsx with metadata export
3. Update Navigation component at src/components/Navigation.tsx

Add a new shadcn/ui component:

npx shadcn@latest add [component-name]

Update project portfolio:

1. Edit src/data/projects.ts
2. Add new Project object to projects array
3. Ensure aspectRatio is set correctly for masonry layout

Update services:

1. Edit src/data/services.ts
2. Add service object with required fields

Modify theme colors:

1. Edit CSS variables in src/app/globals.css
2. Theme uses neutral base color with CSS variables for theming