ExploitX Memory Album

A modern, responsive web album showcasing the ExploitX Tech Club's team members and events with separate dedicated pages.

Features

• 🎨 Beautiful Glass-morphism Design - Modern transparent card effects
• 📱 Fully Responsive - Works on all devices (mobile, tablet, desktop)
• 🖼️ Group Photo Section - Showcase your team photo on the home page
• 📄 Separate Pages - Dedicated pages for home, members, and events
• 👥 Dynamic Team Members - Load members from JSON with photos and social links
• 🎯 Event Gallery - Display club events with images and details
• 🎭 Smooth Animations - Fade-in effects and hover interactions
• 🔗 Google Drive Integration - Easy image hosting via Google Drive

File Structure

Album-ExploitX/
├── index.html              # Home page with hero & group photo
├── members.html            # Dedicated team members page
├── events.html             # Dedicated events page
├── styles.css              # All styling and responsive design
├── script.js               # JavaScript for dynamic content
├── members.json            # Team member data
├── events.json             # Event data
├── images-config.json      # Image configuration (group photo & defaults)
├── IMAGE_GUIDE.md          # Detailed image management guide
├── QUICK_IMAGE_REFERENCE.md # Quick reference for adding images
└── README.md               # This file

Pages

Home Page (index.html)

• Hero section with statistics
• Group photo showcase
• Quick links to Members and Events pages

Members Page (members.html)

• Grid display of all team members
• Individual cards with photos, roles, and social links

Events Page (events.html)

• Grid display of all events
• Event cards with photos, dates, and descriptions

Quick Start

1. Clone or download this repository
2. Add your images - See QUICK_IMAGE_REFERENCE.md
3. Update data - Edit members.json and events.json
4. Open index.html in a browser

Adding Images

Group Photo (Home Page)

Edit images-config.json:

"groupPhoto": {
  "url": "YOUR_GOOGLE_DRIVE_LINK"
}

Team Member Photos

Edit members.json - add photo URL to each member

Event Photos

Edit events.json - add photo URL to each event

📖 Full Guide: See IMAGE_GUIDE.md for detailed instructions

Customization

Colors

Edit CSS variables in styles.css:

:root {
    --purple-bright: #7b2cbf;
    --orange-bright: #ff6b35;
    --blue-bright: #4a90e2;
    /* ... */
}

Members

Add/edit members in members.json:

{
  "Name": "John Doe",
  "Role": "Developer",
  "Tech-Role": "Full Stack",
  "Description": "Your description",
  "photo": "YOUR_IMAGE_URL",
  "linkedin": "LINKEDIN_URL",
  "github": "GITHUB_URL",
  "portfolio": "PORTFOLIO_URL"
}

Events

Add/edit events in events.json:

{
  "title": "Event Name",
  "date": "March 20, 2025",
  "icon": "fas fa-flag",
  "description": "Event description",
  "type": "CTF",
  "mode": "Online",
  "photo": "YOUR_IMAGE_URL"
}

Responsive Breakpoints

• Desktop: 1024px and above
• Tablet: 768px - 1024px
• Mobile: 480px - 768px
• Small Mobile: 360px - 480px
• Mini: Below 360px

Technologies Used

• HTML5
• CSS3 (Flexbox, Grid, Animations)
• JavaScript (ES6+)
• Font Awesome Icons
• Google Fonts

Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

License

All rights reserved - ExploitX Tech Club © 2025

Credits

Created with ❤️ by the ExploitX Team

---

For questions or support, contact the ExploitX Team.