ポートフォリオの一つくらいあったほうがいいかなと思って作成した。
https://nulltemp.github.io/portfolio/
なんか色合いがアレでどこに出しても恥ずかしい感じになったので、もうちょっと配色とか勉強したほうがいいのかもしれない。
以下参考にした点。
固定ヘッダーがある場合のページ内リンク
ヘッダーからプロフィールやスキルにジャンプできるようにしたが、普通に実装するとヘッダーの部分だけスクロール先がズレてしまっていた。
以下を参考にして非表示の余白を作成することでひとまず動作するようになった。
ページ内リンクへの移動時にスクロール位置が固定ヘッダーと被らないようにする方法 - yuhei blog
ただvuetifyのv-containerの中に余白を作ることはできなかったので、その上にdevを作成して余白を作成している。
ヘッダーの中央揃え
vuetifyはなんかヘッダー内のコンテンツが偏ってしまうので、ちょっといじって中央揃えにした。
css - How to do center layout like this in Vuetify or Material Design? - Stack Overflow
自動デプロイ
毎回自分でデプロイするのは面倒だったので、masterにプッシュする度に自動でデプロイする仕組みにした。このあたりのやり方はvueではなくNuxtのほうに参考になる情報があったので、そのまま使用した。
Travis CIはちょっと使ったことなかったが、本当にmasterにプッシュしただけでデプロイされるようになったのでちょっと感動した。ただ、今のところreadmeとかを更新するだけでもデプロイ処理が走ってしまうようなので、この辺りはもう少し設定でどうにかできるか確認したい。
※追記：コミットメッセージに[skip travis]でビルドを無視できるらしい（参考）。
