GITHUB page aesthetics and fun! Snake, Stats, Icons and Videos

It's almost been a year of learning for me! Time to get it together with my GitHub profile page. Well, I've made some progress.

A few months ago, I poked at the idea of modifying my GitHub page. As an artist, of course I want it to be visually appealing. I discovered things like displaying GitHub stats in a nicely formatted way, a cool snake animation, and some other little trinkets for organization and visual interest.

I sort of, got lost at first and didn't do much with it, and let it sit. But it was bothering me and I finally found some time to play with it once again. But this time I was seeing it a second time, and a few more months of coding under my belt.

There is a ton of resources online that will lay out explicitly how to execute this stuff, but here is my personal slice of the pie.

Let's start with basics!

On GitHub, I learned there is a special repo name that you can use to edit your profile readme. That is, if you create a repo name with the same name as your GitHub name, a special repo is created. How nice that they have that.

Get started with that: Set up docs

Now that you have that repo set up, you have a place to do the fun stuff.

Icons

You can make a data table and import the icon images and they will display neatly in a row. Here is the resource I used to find my icons:

Icons

There is a ton! I'm sure you will find most things in there.


Here's something to get you started on your icon selecting:

<table>
  <tr>
  <td>
  <img src="https://github.com/devicons/devicon/blob/master/icons/vscode/vscode-original.svg" title="React" alt="React" width="40" height="40"/>&nbsp;
  <img src="https://github.com/devicons/devicon/blob/master/icons/react/react-original-wordmark.svg" title="React" alt="React" width="40" height="40"/>&nbsp;
  </td>
  </tr>
</table>

Use that code or something similar to make a nice little row of icons framed in a box. I would recommend pasting it towards the top of your README file, so people can see your span of knowledge quickly. I tried messing with the background color on the table to be fancy but didn't get very far, if you have tips for that on the GitHub readme, I'm all ears.

Snake Animation

I REALLY wanted that snake animation. It took me literally hours to get it took work. For my snake, I created a "workflow" in GitHub. It's also important to note that for your snake to display, you must have your svg file in an output branch, or it will not work. I struggled to discover this through trials and tribulations. Hopefully, I can save you some time. Be sure to run your workflow as well to get the snake moving on the page.

Make sure you fork the original repo and make your own output branch so you have your own snake. I made the mistake of trying to push my originally modified snake to main, and I was saddened to discover a bot took it down. Learning has happened. LOL!! But, it was a million times easier to do the snake a second time, now that I know what I am doing.

Once you get it working, It's very simple to modify your snake. Search for the :root section in the svg file. You will see some variables with hex color values. You can modify all of those. You can also modify the border thickness.

Here is a good resource for the snake animation: Get Snake

Last but not least get the snake animation in your readme with the following bit, replacing github_user_name with your GitHub username:(yes, twice! because it's your special readme file!)

![snake animation](https://github.com/github_user_name/github_user_name/blob/output/github-contribution-grid-snake2.svg)

Added bonus: If you make your own snake branch, make changes to your file and merge it to your own branch, you will gain a YOLO merge badge on GitHub. Yes, I know. Hilarious. Flying by the seat of my rear over here.

Video Display Management Option, kind of hacky

Simply drag and drop the file from your computer to your readme editor. It's actually that easy. (Only for readmes. If your actual project requires files, this is not where they go. Don't want to confuse anyone.)

I did not like the default behavior of the videos, so I screen captured two of my animations next to each other. This created a nice wide, but narrow view which is less obtuse than just uploading a single video. In my opinion it just works better visually and spatially.

If you have a nice resource for displaying videos on a readme in a nice grid-like format and are able to control size (like, 4x4 for gifs and small clips) do comment below. I'm curious about that.

GitHub Stats Boxes

This is the generator I used: https://gprm.itsvg.in/


This one was super fast, simple, and quick.
Please do not limit yourself and do some exploring! There is so much stuff to choose from. If you want to be exact, I know you can go into the finer details and add gradients to backgrounds and borders to boxes with in-line styling on stats boxes.

I edited some of my stack labels as such:

I'm sure I'll be changing it up in the future, but as a beginner I know how easy it is to get lost with something like this, and hope you can find some direction here!

Presentation is alluring. I hope you can find some fancy stuff to suit your needs. Please let me hear about your favorite resources as well, and good luck!

HAPPY EDITING!