How I Built My Github Profile

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

social icons

Upload all of your icons to the repo in a directory such as icons or 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>&nbsp;&nbsp;

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.

Center

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>

right

For my latest post I floated it to the right with a little bit of align='right' action.

        
<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.

redirects

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.

summary/details

I also wanted to list out a few of my favorite posts without taking up a ton of space, so I used details and 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.