Creating my GitHub profile Readme.md

farrahdlsdionisio

Farrah Dionisio

Posted on August 8, 2024

Creating my GitHub profile Readme.md

Link of my profile: My GitHub Profile

I am currently looking for a new organization to join. While doing so, I decided to build a stronger online presence as a software engineer. The first thing I'm going to improve is my GitHub profile. I drafted a plan in my notebook that includes six sections: a header, a quick introduction, a list of technologies I've used, GitHub stats, links to my social media accounts, and my resume for potential employers who will visit my profile.

The first section is the header, which I designed to be simple yet eye-catching using Figma.

personal brand created using figma

After that, I researched some fun widgets to add to my profile. I found the profile views badges by Anton Komarev: GitHub Profile Views Counter

To apply it add this to your readme.md (change it to your username)

![](https://komarev.com/ghpvc/?username=yourusername&color=FF7A8A&style=for-the-badge)
Enter fullscreen mode Exit fullscreen mode

or in my case I used it with img tag

 <img align="left" src="https://komarev.com/ghpvc/?username=farrahdlsdionisio&color=FF7A8A&style=for-the-badge" alt="Profile Views" style="max-width: 49%;"/>
Enter fullscreen mode Exit fullscreen mode

It will look as follows:
GitHub Profile Views Counter

I love listening to music while working, as I was searching for a cool GitHub profile I stumbled upon a widget where you can show what's currently playing on your Spotify so I decided to use it as well. I got it from here: Spotify GitHub Profile

To apply it to your readme.md, go to the link that I provided, connect your Spotify and grant permission

Connect spotify with github

You'll be redirected to where you can choose your theme, change the color of the player, etc. Click copy to clipboard and apply it to your readme.md

Spotify GitHub Profile

I applied mine as an img tag because I want a specific format between the profile views and Spotify widget

<section style="width: 100%; display: flex;">
  <img align="left" src="https://komarev.com/ghpvc/?username=farrahdlsdionisio&color=FF7A8A&style=for-the-badge" alt="Profile Views" style="max-width: 49%;"/>
  <img align="right" src="https://spotify-github-profile.kittinanx.com/api/view?uid=*******&cover_image=true&theme=novatorem&show_offline=false&background_color=6f87be&interchange=false&bar_color=ff7a8a&bar_color_cover=false" alt="Spotify Profile" style="max-width: 49%;"/>
<section>
Enter fullscreen mode Exit fullscreen mode

Result is as follows:

Github Profile Section

The next section of my profile is a short introduction about me, I used the default template given by GitHub but you can be more creative with this, anything that will showcase yourself as a developer

Github Profile About Me

After the introduction, I showcased the technologies that I am using, I simply added logos of them:

My tech stack logos

The next section displays my GitHub data. I found this widget from Anurag Hazra that pulls your total stars earned, total commits(current year), total PRs, total issues, and contributed to(last year). You can check it here: Github Stats Go check the documentation as it offers a lot of customization for your needs. For me, I just used the default view and changed the theme.

To apply it to your readme you can do it as follows (change it to your username):

<p align="center"> <img src="https://github-readme-stats.vercel.app/api?username=yourusername&theme=prussian&show_icons=true" alt="yourusername" /></p>
Enter fullscreen mode Exit fullscreen mode

My GitHub Stats

In the next section, I added my social media links where people can follow me, I tried using HTML's a tag because I wanted to use the target attribute with the value of "_blank" to open another tab when you click it but apparently GitHub's limited markdown syntax doesn't allow it so I used markdown's link syntax instead.

Github Profile Social Media

Lastly, as my target audience for my github profile is not just the developer community but potential employers I added my resume. It's a simple link that redirects to my resume uploaded on my Google Drive.

My Resume in github profile

I also added this GIF as the footer that I got from Giphy which I believe to be from a scene in a Studio Ghibli film.

My github footer

As I add more personal projects, contribute to open-source, and learn new technologies, I'll update my GitHub profile accordingly.

I wrote this article to contribute to the developer community and to help software engineers who are looking to start their personal brand and build their online presence. GitHub, as a well-known repository hosting service with a vast open-source community, is an excellent platform to showcase our skills.\

💖 💪 🙅 🚩
farrahdlsdionisio
Farrah Dionisio

Posted on August 8, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related