NicholaiVogel
633ef418d1
- Add all shadcn/ui components (button, card, form, dialog, navigation-menu, etc.) - Create main layout with navigation header and footer - Implement homepage with hero, showreel, featured projects, and capabilities - Build about page with studio origins, values, and capabilities - Create services page with detailed service offerings - Implement portfolio page with masonry grid for varying aspect ratios - Build contact page with 4-step multistep form - Add project and service data structures with placeholder content - Configure SEO metadata, canonical links, and JSON-LD schema - Add font preloading and image lazy-loading for performance - Configure Next.js Image for Unsplash remote patterns - Fix Navigation component to use modern Link pattern (remove legacyBehavior) - Add comprehensive README with project documentation
153 lines
4.0 KiB
Markdown
153 lines
4.0 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
|
|
|
|
### Vercel (Recommended)
|
|
|
|
1. Push your code to GitHub
|
|
2. Import the project to Vercel
|
|
3. Deploy automatically
|
|
|
|
### Other Platforms
|
|
|
|
Build the project and deploy the `.next` directory:
|
|
|
|
```bash
|
|
npm run build
|
|
npm run start
|
|
```
|
|
|
|
## License
|
|
|
|
Private - All rights reserved to Biohazard VFX
|
|
|
|
## Support
|
|
|
|
For issues or questions, contact: info@biohazardvfx.com
|