🤖

[GitHub] 綺麗なREAD.MEを作りましょう！

2024/02/27に公開

はじめに

就活に向けて、ずっと後回しにしてしまった、Readme.MDを綺麗にまとめることにしました。
人の印象は、最初の3~6秒に決まるらしいですが、Gitgubのプロフィールの綺麗にまとめれば、良い印象を与えることができると思います！
ESや職務経歴書にかけないものやポートフォリオのリンクなどを添付することも良い方法でしょう！

https://github.com/HyonHyonKOR

1. Secret Repository

https://zzsza.github.io/development/2020/07/10/make-github-profile-readme/

まず、create new repositoryから自分のGithub名と同じrepositoryを作成すれば、
以下のようにSecret repositoryが作成され、readme.mdを作成することができます。

最初のReadme.mdが作成されました！
恐らく、Readme.mdを見れば、編集することができます。
言語は、マークダウンよりはhtmlで作成することをオススメします！

<div align="center">
   書きたいテキスト、イメージなどを入れます。
</div>

headerの場合、２つのOPEN APIがよく使われます！

2-1 capsule render

自動的にSVGを作成してくれるOpen APIです。カスタマイズや使い方は上段のURLに書いておりますが、
簡単な使い方を説明しますと、、、

<div align="center">
   <img src="https://capsule-render.vercel.app/api? type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />
</div>

このように、imgタグを入れ、カスタマイズすれば、完了です！

2-2 readme-typing-svg

タイプ効果があるSVGを生成してくれるOpen APIです。
私の場合、シンプルな文字のみで良いと考えたので、こちらのAPIを利用しました。
使い方はcapsule renderと同様で、使い方は上段のリンクに書いてあります！

3. badge

簡単な紹介とスキルなどを紹介する際には、Shields.io、simpleicons.orgを活用することができます。shilds.ioはロゴを、simpleiconsはロゴの色を設定してくれるサイトです。
https://simpleicons.org/?q=Ecl

<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=HTML5&logoColor=white"/>

/badge/入れたいテキスト-背景の色?.....logo=入れたいロゴ を意味します。

例えば、**Eclipseのロゴ**が欲しい場合は、まず**Eclipse IDE`**のイメージを参考にしましょう。

まず、/badge/入れたいテキスト-2C2255を入れます。＃は不要です。

そして、logoには、サイトのテキストをそのまま記入します。
この場合、logo=EclipseIdeですね！

<img src="https://img.shields.io/badge/Eclipse-2C2255?style=for-the-badge&logo=EclipseIde&logoColor=white"/>

この場合、Readmeにはこのように作成されます。

4. その他

github-readme-stats

githubの活動記録とアップロードした言語などを表してくれるOPEN APIです。
使い方は同様ですが、マークダウンよりはhtmlで作成することをオススメします。

github-readme-activity-graph

commitの記録などをグラフとして、表してくれるOPEN APIです。
使い方は同様です。

github-readme-streak-stats

githubにcontributeした記録を表してくれるOPEN APIです。今までのcommit数と連続記録などを確認できるOPEN APIです。私の場合、175日が連続記録です！