I ran a discussion on dev that collected quite a list of examples in the comment section. So many great calls to action, animations, memes, and weird tricks.
My current profile
Upload all of your icons to the repo in a directory such as
assets, then link them with a
height attribute like below. I used html for mine, not sure if you can set the
height in markdown.
<a href="https://dev.to/waylonwalker"><img height="30" src="https://raw.githubusercontent.com/WaylonWalker/WaylonWalker/main/icon/dev.png"></a>
note I did add a bit of
(non-breaking-whitespace) between my icons. Without adding css this seemed like the simplest way to do it.
Aligning things in the center of the readme is super simple. I used this trick to align my social icons in the middle.
<p align='center'> ...html </p>
For my latest post I floated it to the right with a little bit of
<p> <a href="https://images.waylonwalker.com/latest"><img width="400" align='right' src="https://waylonwalker.com/latest.png?raw=true"></a> </p>
You may need to play with where you put this in the document, and the size of elements to get things to flow right.
In order to keep my latest post always up to date on my readme I implemented a netlify redirect to always point to my latest post. As a digital gardener this helps me keep pointed to a the best one in my opinion. Any automated way would pick up half finished posts.
# /static/_redirects # netlify redirects # latest post /latest /blog/kedro-catalog-search/ /latest.png /kedro-catalog-search.png
Now I can reference both the post and the post cover image.
I also wanted to list out a few of my favorite posts without taking up a ton of space, so I used
summary tags so that it would collapse.
<details> <summary><strong>other favorite posts</strong></summary> <a href="https://images.waylonwalker.com/eight-years-cat/"><img width="400" src="https://waylonwalker.com/eight-years-cat.png?raw=true"></a> <a href="https://images.waylonwalker.com/keyboard-driven-vscode/"><img width="400" src="https://waylonwalker.com/alt%20b.png?raw=true"></a> <a href="https://images.waylonwalker.com/what-are-github-actions/"><img width="400" src="https://waylonwalker.com/what-are-github-actions.png?raw=true"></a> </details>
Go ham on your profile, its your own slice of GitHub to completely personalize and speak your brand. Give a powerfule call to action, share a funny meme, record a wicked cool GIF, its your space.