doiko123/portfolio

ポートフォリオサイトです。

portfolio

ポートフォリオサイト（2020.09制作）です。

https://doiko123.github.io/portfolio/

• 使用技術スタック：HTML／CSS（scss）／JavaScript
  
  随時実績など追加・更新しています。

portfolio's Issues

お問い合わせフォームを実装

contact.htmlにGoogleお問い合わせフォームを作成・埋め込みを行う。
（10/8追記　お問い合わせフォームにCSSをあてる）

デスクトップ版cssを追記する

スマホ版はあらかた完成したので、デスクトップ対応を行う。

ヘッダー・フッターのCSS修正

#WHY
・ヘッダー固定なしだと使い勝手が悪いため
・ページ内容が少なくスクロールがあまり発生しないため、フッター上のメニュー項目は不要
・ヘッダーフッター共に見栄えをよくしたい

#OUTPUT
・ヘッダー ： 常に画面上部に固定 ＆ 見栄えを改善
・フッター ： メニュー項目を削除 ＆ 見栄えとバランスを改善（もう少し厚みを持たせる）

実績を追加する

クローズドにすべきものは文章と概要のみで掲載し、お問い合わせを頂ければお見せできる旨を記載する

ハンバーガーメニュー・スクロールボタンのデバイス差異対応

jsで動きを付けている部分（ハンバーガーメニュー・スクロールボタン）について、
ブラウザアプリ（Twiiterなど）やスマホデバイスによって動きや見え方が異なるものがあるので修正する。

例）
・ハンバーガーメニューを開いた際のメニュー高さがスクロールすると短くなる
（Twitterのアプリブラウザ、IphoneSE）
・ページTOPへスクロールするボタンについて、スマホかつフッター上にて押した際反応がない事がある
（Twitterのアプリブラウザ、iPhone6、7）

モバイル版メニューをハンバーガーメニューに変更

今の状態から変更する
生JSで作る

Lighthouse・insightsのチェック項目対応

・レンダリングブロック
　① 画像読み込み　⇒　WebP対応をする
　② googleフォント・アイコン読み込み　⇒　rel="preload"とdisplay:swapで対応
　③ font awesomeのjsをbodyタグ最後に移動

・使用していないCSSの削除（本当に使用していないか要確認）
…css/free.min.css(kit-free.fontawesome.com)

・フッター部フォント色の変更（読みやすいように）
・alt属性の追加

twiiter、githubへのリンク部はiではなくaタグにaltつけてみる

・コンソールログのエラーをなくす
⇒anime.min.jsをjsの下にアップしてみる？

一度ここまで直してみて、再度チェック実施してみる。

JavaScriptで動きを付ける

生JSにて実装する
スクロール・スライダー・画像のふんわり表示などで検討中

ポートフォリオとして載せる架空サイトを制作

架空の企業様サイトを制作