なにこれ

totoraj.netのドメインをとってから3つめのデザインです。

2つめとは違いポートフォリオとしてデザインしました。

シンプルだけど少し遊びのあるサイトを目指しました。

2つめと同じくJekyllを使っています。

思い切ってIE9以下のサポートを切り捨てました。

(一応、IE8までは装飾以外崩れません)

こだわり

ボタン

水玉が飛び出してくる感じのボタンです。

画像を使わずにCSSのみで作りました。

keyframeを使いバウンドしたようなアニメーションにしました。

ボタンのスクリーンショット

ページ移動

ページを移動するときに読み込みが入るのが嫌だったのでpjaxを使っています。

pjaxはajax通信を使ったページ読み込みを簡単に実装できるjQueryプラグインです。

(と認識していますが違うかもしれません)

PJAX

ページ移動の際にアニメーションを挟んでします。

このアニメーションはjQueryプラグインとして公開しています。

SimpleAnimation

レスポンシブ

Worksページのレスポンシブ化をとくに頑張りました。

記事ページへのリンクをaタグ一つにまとめるのもわりとこだわってるかも・・・。

アウトライン

いままで以上にHTMLの構文に気を付けました。

調べると知らなかったことがいくつかあったのでいい勉強になりました。

アウトラインをチェックできるChrome拡張機能があってとても助かりました↓

HTML5 Outliner

スクショ

トップページ

worksページ

profileページ

制作期間

制作開始から終了まで4日間でした。