この記事はなに
Vue.jsでポートフォリオをつくったのでそれの記事です。
そこで知っているとちょっと便利だな(自分が調べて使ったもの)とポートフォリオをかっこよくするライブラリなどを軽くまとめてみます。
参考にさせていただいた記事は下にまとめて表記しています。ライブラリのGithub等のリンクもまとめて下に表記しています。
ささっと書いた記事なので間違えがあるかもしれません。間違いを見つけましたらコメントの方までよろしくお願いいたします。
作ったサイト
https://shoma-profile.netlify.com
製作期間は4日ほどです。
ソースコードはこちら(汚いです。。。)
https://github.com/shoma3571/-portfolio
知っていると便利なこと
リセットCSSの読み込み
今回はnormalize.cssを読み込みました。
npm install -D normalize.css
インストールしたらApp.vueファイルの<script>ブロックにimport 'normalize.css'と書くだけです。
Google Fontsの読み込み
まずはgooglefontsで好きなフォントを探します。
フォントを選択すると右上のアイコンに赤い丸がつきます。
こんなやつです。
これを押してEmbedを選択して、@importを選択して@import urlをコピーして、App.vueの<style>ブロックの中に記述します。
その下のものもコピーして、適応させたいところに記述すればOKです。
Safariで表示で少しつまってしまったところがあって、そこは少し別の記事に書いてあります
もしよければこちらもどうぞ
safariでのfontに注意しようね
font awesomeの読み込み
font awesomeもとっても便利です。書いていきます。
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に書いていきます。
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)
このようにしてかいていきます。実際に使うときは下のように書きます。
<font-awesome-icon icon="globe" class="nav-icon"/>
これで普通のアイコンは使えますが、brandアイコンはこれだと使えません。下のように書きます。
<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の導入
タイピングアニメーションを簡単に実装できるライブラリです
npm install --save vue-typer
Font awesomeと同じようにmain.jsファイルに設定します
import VueTyperPlugin from 'vue-typer'
Vue.use(VueTyperPlugin)
<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>ブロック内に書きます。
.vue-typer .custom.char{
color: aliceblue;
}
Vue particlesの導入
npm install vue-particles --save
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
<vue-particles color="#dedede"></vue-particles>
基本的にはVue-typerの導入と同じなのでわかるかと思います。
いろいろ変更できるのでGithubを確認してみてもいいと思います。
smoothScrollの導入
スムーススクロールもやっぱりかっこよくないですか？僕はかっこいいと思います
導入方法を書いていきます。
npm install vue-smoothscroll --save
import smoothScroll from 'vue-smoothscroll'
Vue.use(smoothScroll)
<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を読み込む方法
vue-cliとNetlifyで始めるお手軽サイトホスティング