DEV Community

Cover image for Customize Your GitHub Profile with a Custom Pac-Man Contribution Graph
abozanona
abozanona

Posted on

Customize Your GitHub Profile with a Custom Pac-Man Contribution Graph

In the ever-evolving world of software development, a standout GitHub profile can set you apart. While numerous tools assist in creating custom GitHub profiles, a new project brings a playful twist to your contribution graph: the Pac-Man Contribution Graph.

Introducing the Pac-Man Contribution Graph

Pac-Man Contribution Graph transforms your GitHub or GitLab contribution graph into an interactive Pac-Man game. Instead of merely displaying your coding activity, you can now watch Pac-Man navigate through your contributions, adding a unique and entertaining element to your profile.

How It Works

The Pac-Man Contribution Graph fetches your commit history from GitHub or GitLab and visualizes it as a playable game. Here's how you can set it up:

  1. Choose Your Platform: Select either GitHub or GitLab as your source platform.
  2. Enter Your Username: Input your GitHub or GitLab username to fetch your contribution data.
  3. Configure Settings: Customize options such as output format (Canvas or SVG), theme (e.g., GitHub Dark, GitLab Dark), game speed, and sound preferences.
  4. Generate the Game: Click to generate your personalized Pac-Man game based on your contribution graph.

For a hands-on experience, visit the Pac-Man Contribution Graph and try it out.

Integrate Pac-Man Contribution Graph into Your GitHub Profile Using GitHub Actions

Integrating the Pac-Man Contribution Graph into your GitHub profile using GitHub Actions is a seamless way to keep your profile dynamic and engaging. Here's how you can set it up:

Step 1: Create a New Repository

Begin by creating a new repository named exactly after your GitHub username. This special repository powers your GitHub profile page.

Step 2: Set Up GitHub Actions

Within this repository, set up a GitHub Actions workflow to automatically generate and update the Pac-Man game:

  1. Create Workflow Directory: Navigate to your repository and create a .github/workflows/ directory.
  2. Add Workflow File: Inside this directory, create a file named main.yml with the following content:
name: Generate Pac-Man Game

on:
  schedule: # Run automatically every 24 hours
    - cron: "0 */24 * * *"
  workflow_dispatch: # Allows manual triggering
  push: # Runs on every push to the main branch
    branches:
      - main

jobs:
  generate:
    permissions:
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5

    steps:
      - name: Generate pacman-contribution-graph.svg
        uses: abozanona/pacman-contribution-graph/github-action@main
        with:
          github_user_name: ${{ github.repository_owner }}

      # Push the generated SVG to the output branch
      - name: Push pacman-contribution-graph.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v2.1.3
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

This workflow generates a Pac-Man contribution graph and updates it daily.

Step 3: Add the Pac-Man Graph to Your Profile README

To display the generated graph on your profile:

  1. Edit README: In your repository, create or edit the README.md file.
  2. Embed the Graph: Add the following content, replacing [USERNAME] with your GitHub username:
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/pacman-contribution-graph-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/pacman-contribution-graph.svg">
  <img alt="Pac-Man contribution graph" src="https://raw.githubusercontent.com/[USERNAME]/[USERNAME]/output/pacman-contribution-graph.svg">
</picture>

_Generated with [abozanona/pacman-contribution-graph](https://abozanona.github.io/pacman-contribution-graph/)_
Enter fullscreen mode Exit fullscreen mode

Step 4: Push Your Changes and Enjoy!

Commit and push your changes to GitHub. Within minutes, your profile will showcase a Pac-Man game playing across your contribution graph, adding a unique and interactive element to your custom GitHub profile.

By integrating this feature, you not only enhance your GitHub profile design but also demonstrate proficiency with GitHub Actions and profile customization. This approach offers a creative alternative to traditional GitHub profile generators, allowing for a more personalized and engaging user experience.

For detailed instructions and additional customization options, refer to abozanona's guide.

Creating a Custom GitHub Profile

A well-designed GitHub profile can make a strong impression on potential collaborators, employers, and followers. The Pac-Man Contribution Graph is an exciting way to enhance your profile, but you can also explore other custom GitHub profile ideas. Some developers add personalized badges, dynamic stats, and interactive elements to their profiles. A custom GitHub profile shows not only your projects but also your creativity and engagement with the developer community.

Your GitHub profile design can include a creative README file that provides an overview of your skills, interests, and contributions. Many developers use a GitHub profile generator to automate this process, but if you're looking for something more unique, an interactive tool like the Pac-Man Contribution Graph can add a fun, personalized touch to your profile.

If you're wondering how to enhance your profile further, consider using a GitHub profile README generator to structure your content and highlight your most important projects. A well-crafted README gives visitors a quick snapshot of your expertise. Pairing a great README with an interactive Pac-Man game makes your profile unforgettable.

Conclusion

Elevating your GitHub profile goes beyond listing repositories; it's about creating an engaging and personalized space that reflects your journey as a developer. The Pac-Man Contribution Graph offers a delightful way to animate your contributions, making your profile both informative and entertaining.

Whether you're using a readme generator for GitHub or manually crafting your profile, adding interactive elements like this game ensures your presence stands out. Explore this tool and start designing a custom GitHub profile that captures attention and showcases your creativity.

For more insights and updates on this project, visit abozanona's blog.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay