Here is the website: https://overwatch-advanced-hero-details.wdlord.repl.co/

Here is an album with some screenshots at the intended resolution: https://imgur.com/a/PmnvSGD

I’m currently creating projects for a web design / development resume and decided to prototype something I’ve wanted in the game forever; a page in the hero gallery that shows hero stats like health, damage, and cooldown numbers. I wanted to keep it as simple to use as I could while still displaying lots of info in a coherent way, and I think that the final design does a pretty nice job!

I created pages for Genji, Brigitte, and D.Va to try to showcase the full range of the design with heroes with different health and abilities. I wanted to showcase that the design can handle even more complex heroes, like D.Va who has abilities for both the mech and pilot form.

The game obviously does not support a mobile phone resolution, but since this was a web development resume project I also made sure the website can be scaled down to a mobile phone and still work correctly, that is why I have included the Imgur albums in case any of you mobile users are curious about the full-sized design! (The web version also has some simple hover effects I am proud of for some of the buttons.)

Any feedback is of course welcome, and I hope you guys enjoy the thing I made!