皆さんGitHub 使っていますか？使っている皆さんは、GitHub の自分のProfile ページどんな感じにしてますか？前からカスタマイズできるのは知っていたのですが、今までやったことなかったので、この機会にカスタマイズしてみたので、紹介してみます！

GitHub profile をおしゃれにとは？？

GitHub の公式のページにはなりますが、下記のような感じです。

https://docs.github.com/en/account-and-profile/concepts/about-your-profile

どんな技術を自分は持っているのかや、繋がりを持つためのサイトリンクとかもはれますね。
ここから、新しいオファーを受ける人とかもいるのかもしれないですね。

ということで色んな希望が詰まっているGitHub のプロファイルをリッチにしてみたので、何を使ったのかとどうやってやるのかを紹介したいと思います。

どうやってprofile をリッチにできる？

まずは、やり方を紹介していきます！とても簡単です！
自分のGitHub のアカウントと同じ名称のレポジトリを作成してあげます。

僕のGitHub を例にして紹介します。GitHub のアイコンの横もしくは、自分のアイコンの下にある名前が自分がGitHub で設定した名前です。

レポジトリを作成

僕はもうすでに作成していますので、別の名前を載せていますが、横のOwner の名前と一緒のレポジトリを作成してあげます。

README.md を置く

レポジトリを作成できたら、README.md を置いてあげます。

kentaindeed/README.md と書いているようにREADME.md が参照されているのがわかります。これで準備完了です！！

次に、色々オシャレにしていきます！！

オシャレにしていきます

基本的にはREADME なのでMarkdown なのですが、div であったりも使用できるので、色々マークアップ言語使っていけます！

スキルのアイコンの出し方

こんな感じでアイコンを並べています！

これめっちゃ簡単です！このサイトから取得しています。image builder のセクションもサイトにのっていたので、もうすぐ自分用にも何か作れるのかもです。現時点ではだめそうです。

https://skillicons.dev

これがAWS のアイコンを出す書き方になります。大きさもHTML のように調整できます。

  <img src="https://skillicons.dev/icons?i=aws" height="40" alt="AWS logo"  />
  <img width="12" />

つまり、

src="https://skillicons.dev/icons?i=<出したいアイコン名>"

にしたらアイコンを取得できるみたいです。

こんな感じで複数入れることもできるので、何回も書くのがめんどくさいという方には以下の書き方がいいかもしれませんね。

<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>

connect with me などバッジを作る

これは個々の利用しているもので大丈夫です！
img shields のサイトからbadge を作成することができます。

https://img.shields.io/badge/LinkedIn-blue

他の文字列に置き換えることもできますが、Content-<色>の順番で書くみたいです。X などを使っている場合でも自分で名称はカスタマイズできるので、やってみてください

https://img.shields.io/badge/X-black

大きさなどもかえれるようです。

Language Statistics 作る

最後に、自分のGitHub で自分が一番使用している言語情報を表示してくれるサイトです。

![Most Used Language](https://github-readme-stats.vercel.app/api/top-langs?username=<自分のGithub の名称>&show_icons=true&locale=en&layout=compact)

例を示すと、こんな感じです。Typescript もprivate レポジトリで置いているのですが、それは読み込まれてないみたいなので、public のみのレポジトリで表示されます。

この設定は、username= の後に自分のGithub の名称を入れるだけなので、とても簡単です！

まとめ

GitHub のレポジトリは自分の転職の時や見てもらう時に、何も飾ってないよりはなんとなくいい感じに見えて印象もよさそうです。自分のスキルであったりを一目でわかることができるので、自分ってこんな言語得意だったよね！って改めて実感することもできます。自己満足ですが。ということでこれを基礎に広げてやってみてください！！！