Gray Mickey
original site
世の中の理不尽なこと、問題、課題などを取り上げ情報共有を目的としたサイトです。簡単な性格診断ができるゲーム的なページもあります。
https://gray-mickey.vercel.appDesign
Disney characters
このサイトではミッキーマウスやその他のディズニーキャラクターを使用しています。1928年公開のディズニーの短編映画「蒸気船ウィリー」など、同作品のミッキーやミニーマウス、作品そのものの著作権が2023年末に切れ、パブリックドメインとなっています。 ミッキーマウスのイメージと社会問題という対照性のあるものを一緒に扱うことにより、サイトの趣旨がより引き立つと考え使用しました。
slide Animation | useEffect
トップページのスライドアニメーションは紙芝居をイメージして制作しました。親しみやすいアニメーションを最初に入れることでこのページの趣旨を表しています。useEffectを使用し、setIntervalでページのstate値を動かしています。動的にクラス名をつけそれぞれの中身の配置や大きさを変更しています。 このサイトのメニューは2つあります。グローバルメニューと記事コンテンツのメニューです。記事コンテンツは雑誌風の見た目にし、記事感を演出しています。共通するところはコンポーネント化しています。クイズページは多くのJSとState値で管理しています。 このサイトは3つのフェーズがあり、私が興味を持ち、特に作りたいと感じていたものをサイトにしたため、とてもオリジナル感のあるサイトとなったと感じています。
Coding
Character Quiz | useState
それぞれのクイズの項目ごとにキャラクターと100点満中の点数を割当て、その配列をStateで保持し、結果の画面で合計点と一番点数の高かったキャラクターを算出しています。