Vue.jsでポートフォリオを書く

## この記事はなに
Vue.jsでポートフォリオをつくったのでそれの記事です。
そこで知っているとちょっと便利だな(自分が調べて使ったもの)とポートフォリオをかっこよくするライブラリなどを軽くまとめてみます。
参考にさせていただいた記事は下にまとめて表記しています。ライブラリのGithub等のリンクもまとめて下に表記しています。

ささっと書いた記事なので間違えがあるかもしれません。間違いを見つけましたらコメントの方までよろしくお願いいたします。

## 作ったサイト
https://shoma-profile.netlify.com
製作期間は4日ほどです。

ソースコードはこちら(汚いです。。。)
https://github.com/shoma3571/-portfolio

## 知っていると便利なこと
### リセットCSSの読み込み
今回はnormalize.cssを読み込みました。

```sh
npm install -D normalize.css
```
インストールしたら```App.vue```ファイルの```<script>```ブロックに```import 'normalize.css'```と書くだけです。
### Google Fontsの読み込み
まずはgooglefontsで好きなフォントを探します。
フォントを選択すると右上のアイコンに赤い丸がつきます。
こんなやつです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537532/bd9c9918-a3f1-d7f6-e433-ba5abd5764fb.png)
これを押して```Embed```を選択して、```@import```を選択して```@import url```をコピーして、```App.vue```の```<style>```ブロックの中に記述します。
その下のものもコピーして、適応させたいところに記述すればOKです。

Safariで表示で少しつまってしまったところがあって、そこは少し別の記事に書いてあります
もしよければこちらもどうぞ
[safariでのfontに注意しようね](https://qiita.com/shoma3571/items/033f5eb9259d82e6b648)

### font awesomeの読み込み
font awesomeもとっても便利です。書いていきます。

```sh
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-brands-svg-icons
```

brand(twitter,github)等のアイコンが必要ない場合は最後のものはインストールしなくても大丈夫です。
インストールが終わったら```main.js```に書いていきます。

```main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { faGlobe,faBlog,faBirthdayCake,faImage } from '@fortawesome/free-solid-svg-icons'
import { faTwitter,faGithub,faHtml5,faCss3Alt,faJsSquare } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faGlobe,faBlog,faBirthdayCake,faImage,faTwitter,faGithub,faHtml5,faCss3Alt,faJsSquare)

Vue.component('font-awesome-icon', FontAwesomeIcon)
```

このようにしてかいていきます。実際に使うときは下のように書きます。

```App.vue
<font-awesome-icon icon="globe" class="nav-icon"/>
```

これで普通のアイコンは使えますが、brandアイコンはこれだと使えません。下のように書きます。

```App.vue
<font-awesome-icon :icon="['fab','github']"/>
```

これでアイコンを使うことができました。brandアイコンの時は注意してみてください。

### Netlifyへのデプロイ
GithubPagesでええやん！って方はそちらでよいと思います。
今回はNetlify使ってみました。思っていた数百倍簡単でした。
https://app.netlify.com/signup
ここからサインアップします。サインアップできたら```New site from Git```を選択し```Github```を選択します。
そこから自分が公開したいリポジトリを選択します。
公開したいリポジトリを選択したら、```Build command```と```Publish directory```の設定をします。
ビルド用のコマンドは```npm run build```,Publish directoryには```dist```を指定します。
基本的にはこれでローカルと同様のものが配信されると思います。

サイト名も簡単に変更可能なのでとてもいいと思います！

## 他のポートフォリオとちょっと差をつけるかっこいいやつ

### vue-typerの導入
タイピングアニメーションを簡単に実装できるライブラリです

```sh
npm install --save vue-typer
```
Font awesomeと同じように```main.js```ファイルに設定します

```main.js
import VueTyperPlugin from 'vue-typer'
Vue.use(VueTyperPlugin)
```

```App.vue
<vue-typer :text="['Hello.\nMy name is Shoma.\n Thank you for visiting this site. \nNow scroll down.\n\n\n↓\n']" 
class="top-text" :repeat='0' :preTypeDelay="1000" :typeDelay="120" :preEraseDelay="5000" :eraseDelay="2000"></vue-typer>
```

``` :text ```で書いたところがタイピングアニメーションとなって表示されます。
タイピング速度なども設定できるので、Githubを確認するといいかと思います。
色の変更で少し詰まったのでそこだけメモをしておきます。```App.vue```の```<style>```ブロック内に書きます。

```css:App.vue
.vue-typer .custom.char{
  color: aliceblue;
}
```

### Vue particlesの導入 
```sh
npm install vue-particles --save
```

```main.js
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
```

```App.vue
<vue-particles color="#dedede"></vue-particles>
```
基本的にはVue-typerの導入と同じなのでわかるかと思います。
いろいろ変更できるのでGithubを確認してみてもいいと思います。

### smoothScrollの導入
スムーススクロールもやっぱりかっこよくないですか？僕はかっこいいと思います
導入方法を書いていきます。

```sh
npm install vue-smoothscroll --save
```

```main.js
import smoothScroll from 'vue-smoothscroll'
Vue.use(smoothScroll)
```

```App.vue
<a href="#" class="link-content" @click="clickSmoothScroll('#work')">

<script>
//methods内に記述
clickSmoothScroll (x) {
      event.preventDefault()
      this.$SmoothScroll(
        document.querySelector(x),
        800,
        null,
        null,
        'y'
      )
}
</script>
```
ライブラリの導入はどれも同じような感じで実装できてしまいます。
もっと他にも面白いライブラリがあると思うので、かっこいいポートフォリオをつくってみてください！
最後までありがとうございました。


## 参考にさせていただいた記事
[Vueプロジェクトでnormalize.cssを読み込む方法](https://qiita.com/hogesuke_1/items/b12c65e8485289da4146)


[Font awesome を Vue.js で使ってみよう](https://qiita.com/kurararara/items/d76776a7dc2d763a068b)


[vue-cliとNetlifyで始めるお手軽サイトホスティング](https://qiita.com/mnuma/items/15f2e8a5f34a392bc604#comments)


[ポートフォリオで使おうと思ったVueTyperについて](https://qiita.com/shoya-yamamoto/items/c5ad758d16273abf03ac)
[Githubリポジトリ](https://github.com/cngu/vue-typer)
[demo](https://cngu.github.io/vue-typer/)

[Vue-particles](https://vue-particles.netlify.com/?ref=madewithvuejs.com)

[Vue.jsでスムーススクロールを使う](https://qiita.com/shuheq/items/5d905e1c0f9916496485)