https://github.com/prabhsingh20/zentry
Zentry is a gaming-themed website built with React.js, Tailwind CSS, and GSAP. It features interactive animations, a responsive layout, and an animated hero section where users can change the background video by clicking on images. A showcase of modern frontend skills with dynamic animations and sleek design.
https://github.com/prabhsingh20/zentry
animations gsap-animation reactjs responsive-design taiwindcss
Last synced: 6 months ago
JSON representation
Zentry is a gaming-themed website built with React.js, Tailwind CSS, and GSAP. It features interactive animations, a responsive layout, and an animated hero section where users can change the background video by clicking on images. A showcase of modern frontend skills with dynamic animations and sleek design.
- Host: GitHub
- URL: https://github.com/prabhsingh20/zentry
- Owner: prabhsingh20
- License: mit
- Created: 2025-01-29T09:20:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-31T10:04:48.000Z (8 months ago)
- Last Synced: 2025-01-31T10:33:48.522Z (8 months ago)
- Topics: animations, gsap-animation, reactjs, responsive-design, taiwindcss
- Language: JavaScript
- Homepage:
- Size: 48.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zentry
Zentry is an animated gaming website that pushes the boundaries of frontend development with React.js, Tailwind CSS, and GSAP animations. It's a showcase of modern web design trends, offering an immersive experience through dynamic animations, a responsive layout, and interactive elements, all centered around a gaming theme.
## Preview
Check out the [live demo](https://zentry-lake.vercel.app/) to experience the magic in action.
## Table of Contents
- [Project Description](#project-description)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [How to Clone and Run the Project](#how-to-clone-and-run-the-project)
- [Prerequisites](#prerequisites)
- [Steps to Clone and Run](#steps-to-clone-and-run)
- [License](#license)
- [Contributing](#contributing)
## Project Description
Zentry is a stunning gaming-themed website designed to immerse users in a virtual world of dynamic animations. Built with React.js, Tailwind CSS, and GSAP, the website showcases impressive frontend skills by incorporating animations that bring each section to life. The animated hero section is a standout feature, where users can interact with images to change the background video, making it a truly engaging experience. The entire website is designed to be fully responsive, ensuring smooth and seamless interactions across all devices.
**Tagline**: Redefine gaming and experience the Game of Games—your life, now an epic MMORPG.
## Features
- **Animated Hero Section**: Clickable images that trigger background video changes, creating an interactive and visually stunning experience.
- **GSAP Animations**: Smooth, high-performance animations throughout the site that add flair and excitement.
- **Fully Responsive**: The site is optimized for all screen sizes, ensuring an immersive experience on any device.
- **Dynamic Content**: Each section of the website comes to life with unique animations, giving a fresh and engaging experience as users scroll through.
- **Modern Design**: Leveraging the latest design trends, Zentry offers a sleek and polished look with bento grids and visually appealing elements.
- **Interactive Elements**: Various animations and hover effects that react to user interaction, making the experience feel more game-like.
## Technologies Used
- **React.js**: A frontend JavaScript library for building dynamic user interfaces.
- **Tailwind CSS**: A utility-first CSS framework for building custom designs quickly.
- **GSAP**: A powerful animation library that brings smooth, high-performance animations to the web.
- **Vite**: A fast and modern build tool for frontend development.
- **React Icons**: A library of customizable icons used across the website.
- **clsx**: A tiny utility for constructing `className` strings conditionally.
## How to Clone and Run the Project
### Prerequisites
- Ensure you have **Node.js** installed. You can download it from [here](https://nodejs.org/).
- You should have **Git** installed. Download it from [here](https://git-scm.com/).
### Steps to Clone and Run:
1. **Clone the repository**
```bash
git clone https://github.com/prabhsingh20/Zentry.git
```
2. **Navigate to the project directory**
Change into the project directory by running:
```bash
cd zentry
```
3. **Install dependencies**
Run the following command to install the necessary dependencies:
```bash
npm install
```
4. **Start the development server**
Once the dependencies are installed, you can start the app by running:
```bash
npm run dev
```
This will start the Vite development server and you should see the application running at [http://localhost:5173](http://localhost:5173).
---
## Core Dependencies
- **React.js**: Frontend JavaScript library for building dynamic user interfaces.
- **Tailwind CSS**: Utility-first CSS framework for fast, responsive designs.
- **GSAP**: High-performance animation library for smooth, interactive animations.
- **Vite**: Fast and modern build tool for frontend development.
For the full list of dependencies, check the `package.json` file.
## Contributing
✨ We welcome contributions to improve Zentry! If you'd like to contribute, follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes.
4. Run tests (if applicable) and ensure everything works.
5. Commit your changes and push to your forked repository.
6. Open a Pull Request to the main repository.
Please ensure to adhere to the project's coding standards and write meaningful commit messages. If you have any questions, feel free to ask!
## Testing
Currently, Zentry doesn't have a dedicated testing suite. However, contributions to add testing would be highly appreciated. If you'd like to help with testing, follow the instructions below (if applicable).
- To run tests:
`npm run test` (or appropriate command)
## License
This project is open-source and available under the MIT License. You can freely use, modify, and distribute the code. Please see the [LICENSE](./LICENSE) file for more detailed information.