223 lines
9.0 KiB
Markdown
223 lines
9.0 KiB
Markdown
# Biohazard VFX Website
|
|
|
|
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
|
|
|
|
### Navigation
|
|
- 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:
|
|
```css
|
|
: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](https://www.instagram.com/biohazardvfx/)
|
|
- **YouTube**: [Biohazard VFX](https://youtube.com/)
|
|
- **Behance**: [Biohazard VFX](https://www.behance.net/)
|
|
|
|
## License
|
|
|
|
© 2025 Biohazard VFX. All Rights Reserved.
|
|
|
|
This website project is proprietary and confidential. All rights reserved.
|