How to Design an Attractive GitHub Profile Readme…

After shuffling via loads of concepts about what ought to be my subsequent weblog submit, I made a decision to go along with a reasonably easy one this time: How one can create a visually interesting GitHub Profile Readme. You all knew this was coming proper? A few of you is likely to be pondering “Ugh, nice, yet one more weblog on methods to make a formidable GitHub profile 😑”. Effectively…sure. However simply because one thing already exists doesn’t imply that you just can’t create your distinctive model of it. Most individuals do make their profile readme’s fascinating however what’s the distinction between profiles that look good and those which might be aesthetically pleasing?

So right here we’re, I’m going to indicate you guys methods to design a stellar GitHub Profile Readme and I’m going to make use of my profile for example. I’ll point out all of the assets that I used for my profile and how one can customise it based on your model.

However earlier than we get into the design and styling of the profile, lots of it’s possible you’ll ask “What’s the rationale for doing this?” and “Is it obligatory?”. To that, I’d say it’s not essential to model your profile and make it distinctive. There is no such thing as a main draw back to not making a readme profile however there are positively loads of upsides to it.

Everybody used GitHub as a dumping floor for his or her tasks, simply utilizing it merely for what it was designed which is supply management, and collaborating with others on a venture or contributing in direction of open supply. However in 2020, when GitHub launched this new characteristic of making our very personal distinctive readme profile, it offered a approach for builders and artists alike to showcase their work professionally within the type of a “private resume” on GitHub. That’s all it’s, a particular repo that acts as a visually spectacular portfolio for different builders and employers to take a look at. So learn on for some unbelievable tips about styling your GitHub Profile!




1. The Very First Steps 🐤

To begin designing your GitHub profile, we first must create a brand new public repository. Click on the “+” icon on the prime proper and select “New Repository”. After that comes the essential step, ensure that the title of the repo is similar as your username. Discuss with the instance beneath:

GitHub will let that you’ve got discovered a particular repo whose README.md file might be personalized. We need to maintain this repo “public” in order that it may be displayed in your GitHub profile. You possibly can present a short description of the repository (e.g. “My GitHub Profile”) although this step is optionally available. After that, tick the checkbox “Add a README file” and click on on “Create repository”. Going forward, we’ll alter this README file and personalize it.

GitHub Repo Settings




2. A Distinctive Header ❄️

Your profile’s header is the very first thing that folks will observe so it should stand out from the opposite profiles. We would like that preliminary “hook” that draws the viewer. And for that to occur, my suggestion could be to keep away from following the frequent design norms. For instance, many builders use this format for his or her “About” part:

### Hello there 👋
* 👂 My title is ...
* 👩 Pronouns: ...
* 🔭 I’m at the moment engaged on ...
* 🌱 I’m at the moment studying ...
* 🤝 I’m trying to collaborate on ...
* 🤔 I’m on the lookout for assist with ...
* 💬 Ask me about ...
* 📫 How one can attain me: ...
* ❤️ I really like ...
* ⚡ Enjoyable reality: ... 
Enter fullscreen mode

Exit fullscreen mode

It’s utterly high quality to make use of this template although so long as you modify different elements of your profile. I went in one other path for creating the header after which added the “About Me” part after that. I’ll information you alongside the best way with the assets I used for that.

GitHub Header

  • The very very first thing that you would be able to see is that animated header with the textual content “Hey Everybody!” I used the capsule-render GitHub repo for this one. I got here throughout this nice useful resource whereas I used to be trying to find methods to brighten your GitHub repo. You possibly can add background photographs and textual content on prime of them and in addition, who doesn’t love animations! It’s tremendous easy to make use of and has been nicely documented on the Repo. Right here is my configuration of the render.
<p align="heart">
  <img src="https://capsule-render.vercel.app/api?textual content=Hey Everybody!🕹️&animation=fadeIn&sort=waving&colour=gradient&peak=100"/>
</p>
Enter fullscreen mode

Exit fullscreen mode

  • After inserting a easy heading, to supply hyperlinks to my numerous accounts like LinkedIn, Medium, style-tricks.com, and in addition my portfolio web site, I needed a minimalistic and textless technique to do it. So, I made a decision to make use of icons. There are lots of on-line instruments out there that present hundreds of free icons to make use of. I used IconFinder and personally cherished it. There are lots of different well-liked choices out there that you should use like Shields.io, markdown-badges, vector-logo-zone, simple-icons, and many others.

The png supply of the icon simply must be imported into the <img> tag as proven beneath:

<a href="https://www.instagram.com/thepiyushmalhotra/">
  <img peak="50" src="https://user-images.githubusercontent.com/46517096/166974368-9798f39f-1f46-499c-b14e-81f0a3f83a06.png"/>
</a>
Enter fullscreen mode

Exit fullscreen mode

  • Now comes the enjoyable half, including that superb GIF! GIFS make our profile extra dynamic and attention-grabbing. Truthfully, you’ll be able to put up any GIF you need. It may be a preferred meme, a programming gif, an iconic scene from a film or a television present, or one thing that tells individuals a bit bit about your hobbies. In my case, it’s anime in order that’s what I went with. Well-liked gif sharing web sites like Giphy and Tenor can be utilized to tug any gif you want and it really works the identical approach as including the icons, simply copy the picture deal with and paste it contained in the “src” attribute of the <img> tag.



3. The “About Me” Part 👨‍💻

That is the part that I used to be speaking about earlier the place most builders use the template proven above. If you wish to make your profile stand out, then I’d counsel altering the design elements of this part as nicely. I went forward and used YAML format whereas modifying the readme in order that the knowledge reads like code whenever you preview the profile.

GitHub About

It provides a contact of professionalism and in addition as a bonus, seems to be neat! To show this format, simply wrap your textual content as proven beneath and also you’ll be good to go:

YAML About section




4. Instruments and Tech Stuff 🧰

On this part, you’ll be able to showcase your abilities and checklist the instruments and applied sciences that you just’re accustomed to. I all the time favor minimal and crisp design decisions over cluttered knowledge so I went forward with icons this time as nicely. Us people favor info via visible mediums way more than anything, proper?

You need to use the entire stuff that I discussed above in step 2 like IconFinder, Shields.io, markdown-badges, vector-logo-zone, simple-icons, and many others. However for this part, I’d personally advocate DevIcon. Not like different assets, DevIcon is constructed for offering the icons solely associated to programming languages and improvement instruments which makes it an ideal match.

GitHub Skills

Simply copy the SVG picture supply from DevIcon’s web site and paste it inside a <p> tag to indicate a number of icons!

<h2> 🚀 &nbsp;Some Instruments I Have Used and Realized</h2>
<p align="left">
<img src="https://cdn.jsdelivr.web/gh/devicons/devicon/icons/vscode/vscode-original.svg" alt="vscode" width="45" peak="45"/>
<img src="https://cdn.jsdelivr.web/gh/devicons/devicon/icons/bash/bash-original.svg" alt="bash" width="45" peak="45"/>
<img src="https://cdn.jsdelivr.web/gh/devicons/devicon/icons/php/php-original.svg" alt="php" width="45" peak="45"/>
</p>
Enter fullscreen mode

Exit fullscreen mode




5. Your GitHub Historical past 📈

Lastly, on the finish of your Profile README, you’ll be able to virtually embody something. Some builders put up what’s at the moment enjoying on their Spotify profile, some add their GitHub stats or some add a enjoyable little snake recreation in your GitHub contribution graph like me which I’ll present you guys methods to put up!

GitHub Snake GIF

I start with two GitHub ReadMe Stat Playing cards. One exhibits my whole variety of stars, commits and pull requests, and many others. And the opposite one shows my most used Programming languages in percentages. You guys can get these playing cards from the favored GitHub ReadMe Stats Repo and the most effective half about these is that they’re absolutely customizable with completely different settings and themes!

Subsequent up might be my favourite factor out of all of my profile parts. Making a Snake Sport out of your GitHub Contribution Graph. It’s pretty straightforward to arrange and appears extraordinarily satisfying when the snake gobbles up your commit graph.

To set it up on your profile, we’re going to use one thing known as GitHub Actions. GitHub Actions are CI/CD instruments in GitHub the place you’ll be able to provoke workflows that mechanically run, deploy and construct your stuff.

![Snake animation](https://github.com/thepiyushmalhotra/thepiyushmalhotra/blob/output/github-contribution-grid-snake.svg)
Enter fullscreen mode

Exit fullscreen mode

  • Step one is to repeat this line above and add it to your profile’s README. Be certain that to vary the username to yours as an alternative of mine.

  • Now we have to create a GitHub workflow in order that the contribution graph within the snake animation will get up to date based on the cronjob that we are going to arrange.

  • Go to your “Actions” tab in your README repository and create a New Workflow. This can generate a brand new folder in your repository known as “.github/workflows” and after that, it should make a brand new file within it known as “most important.yml”.

gh_workflow

main.yml file

  • Delete all the pieces within the newly created most important.yml file and add this code to it beneath:
title: Generate Datas
on:
  schedule: # execute each 12 hours
    - cron: "* */12 * * *"
  workflow_dispatch:
jobs:
  construct:
    title: Jobs to replace datas
    runs-on: ubuntu-latest
    steps:
      # Snake Animation
      - makes use of: Platane/snk@grasp
        id: snake-gif
with:
          github_user_name: thepiyushmalhotra
          svg_out_path: dist/github-contribution-grid-snake.svg
      - makes use of: crazy-max/ghaction-github-pages@v2.1.3
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets and techniques.GITHUB_TOKEN }}
Enter fullscreen mode

Exit fullscreen mode

  • Be certain that to exchange my username with yours. We use a cronjob right here that updates each 12 hours so each time you have got a brand new commit, it may get added to your snake animation.

  • The ultimate step is to return to your “Actions” web page of your README file, click on the newly created workflow “Generate Datas” or any title that you just give it, and click on the “Run Workflow” button.

gh_run_workflow

Et voila! Your Snake GitHub Contribution Graph is lively now. Take pleasure in watching that snake eat up your exhausting work! To wrap all of it up, I simply added one other capsule render animation on the footer which seemed good to me as you’ll be able to see within the GIF above.




I’ve additionally talked about some additional collated checklist of assets on your particular person design wants:

  1. Awesome-GitHub-Profile-Readme — An inventory of fantastic Readmes from many gifted builders!
  2. GitHub Readme Generator — A simple technique to rapidly generate a primary design template on your profile.
  3. Learn up extra on GitHub Actions should you’re all in favour of automation.
  4. Generate numerous GitHub metrics that may be embedded wherever.
  5. In order for you a fast and easy technique to create cronjobs and be taught extra about them, then Crontab Guru is a fairly good useful resource and also you get to know the precise time that your workflow will run.

And that was it for my GitHub Profile Design. Hope you guys preferred this weblog submit on methods to design a sexy GitHub Profile Readme that’s aesthetically pleasing in addition to practical. Let me know if I could make some additions or modifications to this text or if I missed another enjoyable stuff on GitHub. I do plan so as to add a weblog submit workflow as nicely which may present your newest weblog posts from style-tricks.com however I’ll depart that for one more quick article.



Thanks for studying! Should you preferred my writing, listed here are a few of my different informative articles:

  1. Most Vital Issues to Be taught Aside from Coding…
  2. Laborious to swallow tablets each new Developer ought to take.
  3. The Evaluation Paralysis of Studying to Code…
  4. The Newbie-friendly technique to be taught from FreeCodeCamp on YouTube.

Let’s have a Chat! Join with me on GitHub, Twitter, and LinkedIn. Ciao!



Add a Comment

Your email address will not be published. Required fields are marked *