GitHubのプロフをつよつよにみせる

### 【概要】
---
こんにちは〜
現在、プログラミングスクールRUNTEQで未経験からWebエンジニア転職を目指して学習中のなおやです。

今回は、GitHubのプロフィール欄を充実させて、自分の実力をつよつよに見えるようにしていきましょう〜！

※今回はつよつよに見えるプロフィールを作ることが目的です。
(実際の実力を担保するものではないのであしからず。。。。。)


### 【対象者】
---
・GitのCloneや基本的操作などが行える状態の人
・就活で見せるようにGitHub欄をつよつよにしたい方
・GitHubをつよつよに見せて、「なんかできそう！」と思われたい方

### 【趣旨】
---
自身のGitHubのプロフィールを作成することで、
完成イメージは下記です。

<a href="https://gyazo.com/fee4360cc355d9eb05139d3dfbf94a46"><img src="https://i.gyazo.com/fee4360cc355d9eb05139d3dfbf94a46.gif" alt="Image from Gyazo" width="513"/></a>

### 【実装方法】
---
実装方針としては、とてもシンプルです。

①.ReadMeを作成する。
②.ReadMeの作成を行い、反映されているか確認する。

以上、2点を行うことで簡単に実装することができます。

### ①.ReadMeを作成する。
---
ユーザー名と、同じ名前の`レポジトリ名`を作成して、ReadMeを作成します。

![スクリーンショット 2023-10-15 9.51.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/d48c696e-8665-bffa-6fee-e1c13d8e36db.png)




special repositoryのような表記がでれば問題ないです。(ぼくのは既に作成済みのため、下記のような表示になっております。)

![スクリーンショット 2023-10-15 9.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/06b35f9b-1b5b-c838-178d-f77b5699749d.png)


### ②.ReadMeを編集する。
---
では本題の編集をしていきます。今回僕が使用しているものを抜粋しました。コードと、実装イメージを確認してご使用ください。
使用方法としては、`「xxxxxxxxxx」`を`「自分のレポジトリ名」`に変更するとご使用いただけます。
`edit README`で修正するか、`自身のレポジトリをclone`してコードを仕込んでください。

![スクリーンショット 2023-10-15 11.24.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538926/0e6ab94e-da6a-619c-d5ea-b7a51ea13c01.png)


### グラフ化
---
```1ReadMe_Sample
![](https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=xxxxxxxxxx&theme=2077)
```
![](https://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=iijima-naoya-45b&theme=2077)

### トロフィー
---
```
[![trophy](https://github-profile-trophy.vercel.app/?username=xxxxxxxxxx&theme=onedark)](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=tokyonight)
```
[![trophy](https://github-profile-trophy.vercel.app/?username=iijima-naoya-45b&theme=onedark)](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=tokyonight)

### 言語バッジ
---
```
[![言語バッジ](https://img.shields.io/badge/-Ruby-CC342D.svg?logo=ruby&style=flat-square&logoColor=white)](https://www.ruby-lang.org/)
[![フレームワークバッジ](https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000.svg?logo=ruby-on-rails&style=flat-square&logoColor=white)](https://rubyonrails.org/)
[![Dockerバッジ](https://img.shields.io/badge/-Docker-2496ED.svg?logo=docker&style=flat-square&logoColor=white)](https://www.docker.com/)
[![HTMLバッジ](https://img.shields.io/badge/-HTML5-E34F26.svg?logo=html5&style=flat-square&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML)
[![CSSバッジ](https://img.shields.io/badge/-CSS3-1572B6.svg?logo=css3&style=flat-square&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)
[![JavaScriptバッジ](https://img.shields.io/badge/-JavaScript-F7DF1E.svg?logo=javascript&style=flat-square&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
```

[![言語バッジ](https://img.shields.io/badge/-Ruby-CC342D.svg?logo=ruby&style=flat-square&logoColor=white)](https://www.ruby-lang.org/)[![フレームワークバッジ](https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000.svg?logo=ruby-on-rails&style=flat-square&logoColor=white)](https://rubyonrails.org/)[![Dockerバッジ](https://img.shields.io/badge/-Docker-2496ED.svg?logo=docker&style=flat-square&logoColor=white)](https://www.docker.com/)[![HTMLバッジ](https://img.shields.io/badge/-HTML5-E34F26.svg?logo=html5&style=flat-square&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML)[![CSSバッジ](https://img.shields.io/badge/-CSS3-1572B6.svg?logo=css3&style=flat-square&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)[![JavaScriptバッジ](https://img.shields.io/badge/-JavaScript-F7DF1E.svg?logo=javascript&style=flat-square&logoColor=black)](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" />
```
<img alt="Top Langs" height="150px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=iijima-naoya-45b&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" />
```

<img alt="github stats" height="150px" src="https://github-readme-stats.vercel.app/api?username=iijima-naoya-45b&count_private=true&show_icons=true&show_icons=true&theme=tokyonight" />


### GitHubのFollowボタン
--- 

```
[![Github](https://img.shields.io/badge/--FFFFFF?style=social&logo=github&label=Follow%20xxxxxxxxxx)](https://github.com/xxxxxxxxxx)
```

[![Github](https://img.shields.io/badge/--FFFFFF?style=social&logo=github&label=Follow%20iijima-naoya-45b)](https://github.com/iijima-naoya-45b)

### Qiitaのアカウント表示
---
```
[![Qiita](https://img.shields.io/badge/--FFFFFF?style=social&logo=data:image/vnd.microsoft.icon;base64,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&label=Follow%20xxxxxxxxxx)](https://qiita.com/xxxxxxxxxx)
```
[![Qiita](https://img.shields.io/badge/--FFFFFF?style=social&logo=data:image/vnd.microsoft.icon;base64,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&label=Follow%20iijima-naoya-45b)](https://qiita.com/iijima-naoya-45b)

### 折れ線グラフ
---
```
[![github-chart](https://github-chart.vercel.app/api?user=xxxxxxxxxx)](https://github.com/xxxxxxxxxx/github-chart)
```

[![github-chart](https://github-chart.vercel.app/api?user=iijima-naoya-45b)](https://github.com/iijima-naoya-45b/github-chart)

【追記】
SVGファイルについての記載を忘れておりましたので、記載しておきます。

1.imgフォルダに「header.svg」作成し下記を記載。
　⇨「<h1>Welcome TO MyGitHub</h1>」の内容を好きな文言に修正してください。

```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>
```

2.
```ReadMeの先頭に下記を追加。
<img alt="SNQ-2001" src="img/header.svg" width="98.2%" height="100%">
```

### 【引用】
---
https://qiita.com/moroi/items/6847e4ea5defc8baded4

https://zenn.dev/yutakatay/articles/kirakira-github-profile

https://qiita.com/twrcd1227/items/cb6534112bbdeb74ae10

https://qiita.com/koinori/items/5bfed284fab04b5fee16

https://qiita.com/SNQ-2001/items/7f372c77968daff105d7