"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"
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".
Once it is complete, it should show up like this :
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.
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.
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
1. Creation of Profile Repository.
