With the new year coming I’ve decided to tidy up and give some structure to my various profiles and projects and started editing and polishing them. Some time ago GitHub made changes to their home page and I saw a suggestion to edit my profile’s Readme file. Back then I just filled in the provided template with the information about me, then I thought it’s time to make it a little bit more pretty.
However, I didn’t want to spend too much time on it, so I recalled that there should be a bookmarked story somewhere in my reading list (this one in particular). I read through it and simply followed the suggested steps, slightly changing the design to my needs. It ended up being this. Not the most creative one, but my main goal is to organize everything first, so I can then periodically check my profiles/projects and adjust or change them one by one (I guess I could call it: “organize first, personalize later”).
I was making it from top to bottom, section by section.
For the header I didn’t want to rely on third-party libraries or to have an animation, so I went to Figma and made a simple blue box with my name/nickname on it.
Next I’ve added the title and icons with links to my social channels. I’ve used Iconfinder to get the images, uploaded them to the same repo (I prefer having main assets within the project and not as external links) and wrapped them in <a> tags.
Then I wrapped the About Me section in ```yaml ``` to make it look like a code block (I understand that this one is basically a copy of what was used by the author of the story I mentioned above, but it looks quite nice to my mind and so far I’ve decided to stick with it; maybe I’ll change it to something else later on). I wrote a few main blocks there and added information about me for each one.
For the section with my Tech Stack I’ve used Devicon. I’ve simply pasted the links to the necessary icons and set the width and height for each to 50.
While doing this, I’ve realized that if the icon is black and white only, it may not be visible well enough in dark or white mode, but in my case it concerns only the Next.js one, and, as it’s not my main technology currently, I think I’ll leave it as it is for the moment. Something to keep in mind for the future though.
After that, I’ve inserted my GitHub stats using GitHub Readme Stats. You can see the detailed instructions over there. In short, these are two images with your stats that can be customized (one with the overall statistics and another one with the most used languages; both can be used separately).
I wrapped them in <a> tags to make links to the profile’s repositories and my separate profile page (just felt that making a link to the same profile overview you are currently on would be an overkill).
I’ve seen that many people like to add the snake-game at the bottom of their profiles or some animations/gifs (check the story linked at the beginning if you want it as well), but I’m personally not a huge fan of moving and flashing things on the starting pages (obviously it’s just me and I don’t have anything against it). So, instead, I’ve simply made a few bullet points for the Misc. section and mentioned some of the facts about me.
Bonus section
While technically it’s not related to the profile Readme file, there is also your picture, short description, links and pinned repos. I think the last one is of particular importance, as you may have many repositories but want to display only the most valuable ones. I’m still in the process of organizing my projects, so this one has to be done next, but I wanted to mention it nevertheless.
That was one more of my Friday’s stories. I hope it could help somebody as well and thank you for reading.
