Nuxt.jsを使用してポートフォリオサイトを作成しました

article-thumbnail

こんにちは、お読みいただきありがとうございます。 ケン(@gootablog)です。

ポートフォリオサイトを作成しました。

Ken’s Portfolio

作った理由としては、自分のスキル・実績の可視化だったり、使いたい技術・ツールがあったため。それに今後個人で案件を請け負うということ進めていこうかなというところです。

使用した技術・ツール

  • Nuxt.js
  • GSAP
  • Github Pages

Nuxt.js

Nuxt.js

フロントエンドフレームワークの「Vue.js」から派生したものです。
Vue.jsを基盤としているので使い方は大体同じです。Vue.jsと大きく違うのはSSR(サーバーサイドレンダリング)というJSがサーバー内部でHTMLを生成し返すという持っています。

Nuxt.jsも最近使われるようになり名前を聞いていたので導入することにしました。

GSAP

GSAP

JS製のアニメーションライブラリです。

この中のTweenMaxというのを使いました。

アニメーションはCSSでも結構出来るようになってきているのでライブラリを使うほどでも無かったんですが、Nittaさんという方が自身のポートフォリオサイトのアニメーションをめちゃくちゃかっこよく作っていたので今回使ってみました。

いろいろなメソッドがあるので自由自在にアニメーションができそうでした。

Github Pages

Github Pages

今回はサーバーサイドを使わずに作成した静的なサイトなのでGithub Pageに独自ドメインを使ってホストしています。

サーバー費用がかからないし、公開までサクッとできました。

今後は設計と何をアピールしていくか

今回は作りきるという目標でやりました。

実際に作り終えると設計が微妙だなとかアピールポイントが何かわからないという課題があるなぁと思うように。今後はこれらの課題をアップデートしていきます。

ポートフォリオ
Nuxt.js

関連記事