ポートフォリオサイトのトップ画面

個人開発3作目として、ポートフォリオサイトを作った。

fu9daのポートフォリオ

サイトを作った背景

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を載せて活用できたので、作ってよかったと思う。