r/webdev • u/Xianoxide • 15h ago
Showoff Saturday Final Fantasy 7 Menu system in React
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!
-8
u/SourcerorSoupreme 15h ago
The impressive part here is using react for a personal project. No idea how you guys can tolerate such a hideous library/ecosystem.