DEV Community

Cover image for How I made my CV, based on Age of Empires game
Miquel Camps
Miquel Camps

Posted on • Updated on

How I made my CV, based on Age of Empires game

Hi there!

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

I think I'm not the best programmer to give some advice, my code is not clean at all, but maybe you can learn something new of my two day struggling to make a playable CV.

The website is
https://vivirenremoto.github.io/ageofcv/en.html

Information

The map is randomly generated, in each visit it can change the environment, weather, position of trees, buildings, music, etc.

You can move the villager around the map with the cursor as the current game and if you want you can use the keyboard arrows too.

The Idea

I've to admit that the first moment my idea was not to make a CV, I wanted to replicate the user interface of Age of Empires with web technologies just for fun.

What I used

  • Graphics
  • Music and sounds from youtube videos
  • HTML
  • CSS
  • jQuery to write less code
  • Google fonts
  • Javascript library to make the snow effect from Trent Willis

The stages

1- Start with the basics
2- Little details
3- Responsive design
4- Polish the code
5- Get some feedback and improve it

Start with the basics

First thing I put on the map was the villager a simple DIV on the BODY tag, a plain image without fancy walking animations.

Then I add a DIV that is above all the DIV layers with a click event to move the villager arround the screen.

Then I put one tree, one house, one university, and so on..

Finally I put the informative modal that appears when the villager is over any building.

The best advice I can give is go step by step, try and failure, change and reload, don't give up if it doesn't work at the first time.

Little details

Once the basic interaction is done, the first detail I added was the eagle that flies from the top left or right to bottom of the screen.

Then I made the random environment, weather, music, sounds.. to give some life and personality to the plain website.

Did you notice when you move the villager there are two kind of sounds?

Responsive design

The CV website was made to work in desktop mode and mobile devices in vertical mode.

The main differences is the position of buildings that I will talk later in this post, the size of the buildings and the number of elements like trees and snow flakes that are smaller or lower in mobile devices.

Polish the code

I know the code it still can be improved by far, basically I remove some duplicate code.

1- For the interaction of each building I was using four "if" conditions then I've changed to one "while" and just one "if", I think its more simple and easy to mantain.

2- At the begining I was printing five trees individualy instead using a loop "for", so by this way is easy to print 10 or 20 trees, i've only to change one variable.

What have been the most difficult things for me?

At the begining the buildings can appear in any position of the screen, sometimes one building can appear above another one and it was a complete mess.

So i made virtual grid with an array, in desktop the screen is divided by two columns and two rows, in mobile is divided by one column and four rows proportional to the screen size.

All the buildings appers in a random position inside each cell of the virtual grid.

What other problems I found?

This is inevitable, you can't try your thing in each device in the world, as a Android user I don't have any iPhone, so someone with an iOS device told me that in Safari browser the images doesnt work, the solution was easy, I replace the WEBP images to PNG and GIF images instead.

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 Age of empires to bring back some good memories.

Disclaimer

The Copyright policy sets out information and rules for respecting Microsoft's copyrights and trademarks in its works. In order to reproduce any of Microsoft's content, including images, characters, storylines, or text, we must have Microsoft's clear permission to do so.

Take a look at my other resumes

Top comments (37)

Collapse
 
ksaaskil profile image
Kimmo Sääskilahti • Edited

This is so awesome! I had a similar idea of using Phaser to create a pixel art RPG, where you would talk to villagers to read my CV. But it was more work than I thought so I ended up just using reveal.js to create my CV :)

Collapse
 
vivirenremoto profile image
Miquel Camps

thank Kimmo! your idea sounds really good too, BTW i'm not sure if this kind of CV can help if you are not a game developer, in my case i'm not but it was a challange and fun weekend project.

this the first time I hear about Phaser and reveal.js i will take a look at them, thanks for sharing

Collapse
 
phantas0s profile image
Matthieu Cneude • Edited

That's great work. But I want to be a monk. They are funnier.

It's Age of Kings, by the way, or Age of Empires 2. It's not the same. #purist

Collapse
 
vivirenremoto profile image
Miquel Camps

thanks Matthieu! i added a "wololo" mode check it out :)
vivirenremoto.com/aoe/en.php?wololo

Collapse
 
phantas0s profile image
Matthieu Cneude

This is the most beautiful thing I've ever seen!

Collapse
 
tylergebhard profile image
Tyler Gebhard

wicked.

Collapse
 
vivirenremoto profile image
Miquel Camps

Wololo !

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nicely done! Now I want to play my copy of Age of Empires 2 Definitive Edition 😁

Collapse
 
vivirenremoto profile image
Miquel Camps

Yessss! Thats great to know :) thanks

Collapse
 
fkrasnowski profile image
Franciszek Krasnowski

Pure beauty

Collapse
 
vivirenremoto profile image
Miquel Camps

Thanks Franciszek! it's great to see people arround the world who values the work of others :)

Collapse
 
____marcell profile image
Marcell Cruz

This is so great

Collapse
 
vivirenremoto profile image
Miquel Camps

thanks Marcell, i really appreciate it :)

Collapse
 
norrova profile image
Norro valentin

Awesome bro ! nice work :D

Collapse
 
vivirenremoto profile image
Miquel Camps

Thanks Norro for your comment! :)

Collapse
 
djtai profile image
David Taitingfong

Wow, this is creative! 👍 I'm getting incredibly nostalgic now too, lol. Great job on this!

Collapse
 
vivirenremoto profile image
Miquel Camps

Thanks David :)

Collapse
 
ankitsamanta15 profile image
Ankit Samanta

Extremely well done. Now "how do you turn this on" if you know what I mean.

Collapse
 
vivirenremoto profile image
Miquel Camps • Edited

hi Ankit! are you ready for this?
vivirenremoto.com/aoe/en.php?howto...

Collapse
 
alexandrusimandi profile image
Alexandru Simandi

please add a seizure warning to the wololo

Collapse
 
vivirenremoto profile image
Miquel Camps

Sorry! I made the wololo guy slower i think It was too fast, too furious 😅