Watcher - Minimal Screen time tracker website

Overview

Watcher website first look

This is what we are gonna make throughout the Hacktoberfest. Also do check out Watcher

Tech-stack

ReactJS CSS3

Want to Contribute to Watcher ?

Rules

  • Don't create a pull request on an issue that doesn't exist, create an issue first and if the changes you are proposing are said to be okay, you can go ahead and create a pull request

  • Before starting to work on any issue make sure it's assigned to you

  • Add the Issue you worked on in your Pull Request

  • Don't work on the main branch, create your own branch

💥 How to Contribute

  • Take a look at the existing Issues or create a new issue!
  • Fork the Repo. Then, create a branch for any issue that you are working on. Finally, commit your work.
  • Create a Pull Request, which will be promptly reviewed and given suggestions for improvements by maintainers
  • Add screenshots or screen captures to your Pull Request to help us understand the effects of the changes proposed in your PR.

🌟 HOW TO MAKE A PULL REQUEST:

  1. Start by making a Fork of the Watcher-website repository.

  2. Clone your new fork of the repository in the terminal/CLI on your computer with the following command:

git clone https://github.com/<your-github-username>/Watcher-website
  1. Navigate to the newly created Code-Magic project directory:
cd Watcher-website
  1. Set upstream command:
git remote add upstream https://github.com/Waishnav/Watcher-website.git
  1. Create a new branch:
git checkout -b YourBranchName
  1. Sync your fork or your local repository with the origin repository:
  • In your forked repository, click on "Fetch upstream"
  • Click "Fetch and merge"

Alternatively, Git CLI way to Sync forked repository with origin repository:

git fetch upstream
git merge upstream/main

Github Docs for Syncing

  1. Make your changes to the source code.

  2. Stage your changes and commit:

git add 
git commit -m "commitmessage"
  1. Push your local commits to the remote repository:
git push origin YourBranchName
  1. Create a Pull Request!

  2. Congratulations! You've made your first contribution to Watcher-website!

💥 Issues

In order to discuss changes, you are welcome to open an issue about what you would like to contribute. Enhancements are always encouraged and appreciated.

Comments
  • Add: Hero section

    Add: Hero section

    image

    Get it Now button will display the instructions to install Watcher. The style of the get-it button is primary. so you can give the CSS class primary-button to it.

    You can have a look at figme-design here.

    Assets

    | Asset-name | Asset | | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | | glowy-laptop-screen.svg | |

    good first issue hacktoberfest 
    opened by Waishnav 11
  • add: make fixed header component

    add: make fixed header component

    | Desktop-tablet view | Mobile view | | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | | | |

    For Now, you can skip the granular texture in the background.

    Font used: Poppins (throughout the website ), Cairo (Star-us button)

    Steps:

    • Add changes in src/components/Header/

    • add CSS file in the specific component directory if necessary

    good first issue hacktoberfest 
    opened by Waishnav 4
  • Footer component

    Footer component

    I used bootstrap CDN on footer.css. everything looks good on desktop. header is not mobile friendly, the bootstrap interferes. You could merge it, still needs work though. Let me know what you think.

    opened by Matthieu-ui 1
  • feat: add sublte animation on watcher-logo

    feat: add sublte animation on watcher-logo

    As the position of the cursor changes, The eyes in the logo should move accordingly.

    image

    For reference have a look below. https://www.seanhalpin.design/ https://omthakare16.github.io/Nezuko-movin-eyes/

    hacktoberfest 
    opened by Waishnav 1
  • Add contributing guidelines

    Add contributing guidelines

    Addresses issue #10 I have added some instructions as well as some git commands for newbies to get started. If you think there is something missing or something to add do tell...

    hacktoberfest-accepted 
    opened by Ni-vik 0
Owner
Vaishnav Deore
I'm fond of design and code.
Vaishnav Deore
Finance-Tracker - A basic finance-tracker application built using Next.js, React Hooks and Context API

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Osemwengie Benjamin 1 Jan 2, 2022
null 8 Nov 11, 2022
Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Priya Chakraborty 0 Jan 29, 2022
A complete COVID-19 tracker cum dashboard website made by me.

Covidview A detailed dashboard of live COVID-19 cases. Techs Used: React JS React Hooks and DOM Firebase WHO disease API Demo Video : covid.mp4 Workin

MAINAK CHAUDHURI 24 Dec 17, 2022
Chronos is an ML Scheduler Tool, helping students to block and manage time with minimal manual intervention.

Chronos (Currently in progress) Chronos is an ML Scheduler Tool, helping students to block and manage time with minimal manual intervention. It adapts

Shromann Majumder 3 Aug 17, 2022
This project is a web app that uses the TVmaze API to retrieve data and display a list of items on the screen.

This project is a web app that uses the TVmaze API to retrieve data and display a list of items on the screen. It also enables people to like and comment on the broadcast. JavaScript, API, Bootstrap, HTML, and CSS3 were used to create this site.

Mihreteab Misganaw 2 Jan 10, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
An application to capture screenshots automatically of your screen!

TASCA : The Automatic Screenshot Capturing Application An application to capture screenshots automatically of your screen! Report Bug · Request Featur

Piyush Sharma 1 Jan 27, 2022
Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.

Solid Windowed Given a list of items, only render what's visible on the screen while allowing scrolling the whole list. A Solid component. See https:/

Tito 40 Dec 21, 2022
This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

xataio 761 Jan 1, 2023
A server setup to take screenshots against the green screen in-game.

alt:V Clothing Green Screener Support on Patreon. Seriously. Ever want screenshots of every single clothing item in GTA:V? Well this is your repositor

null 13 Dec 26, 2022
A Deno library for interacting with the mouse 🖱️ keyboard ⌨️ and screen 💻

A Deno library for interacting with the mouse ??️ keyboard ⌨️ and screen ?? . Litebot provides a simple API for creating kbm events, macros, & working with displays. Litebot leverages Deno's FFI to allow speedy low level control in C & C++ while having a typescript API exposed to the user.

Tyler Laceby 10 Aug 30, 2022
As babies smash on the keyboard, images, letters and numbers appear on the screen

Baby Bam Bam As babies smash on the keyboard, images, letters and numbers appear on the screen. Try the many options and find the ones that are right

Boris Fritscher 3 Oct 24, 2022
A powerful data visualization 2D/3D large-screen editor tool with low-code.

tp-editor(2D/3D)中文说明 A topology 2D/3D editor with nodejs, express, socket.io es6, HT for Web and vite. It's a powerful large-screen data visualization

Flying Li 11 Dec 25, 2022
Implements Screen Space Reflections in three.js

three.js Screen Space Reflections Implements performant Screen Space Reflections in three.js. Glossy Reflections Clean Reflections Example scene Demos

0bqz 440 Dec 29, 2022
Responsive navigation plugin without library dependencies and with fast touch screen support.

Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support. Responsive Nav is a tiny JavaScript plugi

Viljami Salminen 4.1k Dec 29, 2022
A simple library to view large images up close using simple mouse interaction, and the full screen.

Intense Images A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning. Here's a demo

Tim Holman 2.6k Dec 31, 2022
Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Jafar Yousef 6 Aug 4, 2022
A full screen slide show for images and videos

Vanilla JS Slide full screen slide show for videos and images Why? This is a scratch-your-own-itch project as I wanted a way to see images and videos

Christian Heilmann 24 Oct 26, 2022