ポートフォリオサイトを制作しました

お久しぶりです！

今回はタイトルの通り、やっとポートフォリオサイトが形になったので紹介させていただきたいと思います。

実は以前もポートフォリオサイトを制作したのですが、納得がいかなくなり途中でやめてしまいました…。今回のサイト制作はそういったことがないように、「自分が実装したいことをとにかく取り入れてみる！」ということを意識しました。

ベージュや白などナチュラルな雰囲気のサイトを目指しました。レスポンシブにもこだわり、どのサイズのデバイスでも綺麗に見ることができるように頑張りました。また、背景やトップ画面のイラストなどは自分で準備しました。

実際のページはこちらです！

個人的なポイント

●SVG

まず実装したかったことその１が、「ヘッダーを波線にする」ということだったのでＳＶＧを使用して再現しました。普通の長方形よりもデザイン性が増し、とてもかわいくなったと思います。また、SVGなので拡大しても画質が悪くならないのもSVGの良いところです。ヘッダー以外にも様々な部分にSVGを使用しました。

参考にさせていただいたサイト

https://www.webopixel.net/javascript/1024.html

●jQuery

また、今回初めてjQueryを使用しました。サイトを参考にさせていただき、一部分を自分の好みに書き換えるという方法で実装したので、まだまだ理解できていない部分が沢山あります。しかし少し動きがあるだけで全く違うウェブサイトに生まれ変わったように感じ、もっとjQueryを学んでみようという気持ちになりました。

主にjQueryを使用した部分は、「パララックス効果」「スクロールしたときに要素がフェードイン」「ハンバーガーメニュー」です。パララックス効果はどうしても使ってみたかったという理由だけで無理矢理実装しました。笑

参考にさせていただいたサイト

パララックス効果

https://recost-design.com/2045.html

フェードイン

https://mittaniblog.com/jquery-fadein/

ハンバーガーメニュー

https://web-sama.com/hamburger-button

今後の課題

・Worksのサムネイル画像に統一感がない

・スマホなど横幅が狭いデバイスでポップアップを開いたときにとても読み辛い

・レスポンシブの書き方が冗長になってしまっている

・ロード画面や文字のアニメーションを作りたい

など…

まだまだ改善したい部分が沢山あるので、ここから納得がいくまでブラッシュアップしていきたいです。

ここまで読んでいただき、ありがとうございました！