Skip to content
Sharad Chandra Reddy edited this page Jul 29, 2025 · 1 revision

πŸ“Œ Introduction

SCR Gaming is a visually captivating website featuring scroll-triggered animations, geometric transitions, and engaging UI interactions. Built with React.js, GSAP, and Tailwind CSS, it delivers a sleek, modern feel, focusing on smooth UI/UX and responsiveness.

image

βš™οΈ Tech Stack

  • React.js – Component-based UI library.
  • GSAP – Smooth animations and transitions.
  • Tailwind CSS – Modern styling with utility-first approach.
  • Vite – Lightning-fast development environment.

πŸ”₯ Features

βœ… Smooth Scroll Animations – Engaging animations triggered by user interactions. βœ… Clip Path Transitions – Unique visual effects for modern UI. βœ… 3D Hover Effects – Interactive transformations for an immersive experience. βœ… Fast & Lightweight – Optimized with Vite for high performance. βœ… Responsive Design – Optimized for all screen sizes. βœ… SEO Optimized – Ensures better search engine visibility.


πŸ“Š Project Stats

Metric Value
⭐ GitHub Stars Coming Soon
🍴 Forks Coming Soon
πŸš€ Deployment Speed < 1 sec (Vercel)
πŸ“¦ Bundle Size ~160 KB
⏱️ Load Time ~0.5s

πŸš€ Getting Started (Local Setup)

Prerequisites

Ensure you have the following installed:

Installation & Setup

# 1️⃣ Clone the repository:
git clone https://github.com/YOUR_GITHUB_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME

# 2️⃣ Install dependencies:
npm install

# 3️⃣ Start the development server:
npm run dev

# 4️⃣ Open in browser:
http://localhost:5173/

1️⃣ Push your code to GitHub (if not already done):

git add .
git commit -m "Initial commit"
git push origin main

πŸ“œ License

This project is open-source and can be used for personal and educational purposes. If you use it, kindly provide appropriate credit.


πŸ“ž Contact

πŸ“§ Email: sharadreddy11@gmail.com πŸ”— LinkedIn: Your LinkedIn


βœ… What’s Improved?

βœ” Fixed project repository link ( ). βœ” Added full deployment instructions for Vercel. βœ” Troubleshooting section for common issues. βœ” Contact information with email & LinkedIn. βœ” Formatted everything neatly for readability.


πŸŒ€ Animation Preview

Animation Preview

Add a GIF or screen recording to showcase your animation in action.


πŸ™ Namaste!