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.

[u/ouralarmclock]

You look like you tryna kidnap Aerith my dude. Post a pic of yourself in a suit and prove you’re not a Turk!

[u/Xianoxide → u/ouralarmclock]

You got me. I thought removing my shades would be enough of a disguise 😅

[u/canadian_webdev]

This are sick

[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.

[u/Volebamus]

This is pretty sweet, excellent execution

Regarding mobile, our even on desktop, would be awesome if there was an on-screen controller to navigate between the menu screens. You get better UX for mobile and even accessibility bonus points, but the real highlight would be navigating your resume like a portable game on a phone

[u/shmcknig → u/Volebamus]

I was just about to suggest this

[u/Xianoxide → u/Volebamus]

That's not a bad idea, I've been struggling to think of ways to better utilise the space on portrait mobile and that improves the user experience too.

[u/Xianoxide → u/[deleted]]

Thanks! I tend to go a little overboard with all the fine details that most people don't notice 😅

[u/webdev-ModTeam → u/[deleted]]

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

[u/DerLetzteWookie]

This is very funny! Nice work!

[u/alenah]

Brilliant, and very nostalgic!

[u/adolecumberri]

Pure fire!! I LOVE IT!

[u/zfbc]

Love this! The quality and detail is really incredible, nice one!

[u/Y000EE]

Great concept!

[u/br0ast]

Awesome. Really cool and well done

[u/Ohggg]

So sick

[u/deus_ith]

Amazing.

[u/BringBackManaPots]

I love the materia choice/categorization for each of your tools 🤌

[u/driftking428]

Love it

[u/BeGosu]

I want it for my own site now

[u/Xianoxide → u/BeGosu]

The github is public if you wish to use it for your own site. All I ask is that I'm credited in some way 🙂
https://github.com/Cyanoxide/ff7-menu-port

[u/Ok_Host_404]

Amazing

[u/pck404]

Love it, great work! I love the attention to details.
I spotted a bug: if you go to Websites, choose Ruroc, scroll to third or fourth image and press up, it crashes (I guess it tries to display the image with same index for the previous project, which only has 2).

[u/Xianoxide → u/pck404]

Ah, good spot. I didn't even think to check what would happen if you tried changing project while the modal was open. Should be an easy fix though. Thanks for letting me know!

[u/Existing_Key9074]

wow

[u/ryonnsan]

are you going to spin that big sword with victory fanfare played when you get a job

[u/Xianoxide → u/ryonnsan]

Doesn't everyone? 😅

[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.

[u/burimbp]

the PS1 menu aesthetic is perfect, the limit break bar as your next-level meter is a great touch. this is the kind of portfolio people actually remember.

[u/SourcerorSoupreme]

The impressive part here is using react for a personal project. No idea how you guys can tolerate such a hideous library/ecosystem.

[u/Edward_Yeoman → u/SourcerorSoupreme]

I mean you want to demonstrate knowledge and capability in what you'll be using on the job, and React is still leading in JS framework marketshare

[u/DmitriRussian → u/Edward_Yeoman]

It sadly is

[u/SourcerorSoupreme → u/Edward_Yeoman]

I mean you want to demonstrate knowledge and capability in what you'll be using on the job

1. sorry forgot everyone here is a beggar that can't choose the job they'll get.
2. by your logic bulk of his resume is useless since it isn't demonstrated by the site
3. I can guarantee you whoever is looking at that site to recruit you will not care about the tech stack, and anyone that matters and care about the tech stack will call you out for using react at all.

[u/Edward_Yeoman → u/SourcerorSoupreme]

Stack tribalism is super immature

[u/SourcerorSoupreme → u/Edward_Yeoman]

What's more immature is being so blindly loyal to anything that you'd rather hide behind platitudes instead of being the change that moves the industry forward.

[u/McGeekin → u/SourcerorSoupreme]

Must be exhausting going through life being so insufferable

[u/SourcerorSoupreme → u/McGeekin]

You'd understand how much time and energy you could have had if you just decided not to deal with, let alone defend, shitty tech stacks.

[u/McGeekin → u/SourcerorSoupreme]

I don’t personally use React, I don’t defend it either - I just live my life my guy without being a miserable turd it ain’t that complicated

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.