【作品例有り】メンティーさんのポートフィリオ制作（HTML/CSS/JS）をお手伝いしました
メンティーさんが制作したいポートフィリオのヒアリングし、一緒に作り上げている中で「僕が制作するならこんなデザインやコードにする」ということを具体的に伝えるために、模範サイトを作ったので公開します。
このサイトを使用して、コードレビューやデザインの理解を深めて実戦で生かしてもらいます。（このサイトを元に作りたいといわれたときもこちらを差し上げて改編していただきます。）
模範サイト
https://eight-web.com/portfolio/
PC版のみ対応（スマホ対応は後日）
デザイン要件
- 宇宙をテーマ
- 全画面表示
- 横スクロール
- アニメーション
宇宙ということなのでメインカラーは紺、サブカラーに白を、アクセントに黄色を使いましょうと提案。
色味はメイン・サブ・アクセントを先に決めるとデザインが作りやすいです。
コーディング要件
- 少しスクロールすると次の画面へスムーススクロール
- 内部リンク移動もスムーススクロール
- 文字などを動かしたい
横スクロールサイトのスムーススクロールはCSSではできず、JSを多用することになりました。
参考サイトがあまりないのでほぼ自作に。
最所に画面→次の画面へのスクロールは簡単に実装できたのですが、次の画面→最所に画面に戻る時に「次の画面にいて最初画面に戻る」というフラグをどうコーディングするのが肝でした。
まとめ
模範サイトの制作時間は8時間ほどで、スマホ化まで入れると10時間くらいで完成します。（時間外対応でしたが楽しく制作できました！）
作ったことないサイト作るのはいつになってもら面白いです！
機会をくれたメンティーさんい感謝です
