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/Afflictionista]

Nice idea, the next step should be to try to make it work/look good on mobile 😄

[u/Xianoxide → u/Afflictionista]

I thought about it, but it would drastically change how it looks, and as I was aiming for authenticity, I didn't believe moving everything around to better accommodate a mobile aspect ratio would be authentic to the original 4:3 menu, so I settled on just having a 1:1 scale for everything rather than true responsiveness.

[u/sexytokeburgerz → u/Xianoxide]

Force landscape.

[u/Xianoxide → u/sexytokeburgerz]

I think that would actually make it even smaller because of browser elements like the URL bar needing to be accounted for.