From 929f5c30c3e51dde2f26a8daf1d9a773a55f66ba Mon Sep 17 00:00:00 2001 From: NicholaiVogel Date: Thu, 2 Oct 2025 16:07:26 -0600 Subject: [PATCH] added README.md --- README.md | 222 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..d504936 --- /dev/null +++ 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.