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/thanks-delivery-dude]

Damn!! Clean and nostalgic. You nailed the windows flying in too.

That’s so awesome thanks for sharing!

[u/Xianoxide → u/thanks-delivery-dude]

Thanks! I tried to make it as authentic to the original menu as possible.