【概要】
こんにちは〜
現在、プログラミングスクールRUNTEQで未経験からWebエンジニア転職を目指して学習中のなおやです。
今回は、GitHubのプロフィール欄を充実させて、自分の実力をつよつよに見えるようにしていきましょう〜！
※今回はつよつよに見えるプロフィールを作ることが目的です。
(実際の実力を担保するものではないのであしからず。。。。。)
【対象者】
・GitのCloneや基本的操作などが行える状態の人
・就活で見せるようにGitHub欄をつよつよにしたい方
・GitHubをつよつよに見せて、「なんかできそう！」と思われたい方
【趣旨】
自身のGitHubのプロフィールを作成することで、
完成イメージは下記です。
【実装方法】
実装方針としては、とてもシンプルです。
①.ReadMeを作成する。
②.ReadMeの作成を行い、反映されているか確認する。
以上、2点を行うことで簡単に実装することができます。
①.ReadMeを作成する。
ユーザー名と、同じ名前のレポジトリ名を作成して、ReadMeを作成します。
special repositoryのような表記がでれば問題ないです。(ぼくのは既に作成済みのため、下記のような表示になっております。)
②.ReadMeを編集する。
では本題の編集をしていきます。今回僕が使用しているものを抜粋しました。コードと、実装イメージを確認してご使用ください。
使用方法としては、「xxxxxxxxxx」を「自分のレポジトリ名」に変更するとご使用いただけます。
edit READMEで修正するか、自身のレポジトリをcloneしてコードを仕込んでください。
グラフ化
トロフィー
[](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=tokyonight)
言語バッジ
[](https://www.ruby-lang.org/)
[](https://rubyonrails.org/)
[](https://www.docker.com/)
[](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML)
[](https://developer.mozilla.org/en-US/docs/Web/CSS)
[](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
使用言語
<img alt="Top Langs" height="150px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=xxxxxxxxxx&layout=compact&count_private=true&show_icons=true&theme=tokyonight" />
GitHub Statusの表示
<img alt="github stats" height="150px" src="https://github-readme-stats.vercel.app/api?username=xxxxxxxxxx&count_private=true&show_icons=true&show_icons=true&theme=tokyonight" />
GitHubのFollowボタン
[](https://github.com/xxxxxxxxxx)
Qiitaのアカウント表示
[](https://qiita.com/xxxxxxxxxx)
折れ線グラフ
[](https://github.com/xxxxxxxxxx/github-chart)
【追記】
SVGファイルについての記載を忘れておりましたので、記載しておきます。
1.imgフォルダに「header.svg」作成し下記を記載。
⇨「
Welcome TO MyGitHub
」の内容を好きな文言に修正してください。header.svg
<svg class="My_Page" fill="none" viewBox="0 0 900 75" width="900" height="75" xmlns="http://www.w3.org/2000/svg" style="border-radius: 5px;">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<style>
@-webkit-keyframes typing {
from { width: 0; }
}
@-webkit-keyframes blink-caret {
50% { border-color: transparent; }
}
.container {
width: 100%;
height: 100%;
background: #000000;
border-radius: 5px;
}
h1 {
font: bold 300% Consolas, Monaco, monospace;
border-right: .2em solid white;
width: 35em;
margin: 0.05em 1.15em;
padding-top: 4px;
white-space: nowrap;
overflow: hidden;
-webkit-animation: typing 2s steps(30, end), blink-caret .5s step-end infinite alternate;
color: #26e10b;
text-shadow: #26e10b 0px 0 5px;
}
</style>
<div class="container">
<h1>Welcome TO MyGitHub</h1>
</div>
</div>
</foreignObject>
</svg>
<img alt="SNQ-2001" src="img/header.svg" width="98.2%" height="100%">
【引用】