Unless you have been living under a rock for the past few months, you are probably aware that Github has a cool new feature where you can create a custom markdown README intro for your Github profile page.
I finally got around to creating my initial implementation and wanted to share some quick tips and resources I came across while doing it.
Getting Started? 🚧
For getting started or finding new ideas and inspiration, you can't go wrong with an awesome-* repository!
Repository: awesome-github-profile-readme
I highly recommend going through various examples and gathering inspiration from multiple sources.
To see the markdown implementation of a profile click into the README.md file and click the "Raw" version shown in the image below:
Once you have an idea of the direction you want to go you can get started!
Emojis 🤔
You will quickly notice that emojis are all over the place in almost all the examples you will find.
Most emojis are supported in markdown and you can find a full reference list:
P.S. You can also use these same emojis in your Dev.to posts since it is also using markdown.😉
Displaying Your Dev.to Blog Posts 📕
Luckily there is already a great blog post that goes over this:
Show your latest dev.to posts automatically on your GitHub profile readme
Video Resources 📽️
Next Level GitHub Profile README
UPDATE: Next Level GitHub Profile README
These videos go over various features that can be added to your README including displaying blog posts, YouTube videos, Github stats, icons, badges, currently playing Spotify songs, and more!
Bonus ➕
You might notice that a lot of examples will have no space in between the emoji and the text:
To manually inject spaces in between the two you can add spaces:
- :computer: I'm a full-stack software developer.
- :briefcase: Currently working on...
Top comments (15)
Nice tips!!! Here's mine, that I've improved with tips as great as yours from DEV:
github.com/pablohs1986
Awesome! Very in-depth and visual like Wali's (the other person who commented on this post). I definitely have some catching up to do improving mine as I go.
Quick Note: I see you tried to use the
nbsp;spacing in your README but doesn't show spaces. I believe this is because in mine I combine bothnbsp;and actual spaces to give the spacing result." nbsp; "Give that a try and let me know how it works!
Heyyy, thanks for the advice, but I don’t understand... with one nbsp I show one space, that is what I want like you can see in this screenshot:
Where is the error???
hmm I see. Maybe we are seeing slightly different results from different screens.
I am viewing from Chrome on a laptop.
I don't know what's happening, man 🤔 I've checked it on a mobile phone, a tablet and a laptop with Chrome, Safari and Firefox (24" and 15") and I always see the spaces...
Here's an example to see the difference between putting an nbsp and not putting it:
Awesome guide... i built mine a couple weeks ago.. check it out:
github.com/SABERGLOW
Looks clean! Any website to create that banner gif?
hmm i don't think so, but here's what you can do:
1) Check my Pen on CodePen (and edit the name as you see fit)
2) Screen-record it, and make a gif.
Link to the pen: codepen.io/saberglow/details/xxVwodW
works best in "full page view"
Looks great! Especially the animated images, did you create those yourself?
only the title banner... the second one was taken from giphy and resized a bit
Ooh, that spaces trick, thank you. 👍
Was definitely a small pet peeve seeing that over and over again and was the initial reason why I created this post in the first place.
Hopefully, people scroll down to the end and see it 😄
Loved it. Have a look at mine :
github.com/deveshlashkari
Looks great! 2020 goals are very relatable I'm right there with you.
If you'd want some feedback, you can save a lot of vertical space on your Profile by just having 2 sections for your tech stack (some of the sections only have 1 icon in them)
Tech Stack:
Icon, Icon, Icon... etc
Currently Learning:
Icon, Icon, Icons... etc
Just my opinion but let me know what you think!
Thanks for the feedback. I will surely work on them :)