Counter Strike 2 - Clone Of The Original Website

Description

This is a simple clone of the official Counter Strike 2 website.

I saw it as an opportunity to try out React (I mean Preact), learn the framework, and understand why it is so popular.

Note This is my first time working with React, so you may encounter some anti-patterns. Nonetheless, I am constantly learning and improving

This website is made with the help of :

• Preact
• React Compare Slider
• ScrollOut

Since this project is just a demo; it lacks some features such as :

• Image lazy loading & LQIP

• Module lazy loading

• Responsiveness (made for desktop only)

Is React cool? yea, but i do miss Angular.

The Namcespace concept is cool tho. (is this the correct name? idk 🤭)

Preview

Thanks to Vercel, you can play with the project online

Project structure

📦
├─ index.html
├─ public
└─ src
   ├─ assets
   │  ├─ fonts
   │  ├─ images
   │  ├─ json
   │  ├─ sass
   │  └─ svg
   ├─ components
   │  ├─ AudioSection
   │  ├─ ComingSection
   │  ├─ Footer
   │  ├─ Header
   │  ├─ Home
   │  ├─ IntroSection
   │  ├─ InventorySection
   │  ├─ MapsSection
   │  │  └─ maps
   │  ├─ SmokesSection
   │  ├─ TicksSection
   │  ├─ VfxSection
   │  └─ UI
   │     ├─ Box
   │     ├─ MainBlock
   │     ├─ MapsBox
   │     ├─ Rows
   │     └─ YoutubeCard
   └─ global.scss

Quick start

Clone this repo.

git clone https://github.com/aBrihoum/CounterStrike2.git

Install npm packages.

cd CounterStrike2
npm i

Development server

Run npm run dev for a dev server.

Navigate to http://127.0.0.1:5173/.

The app will automatically reload if you change any of the source files.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.