Nuxt.jsでペライチなポートフォリオサイトを刷新した
ただカードが10個並んでいるだけの、しがないサイト。
きっかけ
Ionic Framework 見てたらこんな表現見つけてカッコいいなーと思ったので。
作ってみてわかったのは以下。
- ブランドロゴがカッコいい
- ブランドカラーに配慮とした写真チョイス
- 写真に白い部分が少ない（＝カードに一体感）
- 擦りガラス表現は画像でやってる
自分のサイトは、色がごちゃごちゃしててダサい。 少なくとも、キャプションのところはグレーに統一などすると少しはマシになるかも。 自分のプロダクトがWebページのキャプチャである限り白い部分は多いのでどうしようもない辛さがある。
Nuxt.jsについて
対象のサイトは GitHub Pages による静的サイトなので、サーバーサイドレンダリング(SSR)ではない。
Nuxt.js の Generate という素晴らしい機能によって HTML などが生成され、それを gh-pages ブランチにデプロイしているだけである。
ほかにも Vue.js の恩恵として、コンポーネントを扱えたことは大きい。 具体的には、以下に示すとおり各プロダクトのデータは JSON によって定義したものを使ってカードコンポーネントをループして表示している。 制作するにあたって 集めるべきデータと表現したい構造を分けて管理できる のでとてもやりやすかった。
