How to Customize GitHub Profile: Part 4
Tags: github, githubprofile, githubportfolio, developer
Published: 2024-06-30 07:33:48

Welcome back to the fourth part of my series on customizing your GitHub profile! In this article, we'll delve into the fun and interactive contribution animation. This animation not only adds a unique flair to your profile but also visually represents your contributions in an engaging way.
[Part 1](https://dev.to/ryoichihomma/how-to-customize-github-profile-like-a-pro-16aa) | [Part 2](https://dev.to/ryoichihomma/how-to-customize-your-github-profile-part-2-32g2) | [Part 3](https://dev.to/ryoichihomma/how-to-customize-your-github-profile-part-3-37em) | [Part 5](https://dev.to/ryoichihomma/how-to-customize-github-profile-part-5-23po)

![Example Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bscv3c5r31x1k1uvrv6l.png)![Example Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnq68gukgtwa7ydyge8m.png)

## Add Snake Contribution Animation and Why 
The snake contribution animation is a creative way to showcase your GitHub activity. It adds a playful element to your profile while highlighting your commitment and consistency in contributing to open source projects. 
1. **Engagement:** The animation captures the attention of visitors. 
2. **Interactivity:** It provides a dynamic element to your otherwise static profile. 
3. **Visual Appeal:** It makes your contribution graph more interesting and visually appealing. 

## Setting Up the Snake Contribution Animation: 
To add the snake contribution animation to your GitHub profile, you can use GitHub Actions and a pre-made script that generates the animation. Here's how you can set it up: 
### Step1: Create a GitHub Actions Workflow
1. Go to your GitHub repository.
2. Navigate to the **Actions** tab. 
3. Click on **New workflow**, then **set up a workflow yourself**.

### Step 2: Add the Workflow Code
To add the workflow code into your workflow file (e.g., **github/workflows/snakeAnime.yml**), please refer to [Platane's Repository](https://github.com/Platane/snk).

### Step 3: Add the Animation to Your README.md File
Once the GitHub Actions workflow is set up and runs successfully, you can add the generated SVG file to your README.md file. Here's how:

```
<!-- CONTRIBUTIONS -->
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_USERNAME/output/github-contribution-grid-snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_USERNAME/output/github-contribution-grid-snake.svg">
  <img alt="Contribution Animation" src="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_USERNAME/output/github-contribution-grid-snake.svg">
</picture>
```

## Customize the Snake Contribution Animation
You can customize the animation's appearance by adjusting the colors and the schedule in the workflow file. Here're a few customization options: 
1. **Schedule:** Change the **cron** expression to adjust how often the animation updates. 
2. **Colors:** Modify the **source** URLs to use different color schemes. 

### Wrapping Up
In this part, we explored how to add the snake contribution animation to your GitHub profile. This fun and interactive element not only highlights your contributions but also enhances the visual appeal of your profile. Stay tuned for the last part, where we'll cover showcasing GitHub Stats and other insightful metrics. 

As always, feel free to ask any questions or share your GitHub profiles in the comments below. Let's connect and grow together🌱

Happy coding!💻


#### Reference
[Platane's Repository](https://github.com/Platane/snk)


##### Other Parts
[Part 1](https://dev.to/ryoichihomma/how-to-customize-github-profile-like-a-pro-16aa) | [Part 2](https://dev.to/ryoichihomma/how-to-customize-your-github-profile-part-2-32g2) | [Part 3](https://dev.to/ryoichihomma/how-to-customize-your-github-profile-part-3-37em) | [Part 5](https://dev.to/ryoichihomma/how-to-customize-github-profile-part-5-23po)