Play
ピクセルアートの家になったポートフォリオ。オブジェクトを開くとコンテンツが見られます。
プロジェクトについて
ポートフォリオを、ピクセルアートのゲームにしました。舞台はテネリフェの通りに建つ私の家で、Habboのような斜めの視点で描いています。キャラクターは庭、リビング、キッチン、書斎、寝室、和風の浴室、ガレージを歩き回れ、紫のボールが上で弾んでいるオブジェクトを開くと、ポートフォリオの実際のコンテンツが表示されます。
目的：一覧を読むより探検したい人にとって、私を知ることを遊びにすることです。それでも誰も置き去りにしません。家は部屋とオブジェクトの一覧でもあり、JavaScriptなしでもスクリーンリーダーでも全体を読め、内容はいつもメインサイトと同じです。
できること：
- 17個のオブジェクトから実際のコンテンツが開きます。肖像画は自己紹介、本棚には背表紙にタイトルの入った記事ごとの本、パソコンにはプロジェクトと画面の中で動くターミナル、額縁には経歴、カレンダーにはGitHubでの1年、冷蔵庫には好きなもののマグネット、郵便受けには推薦文があります。空のセクションは、そのオブジェクトごと消えます。
- 暮らしのある家：3Dプリンター、ロゴを使わない好きなゲームへのオマージュ、カナリア諸島の地図、コーヒーをいれてくれるコーヒーメーカーなど、私の物でいっぱいです。ほとんどの物はひと言答えたり（その言葉は管理画面から変えられます）、スイッチが入ったり、使えたりします。椅子やソファに座り、ベッドに横になり、お風呂につかれます。犬1匹と猫7匹が歩き回り、眠り、あいさつし合い、近寄ってきて、なでてほしがります。
- 1日の7つの時間帯：訪問者の時計に合わせて、深夜、夜明け、昼、午後、夕焼け、夕暮れ、夜が、その日付のテネリフェの太陽から決まります。夕暮れになると窓、街灯、画面に明かりがともります。
- まわりはテネリフェ：しっくいと石のカナリア風の外壁、リュウケツジュ、赤いタヒナステ、日なたのテネリフェトカゲ、そして小道の向こうにはバナナ園があります。
- ガレージには私の乗り物があります。車に乗ると運転席からの眺めが開き、ダッシュボードと、ガレージのリモコンで開けた先にテイデ山を望む道路が見えます。バイクと自転車にも乗れます。
- WASDか矢印キー（AZERTY配列にも対応）、またはクリックやタップで移動でき、道は自動で探します。スマートフォンやタブレットでは、左手の親指の下に方向パッド、右手の親指の下に大きなEボタンがあります。キャラクターを隠す壁や家具はほぼ透明になるので、いつでも姿が見えます。
- クローゼットでキャラクターの見た目を変えられ、鏡には私のピクセル肖像画が映ります。歯車からは言語の切り替え、すべての壁の非表示、1キーのショートカットの無効化ができます。設定はすべてブラウザーの中にだけ保存されます。
SEO：ターミナルと同じルールです。言語ごとに1ページで、canonical、hreflang、メインのポートフォリオの人物を指す構造化データがあります。パネルはHTMLの中で絵より前に置き、検索エンジンが全体を読めるようにしています。
アクセシビリティ：歩き回る必要はありません。オブジェクトはどれもパネルへのリンクで、JavaScriptがなくても開き、家は一覧としてTabキーでたどれます。パネルはモーダルダイアログで、閉じるとフォーカスが戻ります。今いる部屋と近くのオブジェクトはライブリージョンで読み上げられ、窓は名前のついたスイッチで、ボタンはすべて44px以上、ドラッグが必要な操作はありません。動物や動くものはすべて一時停止でき、動きを減らす設定では誰も歩きません。
パフォーマンス：ゲームエンジンも画像も使っていません。家はサーバーがSVGで描き、レイアウトのずれはありません。どの絵もデータとして保存したピクセルアートで、色ごとに1本のパスを使い、色はすべてCSS変数なので、夜やクローゼットは変数を変えるだけです。家具と景色は一度だけ描き、すべての絵はブラウザーがキャッシュする1つのSVGファイルにまとめて届き、動きはCSSです。
セキュリティとプライバシー：できるのは公開コンテンツの読み取りと、訪問と開かれたパネルを匿名で数えることだけで、Cookieは使わず、ブラウザーがAPIと通信することもありません。コンテンツセキュリティポリシーはレスポンスごとのnonceを使い、リンク先は私のサイトだけです。ブラウザーに保存したものは、読み戻すときに決められた選択肢と照合します。
アーキテクチャと品質：Next.jsで、7つのモジュールからなるヘキサゴナルアーキテクチャ、テストファイルは53個です。スペイン語、英語、日本語に対応しています。テストで門から空いているすべてのマスとすべての家具の横まで歩き、スクリプトですべての部品の組み合わせのピクセルを比べて、不自然な重なりがないことを確かめています。
現状：完成しており、近日公開予定です。
