みどりみちのポートフォリオ

作品集

当サイト
世の中には装飾やアニメーションを多用した「魅せる」ポートフォリオサイトが多い気がします。
しかし、このサイトはそういったデザインを最低限にして機能性を最大化し、
PageSpeed Insights でモバイルでも100点満点を維持するという目的のもとで作成しています。
JavaScript は使わず、極力 CSS での装飾を削り、できるだけ HTML のみに絞った静的サイトです。
はい、心を込めて HTML を手打ちです。ちょっと懐かしい気持ちになりました。

みどりみちのブログ next
静的サイトジェネレータ Next を使用した Jamstack ブログです。 かつては Hugo を使用していました。
コンテンツ管理は CMS の Contentful を使っています。

Weaketype react
打ち間違えた苦手なキーが出現しやすくなるよう重みづけをして
ランダムに単語を生成するタイピング練習アプリです。
一定期間 Cookie を保持することで、ブラウザを離れても設定項目や記録が残るようにしています。
React と Material-UI、状態管理に Recoil を使用しています。
ロゴは Inkscape で作成しました。

jQuery - JavaScript Converter react
jQuery で書かれたコードをネイティブな JavaScript に変換するツールです。
完全にきれいに変換できるわけではありません。

gensonos react
単独または複数の音声を生成・合成するツールです。
JavaScript の Canvas API と Web Audio API を利用しています。

Geister Online / Alice Chess Online
ボードゲームであるガイスターやアリスチェスを通信対戦で遊ぶことができるアプリです。
描画には Canvas API、通信の実装には Firebase Realtime Database を使用しています。