https://github.com/manineedtosleep/project-photobook
A modern, responsive photo gallery with interactive animations, dark/light mode toggle, and social features. Built to experiment with CSS animations and modern web techniques.
https://github.com/manineedtosleep/project-photobook
css-animations css3 dark-mode es6 frontend html5 interactive-ui javascript photo-gallery portfolio-project responsive-design web-design
Last synced: 7 months ago
JSON representation
A modern, responsive photo gallery with interactive animations, dark/light mode toggle, and social features. Built to experiment with CSS animations and modern web techniques.
- Host: GitHub
- URL: https://github.com/manineedtosleep/project-photobook
- Owner: ManINeedToSleep
- Created: 2024-09-11T14:18:08.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T00:56:52.000Z (7 months ago)
- Last Synced: 2025-03-23T01:31:15.387Z (7 months ago)
- Topics: css-animations, css3, dark-mode, es6, frontend, html5, interactive-ui, javascript, photo-gallery, portfolio-project, responsive-design, web-design
- Language: JavaScript
- Homepage: https://manineedtosleep.github.io/Project-Photobook/
- Size: 942 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sleeper's Online Photo Flipbook
> **NOTICE:** This project is solely for testing and showcasing my development skills, experimenting with CSS animations, and practicing modern web techniques. It is not intended to be an actual product or service and has no plans for production deployment.
Welcome to Sleeper's Online Photo Flipbook! This is a modern, responsive web application designed to showcase and organize your favorite photos in a beautiful, interactive gallery. With an elegant design and smooth animations, this flipbook provides a delightful experience for preserving and sharing your cherished memories.
## ✨ Features
- **Modern Design**: Clean, elegant interface with smooth animations and transitions
- **Responsive Layout**: Looks great on desktops, tablets, and mobile devices
- **Interactive Gallery**: Each photo displays in a beautiful card with hover effects
- **Dark/Light Mode**: Toggle between light and dark themes with a stylish switch
- **Local Storage**: Your likes, theme preferences, and feedback are saved between sessions
- **Social Interactions**:
- Like/Dislike photos with animated reactions
- Share photos via Web Share API or clipboard
- Hide/Show photos with smooth animations
- **Feedback System**: Submit ratings and comments with an elegant star-rating system
- **Accessibility**: Improved with ARIA labels and semantic HTML
- **Performance**: Optimized with lazy loading for images
- **Upload Feature**: UI for photo uploads (demo only in current version)
- **Scroll-to-Top**: Easy navigation with animated scroll button
## 🚀 Getting Started
### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge, etc.)
- Internet connection (for loading external fonts and displaying linked photos)
### Installation
1. Clone this repository to your local machine:
```bash
git clone https://github.com/yourusername/sleepers-photo-flipbook.git
```
2. Navigate to the project directory:
```bash
cd sleepers-photo-flipbook
```
3. Open `index.html` in your browser:
- Double-click the file
- Or use a local development server like [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) for VSCode
- Or use Python's built-in server: `python -m http.server`
## 🎨 Customization
You can easily customize the flipbook by:
1. Adding your own photos to the `Img` directory
2. Updating the `index.html` file with new photo entries
3. Modifying the color scheme in `style.css`
4. Adding new features to `script.js`
## 🔮 Future Enhancements
- Backend integration for actual photo uploads and storage
- User authentication system
- Photo albums/categories
- Commenting system
- Social media sharing integration
- Advanced filtering and sorting options
- Slideshow mode
## 📱 Technologies Used
- HTML5
- CSS3 (with advanced animations and transitions)
- JavaScript (ES6+)
- Font Awesome icons
- Google Fonts
- Web Storage API
- Intersection Observer API
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📬 Contact
For inquiries, please contact: [lerolerolerolerolero@gmail.com](mailto:lerolerolerolerolero@gmail.com)
---
*Made with ❤️ by Sleeper*