Dragon Ball Z

A Dragon Ball Z website that features various games and offers a straightforward introduction to the story and heroes of the franchise.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Links
6. 🚀 More

🤖 Introduction

Design a Dragon Ball Z website using React, Tailwind, and GSAP, incorporating reusable and maintainable components while adding stunning GSAP animations.

⚙️ Tech Stack

• React
• Tailwind
• GSAP
• Vite

🔋 Features

👉 Maximizing Tailwind CSS: Discover tips and tricks to make the most out of Tailwind CSS.

👉 Scroll-Based Animations: Dynamic animations triggered by scrolling for a more engaging user experience.

👉 Clip Path Shaped Animations: Unique geometric transitions using CSS clip-paths to create visually stunning effects.

👉 3D Hover Effects: Interactive 3D transformations that respond to user interactions for a modern feel.

👉 Video Transitions: Seamlessly integrated video elements to enhance storytelling and flow.

👉 Smooth UI/UX: Polished interfaces with buttery-smooth interactions for an intuitive user journey.

👉 Responsive Design: The application is completely responsive across all devices, employing responsive design techniques such as media queries and fluid layouts.

👉 Organized File and Folder Structure: Maintain a well-organized file and folder structure for easy navigation and management of project assets.

all these while creating the website with,

• Navigation Bar
• Creative Hero Section
• Section for showcasing multiple games
• Section for a simple story introduction and a glance at heroes

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Ofarouq310/dragon-ballz.git
cd dragon-ballz

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

🔗 Links

A live project link is here

🚀 More

Follow for more upcoming modern projects