Skip to content

Latest commit

 

History

History
49 lines (38 loc) · 2.65 KB

readme.md

File metadata and controls

49 lines (38 loc) · 2.65 KB
Raw

30 Days GitHub Contribution Calendar

- first let me tell you why i made this all the old one's out there have 0 styling in them and takes a lot of time experience and effort to understand,
my layout is simple my code is vanilla its perfect for just putting it in your portfolio but still i do have a problem wich is that you can't commit it
on github without creating a .env file with the token and setting a react and node comunication server thingy wich may risk the code base by adding
tons of modules also can risk your account by making the token not only visible but also setting it up to be usable at least in my layout the token is
just there to read it wont do anyone any good hhhh
+ hope who's reading this can help or have an idea to make it a lot better fell free to pull a request

This project displays a GitHub contribution calendar for the past 30 days, providing a visual representation of your GitHub activity. The calendar shows different levels of contributions, color-coded to represent the frequency of contributions during this period.

Features

  • Dynamic Contribution Calendar: Displays a calendar grid representing the whole month of contributions.
  • Color-Coded Legend: The calendar includes a legend to indicate different levels of contribution intensity:
    • Low: Fewer contributions
    • Medium: Moderate contributions
    • High: High number of contributions
    • Very High: Very high number of contributions
  • Responsive Design: The calendar is designed to be responsive, ensuring it looks good on various screen sizes.

Project Structure

The project consists of the following files:

  • index.html: The main HTML file that structures the webpage.
  • index.css: The CSS file that styles the calendar and its elements.
  • index.js: The JavaScript file responsible for generating the calendar and managing its interactivity.
    • make sure to replace the token with your github token and give it repo access !

How to Use

  1. Clone the repository:

    git clone https://github.com/Ali-Cheikh/30-days-github-contribution-calendar.git

  2. Open the project: Navigate to the project directory and open index.html in your preferred web browser.

  3. View your Contributions: The calendar will display your GitHub contributions for the whole month.

Customization

You can customize the calendar by modifying the index.css file for styling or the index.js file for functionality. For example, you can adjust the color scheme in the legend or change how the contributions are represented.

Screenshots

alt text alt text

CodePen

https://codepen.io/Ali-Cheikh/pen/QWXxBLq