Vue.jsでポートフォリオを作ったのでまとめました。
作ったサイト
https://mk-portfolio-site.netlify.app/
動機
今回サイトを作った動機は「自分のポートフォリオサイト持ってるのってなんかかっこいいよなぁ」と思ったからです。ちょうどいいアウトプットにもなりそうだったので作ることにしました。かかった期間は3日間。時間でいうと20時間くらいです。
1日目
サイトの構成を練る
ネット上で他の方が作ったポートフォリオを色々見まくって考えました。
内容は以下の４項目に決めました。他の学生のポートフォリオを見ていると、インターンの開発経験や研究の内容を盛り込んでいる人も結構いましたが、自分は書くことがなかったのでその項目は外しました。悲しい。。。
- Top(トップページ)
- About(プロフィール)
- Skills(使ってきた技術)
- Works(制作物)
デザインに関しても色々な方のポートフォリオを参考にしました。色やレイアウトはなるべくシンプルなものを目指しました。
使用技術の選定
基本的なレイアウトやデザインはHTML/CSS、動きをつけたりコンポーネントをまとめる部分でVue.jsを中心に使おうと決めました。Vue.jsを選択した理由は大きく2つ。1つ目の理由は他のライブラリやフレームワーク(ReactやAngularなど)と比べてとっつきやすいから、2つ目は人気そうだから、です(笑)。実際触ってみてかなり使いやすかったのでポートフォリオ作成したい人はVue.jsオススメです！
環境構築 & 大枠の実装
Vue.js を vue-cli を使ってシンプルにはじめてみるという記事を見ながらVue CLIを使ってプロジェクトを作成しました。
サイトの大まかなレイアウトやデザインを実装しました。細かいアニメーションやリンクの対応はまだできていない状態でした。
2日目
おしゃれなライブラリを導入
Vue.jsでポートフォリオを書くという記事に書かれていたvue-typerとsmoothScrollという2つのライブラリを導入しました。サイトに簡単な動作をつけたい人にはオススメです。
hover時の動作
ボタンや画像のhoverに応じた色の変化や表示非表示の切り替えなどの動作をつけていきました。この辺ができてくると動きが出てきて楽しい。
3日目
レスポンシブデザイン
今だとスマホで見る人が圧倒的に多いので、レスポンシブは必須かなと思い導入しました。レイアウトとフォントサイズの調整が主だったので割と簡単でした。1つ大変だったのがハンバーガーメニューです。ヘッダーにサイドバーを表示させるためのハンバーガーメニューを実装しました。Vue.jsのトランジションを取り入れて滑らかなアニメーションが実現できたかなと思います。(よかったらスマホで見てみてください...！)
サイト公開
デプロイはNetlifyを利用しました。GitHubと連携させて自動デプロイができるので超便利です。vue-cliとNetlifyで始めるお手軽サイトホスティングという記事を見れば簡単にホスティングできます。Github Pagesでもいいと思います。
もう少しやりたかったこと
ディレクトリ構成 & 単一ファイルコンポーネント
実際にプロジェクトを作成していく中でディレクトリ構成に悩みました。そこで Vue.js ディレクトリ構成 色々試してみたという記事を参考にModules & Pagesパターンを採用してプロジェクトに反映させようとしました。Modulesに再利用可能なコンポーネント、Pagesに基本的なページ構成を書いていく、という考え方です。Vue.jsには単一ファイルコンポーネントという考え方があります。これは部品の再利用性や可読性を高めるために、レイアウトを部品ごとに分けて実装しようという考え方です。ディレクトリ構成は考えたもののうまくコンポーネントをまとめられなかったので、この辺はもう少し勉強して改善したいところです。
アニメーション
CSSアニメーションやVue.jsのトランジションを絡ませてサイトに動きをつけようとしたのですが、結構大変でした。上の方でも触れているハンバーガーメニューの実装は頑張りましたが、他のアニメーションに関しては今回は諦めました。時間ができたらまた挑戦したいです。
まとめ
思っていたより楽に良さげなサイトを作ることができました。「お手軽にポートフォリオ作ってみたい！」という方はぜひVue.js使ってみてください。では！
参考記事
- Vue.js を vue-cli を使ってシンプルにはじめてみる
- Vue.jsでポートフォリオを書く
- フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
- vue-cliとNetlifyで始めるお手軽サイトホスティング
- Vue.js ディレクトリ構成 色々試してみた
その他様々なポートフォリオサイトを拝見し、参考にさせていただきました。