はじめに

普段は、独学で開発をしている初学者です。
これまで主にRailsを使って開発を行っていましたが、作成したWebページのセンスが壊滅的だったので、自分についてまとめたポートフォリオサイトを作成してみました。

URL：https://masanori-kimura.netlify.app/

使用言語：Vue.js
FW： Vuetify

トップページはこんな感じです

意識したこと

まずは『ポートフォリオサイト』で検索し、いろいろなサイトをみて勉強しました。

そして自分のポートフォリオサイトに取り入れようと意識した点は、以下の3つです。

• Google Fonts使って、細めなフォントにする
• あまり色を使わない（カラフルだとセンスがいる）
• トップページの背景を印象的な画像にする

結局フォントは、'Recursive'　'M PLUS 1p'を使用しました。

ヘッダー

　ヘッダーは、アンカーリンクを使って指定したコンポーネントまでスクロールできるように作りました。
スクロールをどう実装するかは悩みましたが、Vuetifyなら簡単に実装できました。

# Aboutページの場合
@click="$vuetify.goTo(href='#about')"          

TOPページ

TOPページに使用した画像はCanvaから引っ張ってきたものです。

画像の上に文字を重ねてアニメーションも使用しました。
アニメーションは、Vueの公式サイトに名前が挙がっていたAnimate.cssを使用しました。

たった１行のコードでアニメーションが実装できます。

ABOUTページ

ABOUTページではVuetifyの『Timelines』を使用しました。

https://vuetifyjs.com/en/components/timelines/#timelines

薄い経歴ですが、分かりやすいですね。

SKILLページ

SKILLページでは自分扱える言語・FW・インフラ周りについてまとめました。
ページのレイアウトは一番迷ったのですが、こんな感じになりました。

アイコンはプログラミング系のアイコンが揃っている『DEVICON』を使用しました。
https://devicons.github.io/devicon/

また、スキルのレベルを表した星もVuetifyで実装しました。
https://vuetifyjs.com/en/components/ratings/

WORKESページ

WORKESページはシンプルで、ポートフォリオの画像を並べて、クリックしたらモーダルウィンドウが開くようになっています。

ありがたいことに、このモーダルウィンドウもVuetifyで実装しました。
https://vuetifyjs.com/en/components/dialogs/

まとめ

このようにしてポートフォリオサイトを作成しました。
以前作っていたWebサービスのページと比べ、まだまだですが多少見れるようになったと思います。