私のポートフォリオサイトをリニューアルしました！旧ポートフォリオはずっと放置していたので約8年ぶりです。散らばっていた情報をまとめたぐらいですが、よかったら見てください。ついでに制作依頼お待ちしております（変なことしかできませんが）。
リニューアルのきっかけ
きっかけは、旧ポートフォリオで使っていた無料のレンタルサーバーがサービス終了となってしまったことです。放置してただけなのですが年度末だしついでにリニューアルするかとなりました（今までありがとうございました）。実は旧×2ポートフォリオもあるのですが、そちらも別のレンタルサーバーのサービス終了により闇に消えております。
レンタルサーバーのサービス終了により学生時代に作ったポートフォリオ（放置）が闇に消えることになりました。謎インタラクションも今までありがとう、さようなら。 #thuglife pic.twitter.com/d6egxZd49H
— __hahTD (@eatora22) 2022年3月28日
開発に至るまで
せっかく作り直すので学習がてら新しいWeb系のフレームワークを使おうと思い、今回はVue.jsを使用しました。Reactと迷いましたがサイト規模的にReactでなくても良いだろう&学習に時間かかりそうということでVueを選択。
Vue関連の情報を調べていると開発環境にコマンドラインインターフェースのVue CLIが良さそうというのと、VuetifyというUIライブラリーが便利ということでこれらも導入しました。ポートフォリオに関してはよくある作品ごとに個別ページを用意する感じにしたかったのと、なんとなくSPA（Single Page Application）だとありふれたコーポレートサイトっぽくなりそうで嫌だなと思いMPA（Multiple Page Application）にしました。私の認識あってるでしょうか？
しかし、VuetifyがSPA前提のコンポーネントだったり関連情報もそっちばかりということでまあまあハマりました。スキル不足だと言われるとまあすみませんという感じですが、MPAだとライブラリの恩恵を受けにくいなと思う場面があった気がします。
上記を含めハマったポイントはおもに以下の通り（誰かの参考になれば）。
開発中に困ったこと
Visual Studio Codeでブレークポイントを素通りする。
調べると公式ドキュメントにあるlaunch.jsonのソースマップのパスがおかしいから修正しろ的な記事が多々あったので色々変えてみましたが改善せず。参考にさせていただいたこちらの記事の手順では止まるのですがChromeのデベロッパーツールをいじる手順が面倒で、結局コンソールの出力を見ながら普通にデバッグしました。
v-tabs（タブ・コンポーネント）でタブの初期設定位置がおかしくなる。
デフォルトがSPA前提っぽいのでページを遷移するたびにタブの初期位置がうまく設定できませんでした。途中で全部嫌になってバーを透明にしたりアニメーションを無効にしたりしてごまかしました。
v-img（画像コンポーネント）で良い感じにアニメーションを設定できない
ホバーアニメーションとか使いたかったのですがv-cardコンポーネントを挟まないと設定できないっぽいです（多分）。グラデーションのオーバーレイだけはv-img単体でできたのでJSでコード書いてマウスオーバー時のみ適当にそれっぽくしました。ライブラリの設計思想を私が理解していないのかなとか勝手に思ってました。
なんとかポートフォリオ完成
他にも色々はまりましたがインターネット上にいる先駆者の皆様のおかげでそっちはなんとかなりました。ただ最低限の実装で疲れてしまい、変なインタラクションや綺麗なビジュアルを生成する等の遊びを入れる余裕がありませんでした。気が向いたらやります。
ちなみにGitHub Pagesでサイトは公開してます（Firebase Hostingとちょっと迷いましたが）。独自ドメインも取ってません。それで怖い人たちにマウント取られないことを祈っております泣。
以下は参考記事の皆様です（あとstack overflow）。ありがとうございました。
