TL;DR
Creating an interactive resume is as simple as copying the game and customising it, and as easy as publishing under your domain.
Intro
As a software engineer looking for new opportunities, have you ever asked yourself the following:
- How do I stand out amongst other applicants in my job search?
- How can I convey my skills, creativity, and personality to potential employers?
One of the answers to these questions is a fancy interactive resume that is engaging and fun to go through.
In this post, we will walk through the steps of building an interactive resume. By the way, here is my one:
The full source code is available on GitHub.
Okay, let's dive in!
1. Build a basic JavaScript game
Our interactive resume will be based on a Pokémon-like JavaScript game. So, the first thing is to watch this JavaScript Game Tutorial. It is very detailed and guides you through all the steps of building the game, i.e., creating a map, adding the content, and scripting characters' behaviour.
It doesn't matter if you like know JavaScript or not. The code is pretty simple and uses zero frameworks. Believe me, I'm not a front-end developer at all.
In the video description, you will find links to
- assets (the map, images, and audio);
- full source code on GitHub.
So, you will not need to type and create everything from scratch. Just watch the video to understand how things are organised, and then run the game locally from the source code.
2. Customise the map
Once you have the game up and running, it's time to customise it and turn it into a resume.
Think of a concept:
- How do you want the resume to look?
- How does the resume show your skills as a developer?
- How do you present the information: skills, work experience, education, etc.?
- Which characters are involved?
- Is there any story you want to tell?
You can google for interactive resumes and other simple games for ideas and inspiration. Here are some examples:
- Interactive resume of Robby Leonardi
- Interactive resume of Bruno Simon
- A pokemon-like project game where you level up by hacking your neighbor
- Make that fish swim!
When you decide on the high-level design of the resume, start building your map in Tiled. You can customise the map from the basic game you already have or build your one from scratch - just try and see what works best for you.
Here is a great resource of game assets that you can use: itch.io. There are tons of tilesets, backgrounds, sprites, icons, sound effects, music, and so on. Both free and paid.
So, for now, build the first draft version of the map and move on.
3. Customise the content
When the first version of the map is ready, start customising the content.
You will need to update the JS code with your own characters' map data, collisions' data, text, battle zones, etc.
Use your own characters, music, fonts, etc.
Make it work with your map.
If in doubt about how things are working and how to customise something, check out the video from point 1 again. You can find 95% of the answers there. And what about another 5%? You know the drill: GIYF.
4. Iterate, test, and iterate again
Alright, now you know how to build the map and customise the content so that everything works together. It's time for trial and error.
Try your ideas. Update the map, adapt content, and see if you like it. Iterate again and again until you are happy with the result.
It's easier said than done, yet try to adapt your resume to different browsers and screen sizes. You never know how a recruiter will look at your resume, so at least be aware of how it looks and behaves for a variety of clients.
5. Buy the domain name
Great, the hardest part is done! By now you have your interactive resume working locally. It's time to make it available to the world.
Find your favourite domain registrar and buy the domain name.
6. Publish with GitHub Pages
It's super easy to publish a static site like the resume with GitHub Pages. Just check out the docs.
For your domain name to work, you will need to go through the verification process. See Configuring a custom domain for more details.
Congratulations on creating your brand new and shiny interactive resume!
Conclusion
As you can see, creating an interactive resume is a mix of both simple and easy steps. If you want to catch potential employers' attention or are just curious and have some free time, then it is definitely worth the effort.
Dream your code, code your dream.
Top comments (0)