Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
241
Help us understand the problem. What is going on with this article?
@shoma3571

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

More than 1 year has passed since last update.

この記事はなに

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で好きなフォントを探します。
フォントを選択すると右上のアイコンに赤い丸がつきます。
こんなやつです。
image.png
これを押して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に書いていきます。

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 commandPublish directoryの設定をします。
ビルド用のコマンドはnpm run build,Publish directoryにはdistを指定します。
基本的にはこれでローカルと同様のものが配信されると思います。

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

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

vue-typerの導入

タイピングアニメーションを簡単に実装できるライブラリです

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>ブロック内に書きます。

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

Vue particlesの導入

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の導入

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

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を読み込む方法

Font awesome を Vue.js で使ってみよう

vue-cliとNetlifyで始めるお手軽サイトホスティング

ポートフォリオで使おうと思ったVueTyperについて
Githubリポジトリ
demo

Vue-particles

Vue.jsでスムーススクロールを使う

241
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shoma3571
フロントエンドが好きな高校3年生です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
241
Help us understand the problem. What is going on with this article?