概要

自分のポートフォリオサイトをSPA(Single Page Application)で、Vue.jsとscssを活用して制作しました。
コンセプトは寄せ集めです。
今の自分の技術の幅を知りたくて、いろいろな要素を盛り込みました。
サイトとしての統一感がないかもしれませんが、そこはあえてですので、叩かないで。

このQiitaはそのときに使用した技術や苦労した点、Tipsなどをまとめてみました。

以下にサイトURLとGitHubのURLを貼っておきます。
Vue.js scssを実際に使ってみるのは初めてだったのでアドバイスがあったらください。

サイト -> https://waonngionn.github.io/portfolio/#/
GitHub -> https://github.com/waonngionn/portfolio

経緯

今までの僕は記事やQiitaを読んだりで技術系のインプットばかりしていたので、GW中に何かアウトプットしたいなと思うことがきっかけです。
自分のもともとの技術と近い技術、だけど、未経験のものを使いたいと思い、Vue.jsとscssを選択しました。
この2つを活用して何か作ろうと考えた結果、
cssでアニメーションするSPAを作ろうと決意しました。

(Vue.jsはLaravelでも使えるらしいので、混ぜ込んでいきたいです。)

開発の流れ

以下のような流れで制作しました。

AdobeXDでざっくりとワイヤーフレーム(pc,sp)を作成
　- Index -> トップページ
　- About -> 自分について
　- Hobby(Worksにあたるページ) -> 今まで制作したソフト?
　- contact -> メールできる機能
　- SNS -> GitHub, Twitter, Instagram, Linkdeinの自分のアカウントへの遷移ボタン
Vue.jsでrouter設定と各々のページの枠組みを作成
HTML/CSS(scss)でアニメーションを実装 -> ここが一番時間かかった

内容

以下のような機能を搭載しているページを制作しました。
Index -> リチプアのOPみたいな
About -> 背景にぼかしが入っているページ
Hobby -> 背景アニメーションがあるページ
contact -> メールソフトを起動
SNS -> ボタンアニメーション

ソースコードはGitHubを見てください。

苦労したこと

【css】 z-indexの管理がおろそかになって困惑した。->模索中
【css】 background-imageを設定するのに苦労した。->試行錯誤の末、できた
【css】 ulの中央寄せがなかなか実装できなかった。->調べたらすぐでてきた。
【css】 heightを他の要素と合わせるのに困った。->jsで無理やり実装しちゃった。
【css】ソースコードが汚くて読みづらい。->リーダブルコード読んだり他の人のGitHub参考にしたりしてリファクタリングします。
【scss】フォルダ構成的に重複して読み込んでしまうファイルがある->未解決、どうしよう。分かる人教えてください。

全部cssで苦労していますね。
もっと勉強します。

学習したこと、感じたこと

Vue.jsを使用すればまじで簡単にSPAを制作できる。 -> Vue.jsまじで簡単でわかりやすくてすごい。
scssを使用すればテーマカラー管理、メディアクエリ、が簡単に実装できる。 -> scssもすごい。
Vue.jsもscssは学習コストが低い。 -> 日本語のドキュメント、記事が豊富で日本人に優しい。

最後に

今回、制作するにあたってたくさんの人の記事を参考にさせていただきました。
ありがとうございます。

慣れない技術を使うことは最初は大変ですが、使いこなせるようになってからは本当に楽しかったです。

このGWを通してまたひとつ成長できたと思います。

次はAWSやAzureとか勉強してみようと思います。