ポートフォリオ制作②

こんにちは。UGOK-5thメンバーのミサです。

今回は、「ポートフォリオ制作①」の記事の続きです。初めてのポートフォリオサイトがやっと完成しました。

完成したポートフォリオの説明、前回から改善したところなどを説明しています。

前回までは全てを１ページにまとめていたところ、今回は、

TOP トップ画面

Profile プロフィール

Works 作品

Contact 連絡先

の4ページに分けました。

シンプルでわかりやすいをテーマに作成しています。

TOP トップ画面

navで目次を付けそれぞれの画面に移動できます。ツイッター、ブログのアイコンも設置し、クリックするとそれぞれの画面に移動します。

Profile プロフィール

Works 作品

私がこれまでに作った作品を掲載しています。ツイッターのクローンアプリ、家計簿アプリの文字をクリックすると制作したアプリに移動し、ブログをクリックするとALISで作成したブログに移動します。

アプリのスクリーンショットを掲載していますが、そのまま貼ると画像が多くなってしまうため左右にスクロールして全てを見られるようにしました。

Contact 連絡先

送信ボタンを押すと、入力した情報が私のメールアドレスに自動で送信できるようにしています。

Profile プロフィール、Works 作品、Contact 連絡先ではヘッダーの部分にハンバーガーメニューを設置しています。これを押すと以下の画面が出現し、それぞれのページを行き来することができます。

まとめ

以上で、はじめてのポートフォリオサイト制作を終了します。デザインが思いつかなかったり、画像がうまく表示されなかったり、思うようにいかないことが多々ありました。多くの人のポートフォリオサイトを参考にして、HTML, CSSのこともたくさん調べながら完成させることができました。実際に制作することで、多くのことを学べる機会になりました。

最後まで読んでくださりありがとうございました！