Upgrade to React CSR app

[codegen-sh]

🚀 Upgrade to React CSR App

This PR successfully converts the static HTML forensic analysis site to a modern React Client-Side Rendering (CSR) application while preserving all existing functionality and enhancing the user experience.

✨ Key Features

🔄 Complete React Migration

• Converted static HTML to React components with modern architecture
• Maintained all existing forensic analysis content and styling
• Preserved dark theme and professional presentation

⚡ Enhanced Interactivity

• Interactive frame viewer with React state management
• Auto-play functionality for frame analysis
• Expandable methodology sections with smooth animations
• Real-time frame size analysis display

🎨 Improved UX

• Smooth animations and transitions
• Responsive design for mobile devices
• Enhanced hover states and visual feedback
• Professional component-based architecture

🛠️ Technical Implementation

• React 18 with Vite build system
• Component-based architecture for maintainability
• CSS animations and interactive elements
• Proper SEO meta tags and OpenGraph support

📁 Project Structure

src/
├── components/
│   ├── Header.jsx              # Site title and description
│   ├── CriticalFindings.jsx    # Key analysis points
│   ├── StatsGrid.jsx          # Statistical data display
│   ├── EvidenceGrid.jsx       # Main evidence presentation
│   ├── FrameViewer.jsx        # Interactive frame analysis
│   ├── Methodology.jsx        # Expandable analysis steps
│   ├── CallToAction.jsx       # GitHub links
│   ├── LegalImplications.jsx  # Legal context
│   ├── Footer.jsx             # Attribution
│   └── ExpandableSection.jsx  # Reusable UI component
├── styles/
│   └── globals.css            # Migrated and enhanced styles
└── App.jsx                    # Main application component

🔧 Build Configuration

• Vite Configuration: Optimized for GitHub Pages deployment
• Output Directory: Builds to docs/ for seamless GitHub Pages integration
• Asset Preservation: Maintains splice_frames/ directory structure
• Base Path: Configured for /forensic-analysis/ deployment path

🎯 Benefits

1. Snappier Performance: React's virtual DOM and component optimization
2. Easier Modifications: Component-based architecture for maintainability
3. Enhanced UX: Interactive elements and smooth animations
4. Modern Development: Hot reloading and modern build tools
5. Preserved Functionality: All forensic analysis content maintained

🚀 Deployment

The site continues to deploy via GitHub Pages with the same workflow:

• Build output goes to docs/ directory
• All assets and frame images preserved
• SEO and meta tags optimized
• Mobile responsive design

🔍 Interactive Features

• Frame Viewer: Navigate through splice point frames with slider controls
• Auto-play Mode: Automatic frame progression for analysis
• Expandable Sections: Detailed methodology with technical explanations
• Visual Indicators: Splice points highlighted with visual cues
• Responsive Design: Optimized for all device sizes

This upgrade maintains the serious, professional tone of the forensic analysis while adding modern React capabilities that make the site more engaging and easier to navigate.

---

💻 View my work • About Codegen