【ポートフォリオサイト】

ポートフォリオサイト
サイトURL
https://siroto-portfolio.com/

コーディング / デザイン / Figma / HTML / CSS / jQuery / Js

制作期間:3ヵ月

本ポートフォリオサイトです。figmaで制作したデザインカンプを元に、HTML/CSSコーディングを行いました。
水色とグレーをベースカラーに、アクセントカラーの赤色を取り入れることで私の内に秘めたエネルギーを表現しました。 おだやかな私の性格を丸みのあるボタン・フォント・カラーで表し、全体的に落ち着きがありながらもスタイリッシュな雰囲気に仕上げています。

実装機能のご紹介

  • スライダー

    Javascriptで実装しています。

  • アコーディオンメニュー

    CSSで実装しています。

  • フェードイン

    要素が画面内に入ってスクロールすると、ScrollInというclassを加えるというトリガーをJQueryで指定しています。

  • お問い合わせのバリデーションチェック

    jQuery(validate.js)で実装しております。必須項目に入力がない場合に送信ボタンをクリックすると、エラーメッセージを表示する仕様になっています。

  • スムーススクロール

    jQueryで実装しております。

  • スクロールでTOPに戻る

    jQueryで実装しております。ページトップから少しスクロールするとボタンが表示されます。