A Frontend based website make you fall in love with Earth — explore its wonders, discover interesting facts, and learn easy, realistic tips to protect it! Includes fun activities, smooth animations, and interactive sections to make environmental awareness both educational and engaging.
In this video, you’ll see various effects and transitions that I have implemented to enhance the user experience. I focused on adding smooth animations, interactive elements, and responsive layouts to make the site visually appealing and engaging across different devices.
# Video to explore the website
👉 (https://youtu.be/DynMZx_4n5k)
Responsive Website's Home Page:
💡 Project Description
It includes sections to:
- Explore Earth’s facts & features for learning of kids and adults to better understand about earth's miracles and beauty
- Participate in fun, engaging activities in your bucket list
- Experience modern animations and smooth scroll effects to make it intersting and interactive -
- Learn practical environmental protection tips
⚙️ Tech Stack
- React.js (Vite) // Core frontend framework
- Tailwind CSS // Styling and responsive design
- Framer Motion // Animations and transitions
- React Router // Page navigation
- HTML5 / CSS3 / JavaScript // Structure, logic, and interactivity
- Responsive CSS // Works across all screen sizes
Your feedback is most welcome, and I look forward to any suggestions to improve the design or functionality.
🚀 Installation & Setup
1. Clone the repository:
- git clone https://github.com/your-username/earthshala.git
- cd earthshala
2. Install dependencies:
- Copy code
- npm install
3. Run the development server
- Copy code
- npm run dev
- Open the project
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
# EarthShala
# Protect & Explore