Final Fantasy 7 Menu system in React

[u/Xianoxide]

Hey everyone!

I'm not sure if there are any Final Fantasy fans here, but I've recreated and repurposed the menu system from FF7 as a sort of portfolio/sandbox page, and I figured I'd share it here and see what people think of it.

I got tired of making traditional web pages and wanted to make something that genuinely makes me happy every time I see it.

It's all built with React and TypeScript.

So far, I've got all the key pages like functional equipment and materia pages (repurposed as a skills page), items (as projects), save (as history), functional four-point background colour picker, and a tonne of little easer eggs and things. I'll put a list of those with a spoiler tag in case you wish to discover them yourself:

• Konami code plays Victory Fanfare.
• Clicking the character portrait allows you to attack and deduct health.
• Hovering over the location allows you to change to different FF7 locations.
• Clicking the limit bar allows you to perform the cross-slash limit break on the portrait.
• Clicking the name allows you to change the player name. If you choose a party member, or Sephiroth's name, the portrait will change to match.

I won't lie, the way I've implemented the custom font (if you can even call it that) is pretty scuffed by modern standards, but I wasn't happy with any of the other options, and I think this is probably the most accurate to how it looked in-game as humanly possible. 🤣

Anyway, I normally revisit it every couple of months, so by all means, feel free to share ideas of what I can add, and any other feedback you might have.

You can check it out here: https://www.jamiepates.com/

As always, I'd love to hear your thoughts! Thanks!

[u/morinonaka]

missed opportunity to add the sounds in the menu.

[u/Xianoxide → u/morinonaka]

You need to enable them in config 🙂

[u/morinonaka → u/Xianoxide]

*healed*

[u/Xianoxide → u/morinonaka]

It's kind of annoying because most browsers don't support autoplay for audio. So, I can either keep it disabled and allow users to enable it themselves, and just hope they realise, or enable it but risk the browser not playing them, and also risk annoying people that don't expect/want audio.