How to write a Kickass GitHub Readme ??
Graphic Created By Shivam Gupta on Figma

How to write a Kickass GitHub Readme ??

No alt text provided for this image

GitHub recently rolled out a brand new feature of creating profile-level "Readme" to showcase your skills.

Yes, it can be called as a Mini-Portfolio (why mini because you can't put much there but if you can utilize the power Markdown, it's going to be worth it) will tell you later in the tutorial, How you can power up the game ??.

The magic starts with creating a repo with the same name as your username. example: My username is "imshivamgupta" So, I'll create the repo as "imshivamgupta". This will work like Easter egg feature in GitHub it will generate a readme file in the repo with sample setup.

Github Readme

Now the power of markdown starts, I will teach a small brief how markdown language syntax works,

For Heading (similar like HTML syntax)

  • # Heading One (Largest in Size)
  • ## Heading Two
  • ### Heading Three

Checkout this link for more Markdown Cheatsheet ??.

Wait, its not over yet, Graphic part is coming. You heard it right you can attach images also ?? in the readme.

Sharing a trick to create a awesome snippet, there's a open-source tool called https://carbon.now.sh/ help you out create things and the best part is you can export it as (PNG/SVG Format).

No alt text provided for this image

Now, you can add social buttons, tech stack labels, GitHub hits, and many more.

No alt text provided for this image

Overwhelming, I am providing you all the GitHub packages for these cool stuff, believe me these are very handy to use. Just give a try.

  1. https://github.com/Ileriayo/markdown-badges (Badges)
  2. https://hits.dwyl.com/ (Profile Hits)
  3. https://github.com/anuraghazra/github-readme-stats (Profile Stats)
No alt text provided for this image

You came long way, and I know now you can do unlimited thing in own way. This is world of infinite possibilities. Thing don't stops here there are ton's of new feature are available as you can create GitHub Action and hit different API's and update your readme file using CRON Jobs and many more thing.

Thanks for reading this article. Share your GitHub Profiles.??

要查看或添加评论,请登录

Shivam Gupta的更多文章

  • Conversion Rate Optimization

    Conversion Rate Optimization

    Introduction: Conversion Rate Optimization (CRO) is the process of improving the percentage of website or app visitors…

  • :is() and :where() - The New Functional Pseudo-class Selectors

    :is() and :where() - The New Functional Pseudo-class Selectors

    Meet the new Pseudo-class Selectors of the CSS family. :is() and :where().

  • How to create a VueJS app with TypeScript

    How to create a VueJS app with TypeScript

    Back with another blog, You have already listened to the hype of TypeScript like why people prefer type-safety nowadays…

  • The CSS Shorthands - Part 1??

    The CSS Shorthands - Part 1??

    TLDR; You can scroll to snippets directly. The best thing about CSS is, it keeps on evolving.

社区洞察

其他会员也浏览了