https://github.com/ramxcodes/valorant-remastered
This project is a redesign of the Valorant website, featuring stunning animations and seamless user interactions.
https://github.com/ramxcodes/valorant-remastered
Last synced: about 1 year ago
JSON representation
This project is a redesign of the Valorant website, featuring stunning animations and seamless user interactions.
- Host: GitHub
- URL: https://github.com/ramxcodes/valorant-remastered
- Owner: ramxcodes
- Created: 2024-11-22T17:06:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-01T18:09:03.000Z (over 1 year ago)
- Last Synced: 2025-02-05T13:51:17.382Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://valorant-remastered.vercel.app
- Size: 204 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Valorant Remastered
Welcome to **Valorant Remastered**, a visually captivating and engaging web application built using **React**, **Tailwind CSS**, and **GSAP**. This project is a redesign of the Valorant website, featuring stunning animations and seamless user interactions.
## 🎮 Project Overview
Valorant Remastered is a fan-made project showcasing a remastered version of the Valorant website. It combines modern design principles, smooth animations, and responsive layouts to deliver an immersive experience. The application highlights the world of Valorant, its gameplay, and the lore that keeps players engaged.
### ⚡ Features
- **Dynamic Animations**: Powered by GSAP for smooth and stunning animations.
- **Responsive Design**: Tailwind CSS ensures the application looks great on all devices.
- **Interactive UI**: Engaging elements with user-friendly navigation.
- **Content-Rich Sections**:
- **Game Overview**: Learn about the tactical gameplay and strategies.
- **Agents**: Discover unique characters and their abilities.
- **Leaderboards**: Showcase top players.
- **Media and News**: Stay updated with the latest in Valorant.
- **Contact Us**: Easy access to support and feedback.
---
## 🖥️ Site Content
### Header Navigation
- **Logo**
- **Download Game**
- **Media**
- **News**
- **Leaderboards**
- **About**
- **Contact**
### Homepage Sections
1. **Welcome to Valorant**
- Enter the Tactical Frontier.
- Master precision. Dominate strategy.
- *Play for Free* button.
2. **Gameplay Overview**
- Tactical 5v5 shooter with unique Agents.
- Blend your style and experience in competitive gameplay.
3. **Background and Creativity**
- Emphasis on creativity as a weapon.
- Multiple game modes: Competitive, Unranked, Deathmatch, Spike Rush.
4. **Battlefield Awaits**
- Maps with rich stories.
- Strategic gameplay opportunities.
5. **Agents**
- Diverse characters with game-changing abilities.
- Strategy-driven gameplay.
6. **Ranked Play**
- Prove your skills, climb ranks, and achieve Radiant status.
7. **The Lore Unfolds**
- Immerse in the Valorant Protocol and its unfolding stories.
8. **Join Valorant**
- Call to action: shape the future of Valorant.
9. **Footer**
- Contact Us
- Copyright ©2024 Ramxcodes and Riot Games.
---
## 🔧 Technologies Used
- **React**: For building dynamic and reusable components.
- **Tailwind CSS**: For fast, responsive, and customizable designs.
- **GSAP (GreenSock Animation Platform)**: For advanced, buttery-smooth animations.
---
## 🚀 Getting Started
### Prerequisites
Ensure you have the following installed:
- Node.js
- npm
### Installation
1. Clone the repository:
```bash
git clone https://github.com/ramxcodes/valorant-remastered.git
cd valorant-remastered
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:5173) in your browser to view the app.
---
## 🎨 Design Highlights
- **Hero Section**: A bold introduction to the Valorant universe with smooth text and button animations.
- **Interactive Cards**: Hover effects for Agents and gameplay modes.
- **Seamless Navigation**: Animated transitions between pages.
- **Lore Section**: Parallax effects to bring the story to life.