おととい21日に自分のポートフォリオを更新しました。

noraworld.jp

実は以前にもポートフォリオをリニューアルしたことがあるので、今回は version 2 となります。

以前のポートフォリオも、個人的には気に入っていたのですが、やっぱり時間が経つと飽きてしまうし、スマホもタブレットも対応していなかったので、新しく作ってみました。今回はスマホやタブレットも対応しています。

コンセプト

ポートフォリオは、とにかくシンプルかつオシャレにしたかったので、必要最小限の情報だけを抽出してすっきりまとめました。そこにスライダーのアニメーションを追加してちょっとオシャレ感を出してみました。

それと、ポートフォリオを作り始めたとき、ちょうどグラフィック関係をやってみようという思いがあったのでp5.jsというJavaScript用のグラフィックライブラリを使ってみました。スマホでは固定されていますが、PCでアクセスするときはランダムで描画されるギャラリーが変わります。今のところ2つしか用意していないのですが、興味があればぜひ試してみてください。

技術的な話

今回は、”No jQuery and No Framework” で作りました。今までずっとJavaScriptを書くときはjQueryに頼り、サーバーサイドを書くときはフレームワークに頼っていたので、それらにまったく頼らずに作ってみたくてチャレンジしてみました。

“No jQuery and No Framework” をやってみた感想ですが、やっぱりjQueryやフレームワークは偉大だと改めて感じました。

世の中ではjQueryを好まない文化がありますが、それはあくまでシングルページアプリケーションやデータバインドを使う場合の話であり、JavaScriptでアニメーションをやるときにはやはりjQueryが優位だと聞きました。それを今回実感できました。反対にjQueryに頼らないことによってJavaScriptで実装されているアニメーション用の関数やブラウザの差異などを知る良い機会になりました。

そしてサーバサイドのフレームワークについてですが、今回はファイルの配信のみを行う実装にしたのでそこまで苦労はしなかったです。ただフロント制作をしている間、ところどころスマホとPCで配信するファイルを分けたいときがあって、そういうときにHTMLの中身を動的に変更したいことがありました。またテンプレートエンジンを使いたいなと感じることもあったので、そういった処理をしたいときにフレームワークを使っていると導入が楽だったりするので、フロント制作だけでもフレームワークを使ったほうが良いのかも、と思いました。

このブログのテーマ同様、ポートフォリオのコードもGitHubで公開しているので、興味があればご覧ください。noraworld.jp - My portfolio

まとめ

ポートフォリオは今後もリニューアルしていくと思いますが、しばらくはこのデザインで公開しようと思います。まあデザイナーではないのでそもそも頻繁に更新するものではないですが。

見るところはほとんどないかもしれませんが、もし興味があったら見てみてください！