ポートフォリオサイトリニューアルしました
こんにちは、だいちゃんです。
ついに！ ポートフォリオをリニューアル しました（ﾊﾟﾁﾊﾟﾁ
いま持ってる能力の、多分限界です。
ということで、今回のリニューアルの概要を紹介しようと思います！
OverView
今回のリニューアルのポイントはこちら▼
- Loading画面を導入しました。なういでしょ？ウザいだいちゃんロゴが見れるよ！
- 過去の制作紹介エリアを今までJSで組んでいたものからCSS（Gridレイアウト）へ変更したよ！
- “udcxx”について説明するエリアを追加したよ！
- プロフィール・FVの文言を若干変更したよ！
- ファーストビュー・udcxx紹介エリア・コンタクトエリアの背景が動くよ！
この中からいくつかをピックアップしてちょっと詳しく紹介します！
一応少し技術的？なことになるので、興味ない方はできたてホヤホヤのポートフォリオを確認してみてください！
Loading画面
Loading画面があったら「最近のサイト」って感じしません？ って軽い気持ちで導入しました。
フォロワーさんに描いてもらって転用しまくってるだいちゃんロゴが今回も大活躍します！カラフルに ウザく なったロゴがアニメーションGIFになってロード中チカチカします。
仕組みはとっても単純なもので、画面と同じサイズにしたdivのz-indexを100くらいにして、jsで指定時間経過後フェードアウトさせてるだけ。 position: float; を忘れてしばらく悩んでたのはヒミツ。
Gridレイアウト
比較的最近登場したらしい「グリッドレイアウト」を早速使ってみることにしました。
IEは(やっぱり)非対応。古めのブラウザもだいたい対応していないようですが、僕のサイトを見に来る物好きがIEなんて使ってないよね？ ちなみに、僕のサイトに今年に入ってから来てくれた方のブラウザ環境を確認してみたら、
IEとAndroidブラウザ（ChromeじゃなくてAndroid 4.xとかまでの古いのに入ってたやつ）を単純に足しても2%未満なのでやっぱり無視していいよね。むしろどういう経緯で僕のサイトにたどり着いたのか気になるけどｗ
使ってみた感じ、これくらいの簡単なグリッドレイアウトだとcssだけでサクッと組めちゃうのでいい感じ。オプションなんかもたくさんあるけど全然使いこなせなかった。spanにするやつでどうもハマってしまった。
Grid Layoutsについてはここを参考にしました。
leanModal.js
制作一覧のモーダルも刷新することにしてみました。
元々は「Magnific Popup」というjsプラグインで動かしていたんですが、機能がありすぎていまいち使いこなせていなかったので、今回はleanModal.jsというプラグインを使って動かしてみました。シンプルなのでいろんな用途に使えそうだし、モーダルの中身はページ内ならどこに設置しても大丈夫で、まとめて書けるのが個人的にメリットだと感じました。
参考サイトはこちら 【jQuery】わずか2KBの軽量モーダルプラグイン leanModal.js
コピーライトの年を自動記述
フッター部分のコピーライトに入る「年」の部分を自動的に記述してくれます。
例えば2020年1月1日になった瞬間から、「Copyright (C) 2018-2020 〜」になるという小さな自慢。 （多分言わないと誰も気づかない）（そんな小細工せずに毎年更新しろよ、とは言わないで）
そのほか
FV（ファーストビュー）の文言変更、ナビゲーションメニューの追従設定、などは既存のサイトからそのまま流用。
FVの文言変更するjsは自分で書いたんだけど、jQueryに合わせてないからそこだけ違和感ｗ 書き直してもいいけど書き直さなくてもいいかなって思ってそのままにしてます。ちなみに、文言の中身は少し変わったよ。
あと、自分の中でも説明しにくかった「 udcxx 」の由来を説明する画像を作りました。かっこつけて英語で書いたけどちょっと何言ってるかよくわかんないっすね。
今回のポートフォリオの大改修はこんな感じの内容になっておりまする〜
ガンガン動くサイトもいいけど、それなりのストーリーとか意図が無いとただのウザいサイトになりかねないので、いまの僕にはまだ無理かな…。
毎回作った時は自画自賛でお気に入り なんだけど、また来年くらいには知識も技術も成長して、このサイトがダサく見る…くらいになれてるといいなって。
ちなみに、今回は速度（Google PageSpeed Insightのスコア）改善にも取り組んでみたのでそれはまた別の記事で。
