個人開発3作目として、ポートフォリオサイトを作った。
サイトを作った背景
Vue.jsを使ってSPAを作ってみたいと思い、パッとその時思いついたポートフォリオサイトを作ってみることにした。
サイト概要
自己紹介のためのサイト。
以下のページから構成されている。
- トップ
- 自己紹介
- スキル
- ポートフォリオ
- 問い合わせ
せっかくのSPAを楽しむため、アニメーションを入れて滑らかなページ切り替えを行えるようにしてみた。
使った技術・サービス
以下の技術・サービスを使った。
- Vue.js（Vue CLI 3 / Vue Router）
- Netlify
まずはシンプルに作ってみたいと思い、Nuxt.jsは選択肢から外した。
作ってみて
以下、作ってみた感想。
Vue.jsについて
それまでVue.jsはRailsのついでにちょこっと触る程度だったので、Vue CLIやVue Routerを触れる良い経験となった。
Netlifyについて
ホスティングサービスはGitHub Pages、Firebaseあたりも候補に挙がったが、Netlifyにして正解。とにかく使いやすくて便利だった。
ほとんど調べる必要も無く、「良いUIとはこういうことなのか」と実感させられた。
（ちなみにこのブログもNetlifyでホスティングしている。）
ページ切り替えのアニメーションは安易につけてはいけない
最初は滑らかなページ切り替えが気に入っていたが、Safariでの動作が気になった。
マウス、トラックパッド、iPhoneなどでのジェスチャによる「戻る」「進む」を行なった際に、Safariではスライドアニメーションが動作する。
そのSafariのアニメーションとアプリケーション側のアニメーションが2重で動作することで、UXが落ちると感じた。
ページ切り替えにアニメーションを付ける場合は、そのあたりも考慮した方が良さそうだ。
ポートフォリオサイトを作った後、新しく案件を探すこととなった。
その際必要となった職務経歴書の自己PR欄に、ポートフォリオサイトのURLを載せて活用できたので、作ってよかったと思う。