This project showcases the beauty of Studio Ghibli’s works by leveraging powerful Custom CSS, Parcel.js, and HTML. The main focus of this project is on the CSS implementation to create an immersive and visually stunning experience.

GITHUB : PRIVATE REPO.

DEMO : https://highnessatharva.github.io/Studio-Ghibli-Gallery/

  • Recruiters, please email to request access.
  • Developers and Creatives, if you need this content, please email to request access. I can make a similar content for you if needed (charges will apply).

Project Summary

The Studio Ghibli Gallery is a web application that displays a collection of Studio Ghibli images. The project utilizes custom CSS styling to enhance the visual appeal of the gallery. It features custom scrollbars, pointers, gridviews, and various other CSS techniques to create an aesthetically pleasing user interface. Additionally, the gallery incorporates lazy loading and image optimization techniques to ensure smooth performance while showcasing over 100 images. The project is deployed using GitHub Pages’ CI/CD integration.

Project Tech Stack

The Studio Ghibli Gallery project utilizes the following technologies:

  • Custom CSS: Leveraging advanced CSS techniques for styling and visual enhancements.
  • Parcel.js: A fast and zero-config bundler for building the project.
  • HTML: Creating the structure and layout of the web application.
  • GitHub Pages: Deployment of the project and CI/CD integration.

Learnings

Throughout the development of the Studio Ghibli Gallery, several valuable learnings were gained:

  • Advanced CSS Techniques: Utilizing custom CSS properties, animations, transitions, and scroll properties to create visually appealing effects.
  • Optimizing Image Loading: Implementing lazy loading and image optimization techniques to improve performance and reduce load times.
  • Deployment with GitHub Pages: Utilizing GitHub Pages’ CI/CD integration to automate the deployment process and ensure seamless updates.

The Studio Ghibli Gallery project not only showcases the beauty of Studio Ghibli’s works but also serves as a great learning experience for working with CSS, image optimization, and deployment processes. Feel free to explore the gallery and immerse yourself in the enchanting world of Studio Ghibli’s creations.