The Catalyst Website - Setup & Development Guide 🚀 Quick Start bash
npm install
npm start The website will automatically open at http://localhost:8080 📁 Project Structure catalyst-website/ │ ├── index.html ├── apply.html ├── board.html ├── journals.html ├── events.html ├── contact.html ├── style.css ├── script.js │ ├── package.json (npm configuration) ├── webpack.config.js (webpack configuration) ├── README.md (this file) │ ├── assets/ │ ├── favicon.png (Logo - used in browser tab & nav) │ ├── Transparent Black.png (Transparent logo variant) │ ├── Full Black.png (Full logo with text) │ ├── giesel.jpg (Campus/research images) │ ├── instagramlogo.png (Instagram icon) │ ├── discordlogo.jpeg (Discord icon) │ ├── downarrow.png (Scroll indicator) │ ├── volume1cover-1.png (Journal Volume 1 cover) │ └── volume2cover1-1.png (Journal Volume 2 cover) │ ├── journals/ │ ├── volume1.pdf │ ├── volume2.pdf │ └── volume3.pdf (Optional - for future) │ └── dist/ (Generated by webpack - do not edit) 📦 Installation & Setup Prerequisites Node.js (v16 or higher) npm (comes with Node.js) Step 1: Install Node.js Download from: https://nodejs.org/ Verify installation: bash node --version npm --version Step 2: Clone/Download Project bash
git clone cd catalyst-website
Step 3: Install Dependencies bash npm install This will install: Webpack & Webpack Dev Server HTML & CSS loaders Copy plugin for assets 🛠️ NPM Commands Development bash
npm start
npm run serve
npm run dev Production Build bash
npm run build After Building The production files will be in the /dist folder. You can: Upload /dist contents to any web host Serve locally: npx serve dist 📄 HTML Files index.html Homepage with hero section About Us section Mission statement Our Goal Connect With Us (social links) apply.html Application cards for Author/Editor and Board positions Same navigation structure board.html Team member grid (8 members displayed) Photo, name, position, and description for each journals.html Journal volume previews Interactive modal PDF viewer Volume selection buttons events.html Interactive calendar Event cards with details Month navigation contact.html Contact form (Name, Email, Subject, Message) Social media links Placeholder email address 🎨 CSS File (style.css) Complete styling including: Light/Dark theme variables Custom cursor styles Navigation bar All page layouts Calendar styling Form styling Responsive breakpoints Animations ⚙️ JavaScript File (script.js) All functionality: Custom cursor animation Click ripple effects Theme toggle (light/dark mode) Microscope particle animation Scroll animations Journal modal Calendar rendering Event management Contact form handling 🖼️ Required Assets In /assets/ folder: favicon.png - Main logo (square, transparent background) Transparent Black.png - Logo variant Full Black.png - Full logo with text giesel.jpg - UC San Diego campus/research images instagramlogo.png - Instagram icon discordlogo.jpeg - Discord icon downarrow.png - Scroll down arrow volume1cover-1.png - Volume 1 journal cover volume2cover1-1.png - Volume 2 journal cover In /journals/ folder: volume1.pdf - First journal volume volume2.pdf - Second journal volume volume3.pdf - (Optional) Third volume 🎯 Features Dark/Light Mode Click sun/moon icon in navigation Preference saved to browser localStorage Defaults to light mode Custom Cursor Blue circular cursor with glow effect Scales on hover over interactive elements Click creates ripple animation Particle Animation Floating microscope icons Research/science themed Adapts to light/dark mode Interactive Calendar Navigate months with prev/next buttons Events highlighted with dots Click days to see event details Smooth Animations Scroll-triggered fade-ins Hover effects on cards Page transitions ✏️ Customization Add Events: In script.js, find the events array: javascript const events = [ { date: '2026-01-30', // Format: YYYY-MM-DD title: 'Your Event Title', time: 'Placeholder Time', description: 'Placeholder event description', location: 'Placeholder Location' } ]; Update Team Members: In board.html, modify the .board-member divs: html
Member Name
Position Title
Brief description
netstat -ano | findstr :8080 taskkill /PID <PID_NUMBER> /F
npm start -- --port 3000 Assets not loading Make sure /assets and /journals folders exist Check file names match exactly (case-sensitive) Run npm run build and check /dist folder CSS not updating bash
rm -rf node_modules/.cache
npm start Module not found errors bash
rm -rf node_modules package-lock.json npm install 🌐 Deployment Deploy to GitHub Pages bash
npm run build
Deploy to Netlify Build command: npm run build Publish directory: dist Deploy to Vercel Import project Build command: npm run build Output directory: dist Deploy to any host bash
npm run build
🔧 Webpack Configuration webpack.config.js Bundles JavaScript Copies CSS file Processes HTML files Copies assets and PDFs Hot reload enabled Development server on port 8080 Modifying Webpack Edit webpack.config.js to: Change port: modify devServer.port Add new file types: add rules in module.rules Change output folder: modify output.path 📊 Performance Lightweight bundle (~50KB JS + CSS) Optimized particle count (25 microscopes) CSS animations (GPU accelerated) Lazy loading not needed (small assets) Hot reload for instant development updates 🎓 For Developers Key Webpack Features: HtmlWebpackPlugin - Processes all HTML files CopyWebpackPlugin - Copies assets and journals webpack-dev-server - Live reload development CSS & Style loaders - Processes stylesheets Development Workflow: Edit files in root directory Webpack watches for changes Browser auto-refreshes Build for production before deploying File Watching: Webpack watches these files: *.html - All HTML files .css - Stylesheet .js - JavaScript assets/**/ - All assets journals/**/ - All PDFs 📞 Support For issues or questions: Check /dist folder after building Verify all assets exist in correct folders Check browser console for errors Ensure Node.js and npm are up to date Built for The Catalyst at UC San Diego Digital paper series for undergraduate research 📝 Version History v1.0.0 - Initial release Complete website with 6 pages Webpack configuration Development server setup Production build ready