🥳

GitHubのREADMEの見た目をイケてる感じにする

hanetsuki2022/11/21に公開

どうも、hanetsukiです。
GitHubにはアカウントそれぞれにREADMEを乗せられるリポジトリがついているのはご存知でしょうか?

以前から簡易的なプロフィールは掲載していたのですが、訪問していただいた方に「おっ!」っと思わせるようなREADMEにしたいと思い更新することにしました。

今回更新するにあたって何を使ったのかというのを忘備録的に残していきます。

これが今回完成したREADME

詳しいソースコードは、リポジトリをご覧ください。
https://github.com/tsuki-lab

Skill Icons

https://skillicons.dev/

自分が持っているスキルなどを表示するときに便利。
他にもお気に入りの言語や、今学習の言語という使い方もできそうですね!

詳しい利用方法は、https://github.com/tandpfun/skill-icons#readme をご覧ください

Badge Generator

https://badgen.org/

Zennのフォロワー数の記載に利用しています。
他にも、AtCorderやQiitaのステータス関連を表示することができます。

GUI上でURLを発行できるのでほぼコピペだけで実装できます!

Badgen

https://badgen.net/

Twitterのフォロワー数の記載に利用しています。
ここのサービスは本当に多くのバッジを作成できるよになっています。

スキルアイコンなどもここで統一してみるのもいいかもしれませんね(?)

GitHub Readme Stats

https://github.com/anuraghazra/github-readme-stats

利用している言語とGitHubでの記録をUIとして表示してくれます。
自分の得意な言語や活動などがちゃんと数値でアピールできて良いですね!

画面も華やぎます。

GitHub Profile Trophy

https://github.com/ryo-ma/github-profile-trophy

GitHubの記録をトロフィーとして表示してくれます。
自分でプロフィール画面見返したときランクが上がってると単純にテンションが上がりますね

その他

その他、画面を華やかにする方法で意識したことです。

絵文字を使う。

自分のテーマになりそうな絵文字や見出しに合った絵文字を使うと文字を読むコスト削減にもつながり一石二鳥ですよね。

終わりに

久しぶりに自分のプロフィールページをいじってみました。
Twitterに投稿したら思いのほか評判がよく嬉しかったです!

https://twitter.com/hanetsuki_dev/status/1593752824198107136

他にもおすすめのREADMEに使えそうなウィジェット(?)があれば教えてください!!
今回はこれにて〜

chot Inc. tech blog

ちょっと株式会社のエンジニアブログです。

Discussion

ログインするとコメントできます