Snake Game on GitHub Profile

"Your code is your credibility; the only way to prove your expertise is by showcasing what you're capable of building."

Customizing your GitHub profile can help you demonstrate your creativity and your skills and knowledge about profile customization.
Though it might sound like basic personalization, but GitHub is about showcasing what you know and are capable of doing. And demonstrating a profile that is unique and has attractive elements can help you stand out from the crowd.

For this, GitHub offers users with "readme.md" customization which appears on the top of the profile.
And this is not just to add basic text and links, but is itself a live running web application, which you can customize and code to work the way you want it to.

This brings us to GitHub Profile ReadMe Maker (GPRM) which is an open source project, which you are free and open to use for your personal use.
It has a built-in set of templates, layouts and themes, which you can choose from, and decide which one do you wish to proceed with for your profile.
You can add stats, charts, graphs, links, buttons and images, and a lot more.
Do check it out from the above linked button (GPRM) and create a readme.md file for your account immediately.

The profile readme is a simple markdown file (.md), which is of course a text file, but is beyond your thinking when it comes to it's capabilities.
If you are familiar with web development, you definitely know about HTML, CSS and JS. These need to be coded individually and then executed in order to see an output. Now if you also know about web application development, then you know about APIs and linkage of other applications into your page.

This markdown file, is also capable to execute your webapplications in realtime, and show it up on your GitHub profile page!
How ? It accepts codes in basic HTML format, so you can use the standard structures, along with inline CSS too! And the best part, you are free to use API from other websites / applications in order to show stuff on your profile.
And when combined with GitHub actions, you can use an external API to generate any media, and then use that media to show on your profile.

Click HERE to visit my GitHub Profile to have a preview!

And this is exactly how we are going to bring the snake game on our contribution chart today!

Step 1 : Create a Profile Repository

On your GitHub profile, in case you haven't already, then create a new repository, and set the repo name exactly the same as your GitHub username, remember that it is case sensitive.
Inside this repository, create a new file "README.md"

Step 2 : Create your Actions YML file

Now we need to create an action, that will generate the animation file as per our contributions chart, required for the snake game.

For this, head up to your repository, create a directory named ".github", sub directory "workflows", and then the file "snake.yml".

YOUR_GITHUB_USERNAME --> .github --> workflows --> snake.yml

In this snake.yml file, copy and paste the following lines of code : 

name: GitHub Snake Game

on:

  # Schedule the workflow to run daily at midnight UTC

  schedule:

    - cron: "0 0 * * *"

  # Allow manual triggering of the workflow

  workflow_dispatch:

  # Trigger the workflow on pushes to the main branch

  push:

    branches:

      - main

jobs:

  generate:

    runs-on: ubuntu-latest

    timeout-minutes: 10

    steps:

      # Step 1: Checkout the repository

      - name: Checkout Repository

        uses: actions/checkout@v3

      # Step 2: Generate the snake animations

      - name: Generate GitHub Contributions Snake Animations

        uses: Platane/snk@v3

        with:

          # GitHub username to generate the animation for

          github_user_name: ${{ github.repository_owner }}

          # Define the output files and their configurations

          outputs: |

            dist/github-snake.svg

            dist/github-snake-dark.svg?palette=github-dark

            dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

        env:

          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      # Step 3: Deploy the generated files to the 'output' branch

      - name: Deploy to Output Branch

        uses: peaceiris/actions-gh-pages@v3

        with:

          github_token: ${{ secrets.GITHUB_TOKEN }}

          publish_dir: ./dist

          publish_branch: output

          # Optionally, you can set a custom commit message

          commit_message: "Update snake animation [skip ci]"

Once pasted, commit changes for this snake.yml file.

Step 3 : Bring the YML file into Action

Go to the home directory on your Profile repository. 
Now you must see a directory ".github" and a file "README.md".

For execution of the YML file, go to the Actions tab, from the left pane, choose "All Workflows"

Now you will be able to see the list of workflows that were brought into execution, since this repository was created.
Here you will see a workflow named "GitHub Snake Game" and one or two more similar to it, regarding the creation of the yml file, and the readme file.

Again on the left pane, Actions tab, switch to "GitHub Snake Game" workflow.

Now on the GitHub Snake Game workflow, again you will find a list full of workflows, before the list, on the top, you will find "This workflow has a workflow_dispatch event trigger".
On the right, you will find a button "RUN WORKFLOW". There let the branch be as "main", and hit "Run Workflow".

Now it would take a minute or two, and it will be completed. This is how it should appear after pressing run workflow : 

The task must show in queue, if not, refresh the page. If still doesn't show up like this, run the workflow again.

Once it is complete, it should show up like this : 

So we are done executing the workflow.

Now you need to head up to the root of your profile directory, and under branch, you must be able to see  that a new branch has been created named "output".

Head up to the output branch, and here you should see that few files have been generated. 

Two of them would be named "github-snake.svg" and "github-snake-dark.svg". These are basically scalable vector graphic animations, that have been generated through the workflow.
It fetches data from your profile each midnight, generates a new file, overwriting the old one. Now we just need to add these files to our README.md, so that this animation is shown along the home page of our GitHub profile.

 

Step 4 : Add the Animation to your Profile

This is the final step we need to perform. 
We created a workflow that will generate the animation file as per our contributions to GitHub. And that file just needs to be added to display on our profile.

To do so, open the README.md file, from the main branch, in edit mode, and add the following line of code : 


And remove "-dark" from the line if you want it on the light theme.

Commit changes.
Go to your profile homepage, refresh, and done!

Now you have a cool snake game on your GitHub profile, where the snake is eating up all your contributions :p

 

Summary :
1. Creation of Profile Repository.

2. Created the README.md file for profile description.

3. Created a workflow to generate snake on contributions animation.

4. Brought the workflow into ACTION to generate necessary files.

5. Imported the file into the README markdown 

Here is a detailed tutorial on YouTube in order to achieve the results.

If facing any issues, comment down on the video, we will help you out!