https://github.com/ibrahimif/the-switch

A React Vite project, about that allows the user to click a switch.
https://github.com/ibrahimif/the-switch

random reactvite vercel

Last synced: 2 months ago
JSON representation

A React Vite project, about that allows the user to click a switch.

• Host: GitHub
• URL: https://github.com/ibrahimif/the-switch
• Owner: IbrahimIF
• Created: 2023-09-06T15:56:05.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-03T17:18:49.000Z (over 1 year ago)
• Last Synced: 2025-06-16T04:33:29.739Z (6 months ago)
• Topics: random, reactvite, vercel
• Language: CSS
• Homepage: https://the-switch-ten.vercel.app
• Size: 7.86 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

![image](https://github.com/user-attachments/assets/5f8b9945-1d0a-4920-b29a-ad778b2a321b)

![Project Status](https://img.shields.io/badge/status-completed-brightgreen)

![Static Badge](https://img.shields.io/badge/made_with-React_+_Vite-blue)

First Iteration and a test of my project idea known as The Switch.

First project that utilises achievements and is about you pressing a light switch that dims the page.

----

## Getting started:

To run this project locally, you'll need to have Node.js and npm installed on your computer. Once you have these installed, follow these steps:

1. Clone this repository to your local machine.

2. Navigate to the project directory using the command line.

3. Run npm install to install all dependencies.

4. Run npm run dev to start the Vite development server.

5. Open your web browser and navigate to http://localhost:5173 (or the port shown in the terminal) to see the website.

Above is for those who would want to run the repo itself.

Below is the website link currently running on Vercel:

> [The-Switch](https://the-switch-ten.vercel.app/)

-----

## Features:

This project includes several exciting features for you to explore:

- **Achievements**: Unlock and view various achievements as you progress through the project.

- **Hidden Secrets**: Discover hidden elements and secrets within the project for added fun and challenge.

- **Toggle Switch**: Interact with a switch that you can turn on and off, affecting different aspects of the project.

-----

## Technologies and Tools Utilised:

[![My Skills](https://skillicons.dev/icons?i=react,js,html,css,vite,vercel,vscode&perline=1)](https://skillicons.dev)

-----

## Acknowledgment:

- [Achievement CSS](https://codepen.io/uenify/pen/KxzKVd)

- [Light Switch CSS](https://codepen.io/Katzwinkel/pen/yLNbwVV)

---