Git Profileを個性豊かにする

4957 ワード
テキストリンク

概要

最近Git profile画面のデザインをいろいろ試したのでその方法を書いておきます。

https://github.com/copetit

方法

README.mdを作成

まずは自分のgitのアカウントと同じ名前のリポジトリを作成します。
私はすでにあるのでアラートが表示されますが、その下にこのリポジトリは特別だよ！README.mdをあなたのGitHub プロフィールとして使えるよと表示されます。

下のAdd a README fileにチェックをつけてリポジトリを作成する際にファイルも自動で生成されるようにしましょう。

メインの画像を追加


メインの画像は、サイズは1500x400くらいでFigmaを使って作成しました。
ディレクトリはどこでも大丈夫ですが、私はリポジトリにassetsというフォルダを作成し画像を入れてREADME.mdに以下のようにパスを追加します。

[![redpanda's GitHub Banner](./assets/profile.png)]()

スキル・SNSのbadgeを作成

自分のスキルやSNSへのリンクをbadgeで作成することもできます。

以下のようなURLをファイルに追加することでbadgeが表示できます。

![](https://img.shields.io/badge/HTML-1572B6?style=flat&logo=html5&logoColor=white)

もしくはaタグで囲むこともできます。

<a href="#"><img src="https://img.shields.io/badge/HTML-1572B6?style=flat&logo=html5&logoColor=white"/></a>

badgeのURLについて

badgeのURLはこちらのサイトを使いました。他にもさまざまなbadge ジェネレーターサイトがあります。

https://shields.io/

URLの使い方をHTMLタグを例を挙げて簡単に紹介します。よりカスタマイズしたい場合は公式ドキュメントを確認ください。

https://img.shields.io/badge/HTML-1572B6?style=flat&logo=html5&logoColor=white

https://img.shields.io/badge/[badgeに表示される名前]-[badgeのcolorCode]?style=[badgeのスタイル]&logo=[アイコンの名前]&logoColor=[アイコンの色]

badgeのcolorCodeとアイコンの名前はここのサイトを利用しました。
アイコン名はサイトのアイコン名をスペースなしで使えますが、たまにアイコン表示がされない場合があるのでダウンロードリンクのアイコン名を利用すればいいと思います。

https://simpleicons.org/

その他のツール

gitのstatsを表示してくれるジェネレーターです。色も好きにカスタマイズできる素晴らしいツールです。
詳しい使い方はこちらをご参照ください。

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

まとめ

一つずつ追加していくとインテリアする気分になって楽しくなります。
他の人のREADME.mdも参考にして個性豊かなgit profileを作ってみるのはいかがでしょうか。

参考ページ

NVIDIA Isaac Sim: Replicator Composerの使用
TypeScriptを使ってdecoratorの勉強をしてみた