DEV Community

loading...
Cover image for How I made my Resume, based on Mario Bros game

How I made my Resume, based on Mario Bros game

vivirenremoto profile image Miquel Camps Updated on ・3 min read

Hi there!

My name is Miquel Camps, I'm a freelance web developer based in Spain, you can find me on twitter and linkedin.

You can visit the Resume website here
https://vivirenremoto.github.io/mariocv/en.html

The the source code is on github
https://github.com/vivirenremoto/mariocv/

Controls

You can move Mario to the left or to the right using keyboard arrows on desktop or the arrows buttons on mobile.

What I used

  • Graphics
  • Music and sounds from youtube videos
  • HTML
  • CSS
  • jQuery (to write js code with less pain)
  • Google fonts

The stages

1- Start with the basics
2- Little details
3- Pixel perfect images
4- Polish the code
5- What have been the most difficult things for me?
6- What other problems I found?

Start with the basics

On the screen there are 5 objects:

  • Mario
  • Sky (clouds + mountains)
  • Floor
  • Information boxes
  • Arrow buttons

The steps to make this from zero are:
1- Write the HTML
2- Write the CSS
3- Write the Javascript and cry
4- Test, test, test
5- Polish the code

Little details

Mario object is a simple IMG html tag and the src value is a transparent image, yes as you read, the image is really applied using the CSS attribute background.

To create the Mario moving animation there is a sprite image with 3 frames like this.
alt Mario

To change one frame to another, I'm using the attribute "background-position-x" and javascript:

  • Frame 1, background-position-x: 0px;
  • Frame 2, background-position-x: -65px;
  • Frame 3, background-position-x: -130px;

To change the perspective of moving Mario to left or right, I'm using the same image file, but I'm applying the CSS attribute "-webkit-transform":

  • Left, -webkit-transform:scaleX(-1);
  • Right, -webkit-transform:scaleX(1);

Pixel perfect images

For the background image i'm using a little image that looks a little bit blurry on desktop.

Victor @olivicmic suggested me to add the CSS attribute to the background "image-rendering: crisp-edges" to get a crispy pixels. Wow! This little tweak makes the difference.

Thank you Victor!

alt Background

Polish the code

In the first version there is a lot of duplicate code in the user controls when user press the keys or click the arrow buttons, so I put the code in functions.

What have been the most difficult things for me?

All the javascript interaction, dealing with time intervals, the controls on desktop and mobile.

What other problems I found?

Some browsers like Google Chrome not allow to autoplay music, so I have to play the music when users starts some interaction, for example click the screen, press the keys or click the arrow buttons.

Final message

I hope you like it, get some inspiration and it would be great if you can share it to your family and friends who ever play once Mario Bros to bring back some good memories.

Disclaimer

All content on this website, including articles, artwork, screen shots, graphics, logos, digital downloads and other files, is the property of Nintendo, unless owned by a third party, and is protected by German and international copyright, trademark and other intellectual property laws. Trademarks and copyrights for third-party games and characters are owned by the companies that market or license those products.

Take a look at my other resumes

Discussion (20)

pic
Editor guide
Collapse
amrutaranade profile image
Amruta Ranade

This is so cool! Loved it! Two suggestions:

  1. Correct typo ("Portafolio" > "Portfolio")
  2. You might want to add a Skills section. We are hiring at our company and I'd love to refer you if you'd like but I couldn't figure out your skillset from your resume.
Collapse
vivirenremoto profile image
Miquel Camps Author

Thank you Amruta for your feedback! i made some changes :)

Collapse
thefern profile image
Fernando B 🚀

Portafolio isn't a typo just Spanish kicking in. 😁

Collapse
amrutaranade profile image
Amruta Ranade

Yep..I thought about it and checked the resume again to see if the rest of the text was in Spanish. But the rest of it was in English, so it seems like a typo in context. Hence the comment :)

Collapse
asif0228 profile image
Asif Uddin

Awesome
Loved it

Collapse
vivirenremoto profile image
Miquel Camps Author

thank you Asif for your comment :)

Collapse
nqhuyd profile image
Louis

Great work. I have one suggestion that when mario reach the end can it go back to the start point or any end screen for that. It would be great experiment if you enhance that. However still awesome job and your sharing is so amazing

Collapse
vivirenremoto profile image
Miquel Camps Author • Edited

Thanks Louis, i added your suggestion, can you try again? :) thanks again for your feedback

Collapse
chetanjk profile image
Chetan

Would be exiting to see a jump there

Collapse
vivirenremoto profile image
Miquel Camps Author

thats a cool idea to consider, thank you!

Collapse
olivicmic profile image
Victor O

consider adding image-rendering: pixelated; to #scroll for nice crisp pixels

Collapse
vivirenremoto profile image
Miquel Camps Author • Edited

hello victor, i applied your suggestion and wow! it looks better, thank you!

i tried to put the pixelated value but chrome didnt recognize it, but i tried with crisp-eges and it works.

i wrote a new point in the article "pixel perfect image" giving you the attribution :)

Collapse
jbalagnaranin profile image
Jérémie Balagna-Ranin

Amazing ! I love the idea :D

Another suggestion for improvement: maybe add a "stationary" frame when Mario doesn't move. It'll look more natural ;)

Otherwise it's already a really beautiful work ;)

Collapse
vivirenremoto profile image
Miquel Camps Author

Hi Jérémie,

it's a nice suggestion and i think that's not hard to do it, it's just a time out interval that changes Mario to the neutral position if you are not pressing any key in 5 seconds for example.

But in this case I prefer to no do it, to keep the code simple as posible.

By the way i appreciate your feedback, take care :)

Collapse
ije profile image
X.

cooooool!

Collapse
vivirenremoto profile image
Collapse
zippytyro profile image
Shashwat Verma

wow, man this is really amazing.

Collapse
vivirenremoto profile image
Miquel Camps Author

Thank you Shashwat for your comment, i really appreciate that 🙂

Collapse
debrakayeelliott profile image
Debra-Kaye Elliott

This is very cool!

Collapse
vivirenremoto profile image