How to Customize GitHub Profile: Part 4

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 | Part 2 | Part 3 | Part 5

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.

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

Other Parts

Part 1 | Part 2 | Part 3 | Part 5

Comments

[Alberto Fernandez]

wonderful

[Ryoichi Homma]

thank you Alberto!