🎮 Enhanced Media Support Documentation

🚀 How to Add Media to Your Projects

1. Adding Images and GIFs

Place your images in the project folder structure:

assets/projects/yourproject/image1.jpg
assets/projects/yourproject/gameplay.gif
assets/projects/yourproject/screenshot.png

2. Adding Videos

Local video files:

assets/projects/yourproject/demo.mp4
assets/projects/yourproject/trailer.webm

External videos:

https://www.youtube.com/embed/VIDEO_ID
https://player.vimeo.com/video/VIDEO_ID

3. Update projects-data.js

{
    id: 1,
    title: "Your Game",
    images: [
        "assets/projects/yourgame/screenshot1.jpg",
        "assets/projects/yourgame/gameplay.gif",
        "assets/projects/yourgame/screenshot2.png"
    ],
    video: "assets/projects/yourgame/demo.mp4",
    // or video: "https://www.youtube.com/embed/YOUR_VIDEO_ID"
}

✨ Enhanced Features

• 🎯 Smart Detection: System automatically detects file types
• 🎬 GIF Highlighting: Special blue border and film icon for GIFs
• ▶️ Video Controls: Play button overlay for videos
• 🔄 Auto-Cycling: Gallery automatically cycles through media every 3 seconds
• ⌨️ Keyboard Navigation: Use arrow keys to navigate media
• 📱 Responsive Design: Works perfectly on all devices
• 🛡️ Error Handling: Fallback to placeholder if media fails to load

📋 Folder Organization

Recommended folder structure:

assets/projects/
├── yourgame1/
│   ├── README.md
│   ├── thumbnail.jpg
│   ├── screenshot1.jpg
│   ├── gameplay.gif
│   ├── demo.mp4
│   └── trailer.webm
├── yourgame2/
│   ├── README.md
│   ├── thumbnail.png
│   ├── pic1.jpg
│   ├── pic2.gif
│   └── showcase.mp4
└── yourgame3/
    ├── README.md
    ├── thumbnail.jpg
    └── images...