Photo Gallery

A simple, responsive photo gallery that works locally and on GitHub Pages.

🚀 Quick Setup

Run Locally

1. Clone this repository:

git clone https://github.com/mime29/mime29.github.com.git
cd mime29.github.com

2. Start the local server:

node server.js

3. Open your browser to http://localhost:8080

Note: Node.js is required. If you don't have it, download it here.

Features When Running Locally

• Drag & drop images to upload
• Click and drag images to reorder them
• Click image titles to edit them
• Remove images with the remove button
• All changes are saved automatically to gallery-data.json

🌐 Publish to GitHub Pages

Step 1: Create Your Own Repository

1. Fork this repository or create a new one named [your-username].github.io
2. Clone your repository:

git clone https://github.com/[your-username]/[your-username].github.io.git
cd [your-username].github.io

Step 2: Add Your Images

1. Run the local server (node server.js)
2. Open http://localhost:8080
3. Upload and arrange your images
4. Edit the gallery title and image captions

Step 3: Deploy to GitHub Pages

git add .
git commit -m "Update gallery"
git push origin main

Your gallery will be live at: https://[your-username].github.io

Note: It may take a few minutes for GitHub Pages to update.

📁 File Structure

/
├── index.html         # Main gallery page
├── app.js            # Gallery logic
├── server.js         # Local development server
├── gallery-data.json # Gallery data (title, image order)
└── images/           # Your photos

💡 Tips

• Images are automatically compressed to optimize loading
• The gallery title can be edited by clicking on it (when running locally)
• On GitHub Pages, the gallery is read-only for visitors
• Keep your gallery-data.json file committed to preserve image order and titles

🛠 Requirements

• Local development: Node.js
• GitHub Pages: Just a GitHub account

📝 License

MIT License - feel free to use this for your own projects!