How I made my Resume, based on Mario Bros game
Tags: resume, cv, javascript, mario
Published: 2020-11-01 10:54:44

---
title: How I made my Resume, based on Mario Bros game
published: true
description: You can navigate my CV as if you were playing the videogame Mario Bros.
tags: resume, cv, javascript, mario  
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7aku2yftg80kew54pdw0.png
---

Hi there!

My name is Miquel Camps, I'm a freelance web developer based in Spain, you can find me on [twitter](https://twitter.com/vivirenremoto) and [linkedin](https://www.linkedin.com/in/miquelcamps/).

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

The the source code is on github 
[https://github.com/vivirenremoto/mariocv/](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](https://vivirenremoto.github.io/mariocv/public/img/mario.png?v=2 "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](https://dev.to/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](https://dev-to-uploads.s3.amazonaws.com/i/q8ttpe101vyr9rriuk2q.png "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**

- [How I made my CV, based on Age of Empires game](https://dev.to/vivirenremoto/how-i-made-my-cv-based-on-age-of-empires-game-1ade)
- [Ever seen a 360° resume?](https://dev.to/vivirenremoto/have-you-ever-seen-a-360-resume-hgl)