Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajaypatil1993/3d-animated-space
3D Animated Space Hero Page is an immersive and interactive landing page showcasing a space-themed hero section. This project is built using React.js, Tailwind CSS, React Icons, and AOS for animated scroll effects.
https://github.com/ajaypatil1993/3d-animated-space
animation aos aos-animation css3 html5 javascript netlify react-icons reactjs tailwindcss
Last synced: 2 days ago
JSON representation
3D Animated Space Hero Page is an immersive and interactive landing page showcasing a space-themed hero section. This project is built using React.js, Tailwind CSS, React Icons, and AOS for animated scroll effects.
- Host: GitHub
- URL: https://github.com/ajaypatil1993/3d-animated-space
- Owner: ajaypatil1993
- Created: 2024-11-05T00:20:40.000Z (11 days ago)
- Default Branch: main
- Last Pushed: 2024-11-05T00:29:52.000Z (11 days ago)
- Last Synced: 2024-11-05T01:23:32.095Z (11 days ago)
- Topics: animation, aos, aos-animation, css3, html5, javascript, netlify, react-icons, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://3d-animated-space.netlify.app/
- Size: 707 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D Animated Space Hero Page 🚀✨
**3D Animated Space Hero Page** is an immersive and interactive landing page showcasing a space-themed hero section. This project is built using React.js, Tailwind CSS, React Icons, and AOS for animated scroll effects. The hero section features dynamic elements like a flying rocket, orbiting planets, and animated clouds to engage users and create a visually captivating experience.
## Screenshots 📸
### Desktop View:
### Mobile View:
## Features ✨
- **3D Animated Hero Elements**: Includes a rocket and planets with smooth animations.
- **Responsive Design**: Optimized for viewing on all devices, from mobile to desktop.
- **Scroll Animations**: Enhanced with `AOS` for appealing scroll effects.
- **Tailwind CSS Integration**: Simplifies styling with a utility-first approach.
- **React Icons**: Adds visual elements seamlessly.
## Tech Stack 🛠️
## Project Layout 🗂️
```bash
3D_Animated_Space_Hero_Page/
│
├── public/
│ └── assets/
├── src/
│ ├── components/
│ ├── styles/
│ ├── App.js
│ ├── index.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── LICENSE
```
- **`public/`**: Contains static assets such as images and SVGs.
- **`src/`**: Main source code, including components and styles.
- **`App.js`**: Central app structure.
- **`components/`**: Reusable components like the Hero section.
- **`styles/`**: Custom styling and Tailwind CSS configurations.
## Getting Started 🚀
### Prerequisites
- [Node.js](https://nodejs.org/) (version 14 or higher)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
### Installation
1. **Clone the Repository**:
```bash
git clone https://github.com/your-username/3d-animated-space-hero-page.git
cd 3d-animated-space-hero-page
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Run the Development Server**:
```bash
npm start
```
Visit `http://localhost:3000` in your browser to view the project.
## Contributing 🤝
1. **Fork the Repository**
2. **Create a New Branch**:
```bash
git checkout -b feature/new-feature
```
3. **Commit Changes**:
```bash
git commit -m "Added new feature"
```
4. **Push to GitHub**:
```bash
git push origin feature/new-feature
```
5. **Open a Pull Request**.
## Live Preview 🌐
Explore the live version of **3D Animated Space Hero Page**: [Live Demo](https://3d-animated-space.netlify.app)
## Contact 📬
- **LinkedIn**: [Ajay Patil](https://www.linkedin.com/in/ajaypatil1993)
- **Email**: [[email protected]](mailto:[email protected])
- **GitHub**: [GitHub](https://github.com/ajaypatil1993)
## License 📝
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Acknowledgements 🙏
- 
- 
- 
- 