Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/miasmartypants/art_gallery
https://github.com/miasmartypants/art_gallery
Last synced: about 20 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/miasmartypants/art_gallery
- Owner: MiaSmartyPants
- Created: 2024-06-08T10:25:36.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-12T11:51:47.000Z (5 months ago)
- Last Synced: 2024-06-12T15:59:21.354Z (5 months ago)
- Language: JavaScript
- Size: 23.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Immersive Art Gallery
Discover an immersive art gallery experience like no other. Delve into captivating visuals and interactive displays that bring creativity to life.
An immersive art gallery featuring:
- 3D Cube
- Immersive gallery screen
- AI image generation
- Advanced CSS techniques
## Features
1. **CSS Techniques and Creativity**
- Effective use of advanced CSS features, including Grid, transformations, and transitions.
- Creativity in designing visually appealing and engaging art gallery layouts.
2. **User Interaction and Experience**
- Implementation of interactive features such as hover effects, transitions, and navigation.
- Consideration of user experience, ensuring a seamless exploration of the art gallery.
3. **Responsive Design**
- Skillful use of responsive design techniques for various screen sizes.
- Thoughtful adjustments for maintaining the visual integrity of the art gallery on different devices.
## Inspiration
- [Codepen Example](https://codepen.io/ivorjetski/pen/JjYOvvP)
- [3D Magic with CSS Grid](https://blog.openreplay.com/transform-your-website--create-3d-magic-with-css-grid/)
## Walkthrough
It takes 75 seconds for images to generate. I have removed the wait times from the video.
https://github.com/MiaSmartyPants/Art_Gallery/assets/106205169/00e98edd-251d-416a-9c25-a5815e0d2ccc
## Tech Stack
html
CSS
JavaScript
Craiyon
React
Python
## Browser Compatibility
Some CSS properties, especially 3D related ones, only work in modern browsers. They won't work in IE where `transform-style: preserve-3d` is not supported.
## How to Test/Demo/Run
**Ensure Chrome and ChromeDriver are installed in the correct location**
- Follow the instructions here: [ChromeDriver Setup](https://github.com/SeleniumHQ/selenium/wiki/ChromeDriver/01fde32d0ed245141e24151f83b7c2db31d596a4)
**Disable Gatekeeper (macOS)**
- To temporarily disable Gatekeeper, go to System Settings > Privacy & Security, and under the Allow apps downloaded from section, select “Anywhere.”
1. Clone the repo:
```
git clone https://github.com/MiaSmartyPants/Art_Gallery
```
2. Take out the owner's git:
```
git init
```
3. Go to server folder
```
cd server
```
4. Install all NPM packages using this in the root directory:
```
npm install
```
5. Start the app by using in client and server folder:
```
npm start
```
To run tests on the terminal:
* On client side run the following command:
```
npm test
```
## Future Developments
Apply conditional rendering of the cube with timer
More Interactive Features: Add more interactive elements for a better user experience.