[GitHub] 綺麗なREAD.MEを作りましょう!
はじめに
就活に向けて、ずっと後回しにしてしまった、Readme.MDを綺麗にまとめることにしました。
人の印象は、最初の3~6秒に決まるらしいですが、Gitgubのプロフィールの綺麗にまとめれば、良い印象を与えることができると思います!
ESや職務経歴書にかけないものやポートフォリオのリンクなどを添付することも良い方法でしょう!
1. Secret Repository
https://zzsza.github.io/development/2020/07/10/make-github-profile-readme/
まず、create new repository
から自分のGithub名と同じrepositoryを作成すれば、
以下のようにSecret repositoryが作成され、readme.mdを作成することができます。
2. header
最初のReadme.mdが作成されました!
恐らく、Readme.mdを見れば、編集することができます。
言語は、マークダウンよりはhtmlで作成することをオススメします!
<div align="center">
書きたいテキスト、イメージなどを入れます。
</div>
headerの場合、2つの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§ion=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
はロゴの色を設定してくれるサイトです。
<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日が連続記録です!
Discussion