https://github.com/planetoftheweb/fantastic-chainsaw
A repo for stanford's class
https://github.com/planetoftheweb/fantastic-chainsaw
Last synced: 4 months ago
JSON representation
A repo for stanford's class
- Host: GitHub
- URL: https://github.com/planetoftheweb/fantastic-chainsaw
- Owner: planetoftheweb
- Created: 2024-10-17T16:54:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-17T18:52:21.000Z (over 1 year ago)
- Last Synced: 2026-01-27T04:50:49.418Z (4 months ago)
- Language: HTML
- Size: 15.8 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Midjourney AI Art Gallery
This project showcases a gallery of AI-generated images created with Midjourney. It includes unique characters, fantasy cityscapes, artistic indoor scenes, digital textures, and various artistic styles. This repository demonstrates the integration of modern web development techniques to create an interactive and visually appealing gallery.
## Techniques Used
- **Intersection Observer API**: Used to animate section visibility as users scroll through the page. Learn more about [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
- **Scroll Behavior**: Smooth scrolling enabled for a better user experience. See [scroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).
- **CSS Transitions**: Applied for smooth visual effects during scroll and image interactions. Explore [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition).
- **Lightbox Feature**: Provides a full-screen view of images with navigation controls.
## Notable Libraries and Technologies
- **Pico.css**: Minimal CSS framework for styling. [Pico.css](https://picocss.com)
- **Google Fonts**: Utilizing "Play" and "Titillium Web" fonts for typography. [Play](https://fonts.google.com/specimen/Play) and [Titillium Web](https://fonts.google.com/specimen/Titillium+Web)
## Project Structure
```plaintext
.
├── images
│ ├── characters
│ ├── cityscapes
│ ├── indoors
│ ├── styles
│ └── textures
├── scripts
│ └── script.js
├── styles
│ └── style.css
└── index.html
```
- **images**: Contains categorized folders for all gallery images.
- **scripts**: JavaScript files for interactivity and functionality.
- **styles**: CSS files for styling the webpage.
- **index.html**: The main HTML file that structures the webpage.
### Fonts
- **Play**: [Play Font](https://fonts.google.com/specimen/Play)
- **Titillium Web**: [Titillium Web Font](https://fonts.google.com/specimen/Titillium+Web)
### Key Features
- **Dynamic Navigation Styling**: Navigation bar changes style upon scrolling past the hero section.
- **Image Lightbox**: Clickable images open in a full-screen lightbox with next and previous navigation.
- **Responsive Grid Layout**: Images are displayed in a responsive grid layout, adjusting for various screen sizes.
### External Libraries
- **Pico.css**: [Pico.css](https://picocss.com)
- **Google Fonts**: [Google Fonts](https://fonts.google.com)