GitHubのプロフィールページをオシャレにする
GitHubのプロフィールページを最近カスタマイズしたため、その時に行なったことについて紹介いたします。
GitHubのプロフィール編集について
参考にしたページ
完成したページ
実装した手順
1. バッジ部分を作成
追加した内容については以下になります。
使用した画像のパスについては以下になります
Profileページの閲覧カウンター数
# 「hoge」に自分のGitHubのアカウント名を入力 https://komarev.com/ghpvc/?username=hoge
GitHub, Twitterのアカウントフォロワー数
https://shields.io/category/socialshields.io
GitHub, Tiwtterについてはhttps://shields.ioから取得を行うことができます。
Qiitaのコントリビュート数
# contributionsの場合「hoge」に自分のGitHubのアカウント名を入力 https://qiita-badge.apiapi.app/s/hoge/followers.svg
2. グラフを作成
以下のリポジトリを使用すると、個人のGitHubの活動履歴からグラフなどを作成してくれます
# 「hoge」に自分のGitHubのアカウント名を入力 https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=hoge&theme=dracula
- username: 画像に反映させたいGitHubのアカウント名
- theme: どのテーマで表示するか（自分は
draculaを使用しています）
3. GitHub Stats, Languagesの表示
以下のリポジトリを使用すると、個人のGitHubの活動履歴からランクを作成してくれます
3-1. GitHub Statsの表示
# 「hoge」に自分のGitHubのアカウント名を入力 https://github-readme-stats.vercel.app/api?username=hoge&count_private=true&show_icons=true&theme=dracula
- username: 画像に反映させたいGitHubのアカウント名
- count_private: プライベートリポジトリの内容も反映させるか
- show_icons: 一番左のアイコンを表示するか
- theme: どのテーマで表示するか（自分は
draculaを使用しています）
3-2. Languagesの表示
# 「hoge」に自分のGitHubのアカウント名を入力 https://github-readme-stats.vercel.app/api/top-langs/?username=hoge&layout=compact&theme=dracula
- username: 画像に反映させたいGitHubのアカウント名
- layout: グラフをどのように表示させるか
- theme: どのテーマで表示するか（自分は
draculaを使用しています）
layout: defaultの場合
layout: compactの場合
4. 画面上部のアニメーションの作成
こちらのアニメーションについて以下のように行えば作成を行うことができます。
大雑把にまとめると以下の手順です。
- 1 - particle.jsとtypewriter.jsを使用してページを作成
- 2 - キャプチャを撮ってgifアニメを作成
- 3 - GitHubにアップロードしてリンクを取得し、画像のパスを取得
4-1. particle.jsとtypewriter.jsを使用してページを作成
html,cssについては省略(下にcodepenがあるので、そちらを参考にしてください)
以下のライブラリを使用し、コンテンツの動きを作成
また、今回はTypeScriptを使用したため、tsParticlesを使用。
また、パーティクルについては以下を使用しました
See the Pen tsParticles rainbow confetti by Matteo Bruni (@matteobruni) on CodePen.
4-2. キャプチャを撮ってgifアニメを作成
もしmp4で録画して、gifアニメに変更したい場合、以下のサイトがgifの秒数の調整も行えるためお勧めです。
codepenでのコード
codepenで作成しましたので、こちらをベースにしてgifアニメを撮っていただければ適応できます。 （画面全体を想定しているため、記事内だと少しズレているかもしれません。）
Black版
See the Pen githubprofile - animation by miwa_shuntaro (@miwashutaro0611) on CodePen.
White版
See the Pen githubprofile - animation - white by miwa_shuntaro (@miwashutaro0611) on CodePen.
その他おしゃれなGihubのプロフィールページ一覧
最後にいろいろな人のGitHubプロファイルページを見たい場合、以下が参考になります。
