A modern, responsive website for Biohazard VFX, a global visual effects studio specializing in VFX supervision, 3D animation, and end-to-end post-production.

Project Overview

Biohazard VFX is an end-to-end post-production studio and passionate collective of artists, storytellers, and students of the art-form. All team members are dedicated to creating captivating and truly meaningful visual art.

This website serves as the digital portfolio and client portal for the studio, showcasing their work, team, and services with a sleek, modern design featuring parallax effects, glass morphism aesthetics, and smooth animations.

Features

Responsive Design: Fully responsive layout that works seamlessly across desktop, tablet, and mobile devices
Dynamic Project Gallery: Grid-based project showcase with lazy loading and smooth animations
Interactive Elements: Parallax scrolling, hover effects, and smooth transitions throughout
Contact Form: Integrated Web3Forms contact form with validation and user feedback
FAQ Section: Expandable FAQ items with smooth animations
Team Profiles: Founder profiles with social media links
SEO Optimized: Meta tags, structured data, and Open Graph tags for better search visibility
Accessibility: ARIA labels, semantic HTML, and keyboard navigation support

Technology Stack

Frontend

HTML5: Semantic markup with modern features
CSS3: Custom properties, flexbox, grid, animations
Vanilla JavaScript: No external frameworks, lightweight and performant
Web APIs: Fetch API for dynamic content loading

Styling & Design

CSS Custom Properties: Theme variables for consistent styling
Glass Morphism: Modern translucent card effects with backdrop blur
Custom Fonts: Bebas Neue, Space Mono, JetBrains Mono, and Archiv Grotesk
Responsive Grid: CSS Grid with dynamic column adjustments

Performance

Lazy Loading: Images and iframes load on demand
Optimized Assets: Compressed images and efficient CSS/JS
Intersection Observer: Performance-based animations
Page Loader: Loading overlay for better user experience

Project Structure

BiohazardWeb/
├── README.md                 # This file
├── index.html               # Homepage with hero, about, projects, team
├── contact.html             # Contact page with form
├── faq.html                 # FAQ page with expandable items
├── project.html             # Individual project detail page
├── admin/                   # Admin directory
│   └── api.js              # Admin API endpoints
├── css/                    # Stylesheets
│   ├── styles.css          # Main styles with glass morphism theme
│   └── home.css            # Homepage-specific styles
├── js/                     # JavaScript files
│   ├── main.js             # Core functionality (project loading, parallax)
│   ├── common.js           # Common utilities
│   ├── ui.js               # UI components and interactions
│   ├── home.js             # Homepage-specific scripts
│   └── project.js          # Project detail page functionality
├── fragments/               # HTML fragments for reusable components
│   ├── nav.html            # Navigation header
│   └── socials.html        # Social media links
├── written/                # Text content files
│   ├── about_us.txt        # About section content
│   ├── contact_us.txt      # Contact section content
│   ├── crew.txt            # Crew section content
│   ├── pipeline.txt       # Pipeline description
│   └── faq.json            # FAQ data in JSON format
├── projects/               # Project showcase data and assets
│   ├── projects.json       # Project manifest with metadata
│   ├── Reel/               # Showreel project
│   ├── HDSH/               # Post Malone project
│   ├── J305/               # Jordan Adetunji project
│   ├── ARSD/               # The Temper Trap project
│   ├── ENBD/               # Enhypen project
│   ├── APTS/               # SNIPES x Adidas project
│   └── 01_OTFR/            # 1900Rugrat project
├── images/                 # Static images
│   ├── favicon-16x16.png  # Favicon
│   ├── favicon-32x32.png  # Favicon
│   ├── Splash.jpg          # Hero background
│   ├── nicholai.jpg        # Team member photo
│   ├── nicholai-compressed.jpg
│   ├── nicholai.png
│   ├── davane.jpg          # Team member photo
│   └── parth.jpg           # Team member photo
├── videos/                 # Video assets
│   └── reel.mp4            # Showreel video
├── fonts/                  # Font files
│   ├── Bebas_Neue/         # Bebas Neue font
│   ├── Space_Mono/         # Space Mono font
│   ├── JetBrainsMono-2.304/ # JetBrains Mono font
│   ├── Archiv-Grotesk-Font/ # Archiv Grotesk font
│   ├── Stretch-Sans-Font/  # Stretch Sans font
│   └── Vamos-Font/         # Vamos font
└── directory-layout.txt   # Directory structure documentation

Key Components

Fixed header with smooth scroll navigation
Logo with hover animation
Responsive navigation menu
Social media links in separate header

Homepage Sections

Hero Section: Parallax video background with gradient overlay
About Section: Studio mission and philosophy
Projects Grid: Dynamic project showcase with different card sizes
Team Section: Founder profiles with social links
Crew Section: Additional team information
Contact Info: Email and response time information

Project Gallery

Dynamic grid layout with responsive columns
Lazy loading for performance
Different card sizes (small, wide, tall, big, banner)
Smooth hover animations and transitions
Individual project pages with embedded videos

Contact Form

Web3Forms integration for form submission
Form validation and user feedback
Honeypot field for spam protection
Responsive form layout

FAQ Section

Expandable accordion-style FAQ items
Smooth animations for opening/closing
JSON-driven content management
Auto-scroll to keep open items in view

Design System

Color Palette

Primary: White (#ffffff) - Main text and accents
Background: Black (#000000) - Primary background
Secondary: #0e0e0e - Dark backgrounds
Accent: #dbdbdb - Neon cyan for highlights and underlines
Glass: rgba(14,14,14,0.55) - Translucent card backgrounds

Typography

Headings: Bebas Neue (bold, uppercase)
Body: JetBrains Mono (regular, monospace)
Accent: Space Mono (monospace for special elements)
Navigation: ArchiveCond ( condensed, uppercase)

Animations

Parallax Scrolling: Multi-layer depth effects
Hover States: Scale and shadow transitions
Loading States: Smooth page loader
Scroll Reveal: Intersection Observer animations

Browser Support

Modern browsers with ES6+ support
Mobile Safari and Chrome
Firefox, Edge, and Opera
Responsive design for all screen sizes

Performance Optimizations

Lazy Loading: Images and iframes load on scroll
Intersection Observer: Performance-based animations
CSS Containment: Reduced paint areas
Optimized Images: Compressed assets
Minimal JavaScript: Lightweight, framework-free code

Development Notes

Custom Properties

The theme uses CSS custom properties for easy theming:

:root {
  --gutter-x: 24px;
  --accent: #dbdbdb;
  --glass: rgba(14,14,14,0.55);
  --blur: 12px;
  --font-scale: 1.0;
}

Responsive Design

Mobile-first approach with breakpoints at 767px and 1024px
Flexible grid system with CSS Grid
Typography scaling with clamp() functions

Accessibility

Semantic HTML5 structure
ARIA labels for navigation and interactive elements
Keyboard navigation support
High contrast color scheme
Focus indicators for interactive elements

Deployment

The website is designed to be deployed as a static site. Simply upload all files to a web server and ensure proper MIME types for fonts and media files.

Font Loading

Custom fonts are loaded with proper @font-face declarations and include WOFF2, WOFF, and TTF formats for maximum browser compatibility.

SEO Configuration

Meta tags, structured data, and Open Graph tags are configured for optimal search engine visibility and social sharing.

Contact

For questions about the website or to work with Biohazard VFX:

Email: contact@biohazardvfx.com
Response Time: Typically within 24 hours
Instagram: @biohazardvfx
YouTube: Biohazard VFX
Behance: Biohazard VFX

README.md

Biohazard VFX Website