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.
- Intersection Observer API: Used to animate section visibility as users scroll through the page. Learn more about Intersection Observer API.
- Scroll Behavior: Smooth scrolling enabled for a better user experience. See scroll-behavior.
- CSS Transitions: Applied for smooth visual effects during scroll and image interactions. Explore CSS Transitions.
- Lightbox Feature: Provides a full-screen view of images with navigation controls.
- Pico.css: Minimal CSS framework for styling. Pico.css
- Google Fonts: Utilizing "Play" and "Titillium Web" fonts for typography. Play and Titillium Web
.
├── 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.
- Play: Play Font
- Titillium Web: Titillium Web Font
- 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.
- Pico.css: Pico.css
- Google Fonts: Google Fonts