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

スキル・ツール

Sass TypeScript
sass ts
★★★★☆ ★★★★☆
React Docker
react docker
★★★★☆ ★★☆☆☆
Hugo Python
hugo python
★★★★☆ ★★★★★
Vim Git
vim git
★★★☆☆ ★★★☆☆
Figma
figma
★★★☆☆

作品集

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

みどりみちのブログ hugo
静的サイトジェネレータ Hugo を使用したブログです。

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

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

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

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