169 lines
6.0 KiB
Markdown
169 lines
6.0 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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:**
|
|
```bash
|
|
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:**
|
|
```bash
|
|
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
|