CoffeeHubb

Relive Coffee

Explore the docs »

View Demo . Report Bug . Request Feature

Table Of Contents

• About the Project
• Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• Authors
• Acknowledgements

About The Project

Welcome to the showcase of a captivating project that merges creativity, technology, and learning. This project is a testament to the skills honed in utilizing various tools and technologies to create an engaging web experience.

Built With

• GSAP (GreenSock Animation Platform): Bringing seamless and captivating animations to enhance user interactions.

• Swiper JS: Crafting interactive and responsive image sliders for an enriched visual journey.

• Email JS: Integrating smooth email functionalities for effective communication.

• Locomotive JS: Employing smooth scrolling effects to provide a modern and polished feel.

• Unsplash: Utilizing Unsplash for high-quality and aesthetic imagery.

Getting Started

Explore the project by following the instructions in the README. Feel free to dive into the code, modify it, and adapt it to your own learning journey.

Prerequisites

Before you begin, ensure you have the following prerequisites installed:

• VS Code Editor - for a better code writing experience
• Web Browser
  • A modern web browser like Google Chrome is recommended for optimal viewing.

Installation

To run this project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/nilaachandra/CoffeeHubb
   
   

Installation

Ensure you have a stable internet connection. Copy and paste the following CDN links into your HTML file as needed. GSAP (GreenSock Animation Platform): https://unpkg.com/gsap@3.9.1/dist/gsap.min.js

Swiper JS: href="https://unpkg.com/swiper/swiper-bundle.min.css" https://unpkg.com/swiper/swiper-bundle.min.js"

Email JS: "https://cdn.emailjs.com/dist/email.min.js"

Locomotive JS: "https://cdn.jsdelivr.net/npm/locomotive-scroll@4.0.7/di

Usage

This project is designed to showcase a combination of creative elements and technical skills. Here's how you can explore and use it:

1. Navigate the Website:

   • Open the project in your web browser.
   • Explore the various sections and animations crafted with GSAP for a visually appealing experience.

2. Image Sliders with Swiper:

   • Interact with the responsive image sliders powered by Swiper JS.
   • Swipe through images and enjoy a seamless carousel experience.

3. Smooth Scrolling with Locomotive JS:

   • Experience smooth and polished scrolling effects implemented with Locomotive JS.
   • Scroll through the content to see how the website flows with elegance.

4. Email Functionality with Email JS:

   • Test the email-related functionalities implemented using Email JS.
   • Submit a test email through the provided form to observe the communication flow.

5. Explore Codebase:

   • Dive into the codebase to understand how GSAP, Swiper JS, Locomotive JS, and Email JS are integrated.
   • Modify and experiment with the code to enhance your learning experience.

6. Inspiration from Pinterest:

   • Appreciate the design aesthetics inspired by Pinterest, contributing to the overall visual appeal.

Feel free to use this project as a learning resource, experimenting with the code and incorporating elements into your own projects. If you have questions or feedback, don't hesitate to reach out.

Happy exploring and coding!

Contributing

Contributions to this project are welcome and encouraged. Here's how you can contribute:

1. Fork the Repository:

   • Fork the repository to your GitHub account.

2. Create a Branch:

   • Create a new branch for your contributions.

   git checkout -b feature/your-feature-name
   
   

Creating A Pull Request

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Authors

• Nila Chandra Laishram - Emerging FrontEnd Developer - Nila Chandra Laishram - **

Acknowledgements

I would like to express my gratitude to the following individuals and communities who have contributed to the development and inspiration of this project:

• GSAP (GreenSock Animation Platform): Thank you to the GSAP community for providing a powerful animation library that elevates the user experience.

• Swiper JS: Acknowledgment to the Swiper JS team for creating a versatile and responsive image slider that enhances visual appeal.

• Email JS: Appreciation to the Email JS community for their SDK, enabling seamless integration of email functionalities.

• Locomotive JS: Thanks to the Locomotive JS developers for providing a smooth scrolling library that adds a polished touch to the website.

• Unsplash: Gratitude to Unsplash for providing a platform with high-quality images that contribute to the visual aesthetics.

• Pinterest: Inspiration drawn from the Pinterest community, shaping the design and layout elements of this project.

• Twitter/X Web Dev Community: Inspiration drawn from the community on X, also the immense support I received throughout the building of this project publicly.

• Open Source Community: A nod to the broader open-source community for fostering a collaborative environment that encourages learning and growth.

Special Thanks

Special thanks to Sheryians Coding School on YouTube for their tutorials through which I was able to make such website. Your support has been invaluable in shaping and improving this project.

Contact

If you believe your contribution or inspiration should be acknowledged and it is not mentioned, please reach out. Thank you to everyone who has played a role in making this project possible!

Happy coding!