##背景
ゴールデンウィークにも関わらずコロナで外出する事が出来ず、家にいる時間が勿体ないので、スキルアップも兼ねてポートフォリオを作成しました。

このポートフォリオは、Nuxt.js & Typescript を利用して作成しており、最近のフロントエンドの技術を出来るだけ利用して制作するように心がけました。

##完成したポートフォリオ

##制作にかかった時間

デザイン構想策定・・・2日
HTMLコーディング・・・2日
Nuxt.js アプリ化・・・2日

##デザイン構想策定
良いWebサイトを作るためには、良いWebサイトが何かを知る必要があります。自分が良いサイトだと思っていても世の中の人が見たらそれは普通のサイトだと感じるかもしれません。
自分の感性を確認するために世の中で良いサイトと言われているWebサイトを調査しました。

####Webデザインを参考にしたサイト

サイト名	URL
io3000.com	https://io3000.com/
イケサイ	https://www.ikesai.com/

#####次に、自分のポートフォリオに組み込みたい内容や機能を整理していきます。

自己紹介
プログラミングのスキルセット
ブログや過去に制作した作品の紹介
Twitterのタイムラインとフォロワー数
FacebookやGithubなどのコンタクト情報

#####また、アプリに組み込みたいこだわりやアニメーションなどの細かな機能もここで決めました。

レスポンシブデザイン
ドロワーメニュー
チャート表示
アニメーション表示
モックアップ画像
SNS連携
メインビジュアルに動画を表示したい

ある程度やりたい事（素材）が頭の中で固まってきたら構成を紙に書いてみると良いと思います。

サイトの構成が決まったらWF（ワイヤーフレーム）を作成していきます。
私はエンジニアで、Webデザインの知識は少ないですがYouTubeやUdemyなどを利用してWFを作成する為の簡単なPhotoshopの操作方法は予め学びました。

作成したPSDファイル↓
https://demo.isystk.com/design/psd/portfolio.psd

##HTMLコーディング
WFが完成したらHTMLファイルをコーディングしていきます。
最近のWebサイトは、スマホからのアクセスが70%を超えておりPCサイトからのアクセスが減少しています。
その為、Webデザインはスマホファースト（スマホからのアクセスを優先したデザイン）となるようにして、PCからアクセルされた場合でも違和感なく表示出来るようレスポンシブデザインとなるようにしました。