https://github.com/mmaffi/musicgallery-staticpage
MusicGallery is my personal website where I share the music covers I create. It features a clean, responsive design that allows visitors to explore and listen to my songs directly in the browser. Built with HTML, CSS, and JavaScript, the site also supports multiple languages, push notifications, and works as a Progressive Web App (PWA).
https://github.com/mmaffi/musicgallery-staticpage
audio-player cover firebase json localization music music-gallery open-source personal-project progressive-web-app push-notifications pwa responsive-design web-audio
Last synced: 11 months ago
JSON representation
MusicGallery is my personal website where I share the music covers I create. It features a clean, responsive design that allows visitors to explore and listen to my songs directly in the browser. Built with HTML, CSS, and JavaScript, the site also supports multiple languages, push notifications, and works as a Progressive Web App (PWA).
- Host: GitHub
- URL: https://github.com/mmaffi/musicgallery-staticpage
- Owner: MMaffi
- License: mit
- Created: 2025-07-15T18:54:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-07T16:57:14.000Z (12 months ago)
- Last Synced: 2025-08-07T18:34:24.692Z (12 months ago)
- Topics: audio-player, cover, firebase, json, localization, music, music-gallery, open-source, personal-project, progressive-web-app, push-notifications, pwa, responsive-design, web-audio
- Language: HTML
- Homepage:
- Size: 114 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎵 MusicGallery
An interactive and responsive music gallery built with HTML, CSS, and JavaScript, hosted as a static website.
Access the site here: [Music Gallery](https://mmaffi.github.io/MusicGallery)
---
## ✨ Overview
- Visual gallery with album art and embedded audio player for each item.
- Play/pause support directly on the interface.
- Additional pages such as 📄 *About*, 🎥 *Videos*, and a suggestion form (*sugestoes.html*).
- Mobile-friendly and PWA-ready (Progressive Web App).
---
## 🛠️ Technologies
- **HTML5** and **CSS3** for structure and styling.
- **JavaScript** for interactivity — audio control, navigation, and gallery logic.
- Modular structure with organized folders.
- JSON files for data and `locales` for translations.
- PWA with service worker and notifications via Firebase Cloud Messaging.
---
## 📁 Project Structure
```
/
│── assets/ → images and media
│── css/ → site styles
│── javascript/ → scripts for music control and UI
│── json/ → structured data for the gallery
│── locales/ → translation or localization files
│── index.html → main page with the gallery
│── videos.html → video section
│── sobre.html → “About” page
│── sugestoes.html → user suggestion form
│── thankyou.html → thank-you page after submission
│── site.webmanifest → PWA configuration file
│── firebase-messaging-sw.js → service worker for notifications
│── LICENSE → MIT license
│── README.md → project documentation
```
---
## 🚀 Features
- Gallery display with covers and integrated audio.
- Playback control (play/pause) directly on the cards.
- Thematic pages with smooth navigation.
- Interface translation based on `locales` files.
- Firebase integration for push notifications.
- PWA behavior: add the app to your home screen.
---
## 🤝 Contribution
Contributions are welcome!
1. Fork the repository.
2. Create a branch for your feature (`feature/your-feature-name`).
3. Commit your changes.
4. Open a pull request describing your update.
---
## 📝 License
This project is licensed under the **MIT License** — see the `LICENSE` file for details.
---
## 📨 Contact
Feel free to suggest improvements or share feedback!
Portfolio: [https://mmaffi.github.io](https://mmaffi.github.io)