#はじめに

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

使用言語：Vue.js
FW： Vuetify

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

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

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

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

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

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

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

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

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

##ABOUTページ
ABOUTページではVuetifyの『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サービスのページと比べ、まだまだですが多少見れるようになったと思います。