added README.md

2025-10-02 16:07:26 -06:00 · 2025-10-02 16:07:26 -06:00 · 929f5c30c3
commit 929f5c30c3
parent a26c102fb5
1 changed files with 222 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,222 @@
+# 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.