DEV Community

Aliaksandr Torkhau
Aliaksandr Torkhau

Posted on

From Rejection to Retrospective: Building a 2D Game CV (Part 1)

#cv #javascript #programming #gamedev

How I Turned My Job Search into a Game with Kaboom.js

The job search is tough — and let’s be honest, rejection is a frequent guest. After countless resumes and too many “we’ll keep your application on file” replies, I realized I needed a new strategy. I didn’t want to just wait around; I wanted to keep my skills sharp and show my passion for development in a way that stood out.
Despite having no prior experience with game engines, I decided to turn my job search into a creative project: a 2D interactive resume built with JavaScript.
The idea was simple but exciting: a 2D game that acts as my CV. The player controls a character (me) who moves through different scenes of my life. Think of it as a personal adventure map — each area, from a digital university campus to a simulated office, hides details about my professional journey. By exploring and interacting with the environment, the player uncovers my skills and experience.
This project isn’t just about a resume. It’s a portfolio piece that demonstrates my JavaScript skills and my passion for creating unique, interactive experiences.
The journey begins with the building blocks. While the game itself is the main attraction, a great project starts with a solid foundation. For this game, I chose Kaboom.js — a fun, simple, and powerful JavaScript game engine. This was a new experience for me, and I was excited to see what I could create.

Building the Foundation: A Game from Scratch

1. Setting Up the Project

The first step was to set up the environment.
I chose Vite for its lightning-fast setup and instant hot module replacement, which is a game-changer for development. To maintain code quality from the start, I integrated ESLint.
With the basics in place, I installed the main dependency — Kaboom.js, the game engine:

npm install kaboom
Enter fullscreen mode Exit fullscreen mode

2. Creating the HTML and CSS

With the dependencies ready, it was time to give the game a home: a simple HTML file with a <canvas> element for rendering, and a CSS file for styling.

index.html (the entry point):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="./CV.png" />
    <link rel="stylesheet" href="index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Torkhau CV</title>
  </head>
  <body>
    <div id="app">
      <canvas id="game"></canvas>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

index.css (basic styling):

@font-face {
  font-family: 'monogram';
  src: url('/monogram.ttf');
}

body {
  font-family: 'monogram';
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

3. The Game Manager & Project Structure

With the canvas and initial setup ready, the next step was to define a central class that ties everything together. I created a GameManager, which will later be responsible for initializing rooms, handling the player, and managing updates. For now, it’s just a clean skeleton — no gameplay logic yet.
Entry point (src/main.js):

import { GameManager } from './models';

(async () => {
  const game = new GameManager();
  await game.start();
})();
Enter fullscreen mode Exit fullscreen mode

Game manager skeleton (mirrors my real architecture, but methods are left as TODOs for the next parts) (src/modules/gameManager.model.js):

import { kCtx } from '../core';
// In the real project, Player, RoomManager, etc. will be imported here.

export class GameManager {
  #player;
  #playerMover;
  #roomManager;

  constructor() {
    // TODO: Create Player, PlayerMover, RoomManager
    // and initialize the ZoomController
  }

  async start() {
    // TODO: Load rooms and go to the starting scene
  }
}
Enter fullscreen mode Exit fullscreen mode

To keep Kaboom.js setup separate from gameplay logic (src/core/const .js):

export const background = [0, 153, 219];
Enter fullscreen mode Exit fullscreen mode

and (src/core/kCtx.js):

import kaboom from 'kaboom';
import { background } from './const';

export const kCtx = kaboom({
  global: false,
  canvas: document.getElementById('game'),
});

kCtx.setBackground(...background, 0.3);
// Asset loading (sprites, levels) will be added in Part 2.
Enter fullscreen mode Exit fullscreen mode

At this point, the project structure looks like this (only the parts used so far):

src/
  core/
    const.js
    kCtx.js
  modules/
    gameManager.model.js
  main.js
Enter fullscreen mode Exit fullscreen mode

This keeps things tidy:

  • core/ holds engine setup and constants,
  • modules/ will store gameplay logic (like the GameManager),
  • main.js is the entry point.

This clean separation ensures that as the game grows, each responsibility — player movement, scene transitions, zooming — has its own place in the architecture. In the next part, we’ll start bringing this skeleton to life by building the game world layouts and adding interactive elements.

Wrapping Up Part 1

So far, I’ve:

  • Set up the project with Vite and Kaboom.js
  • Built the HTML/CSS shell
  • Added a skeleton GameManager and a shared Kaboom context
  • Organized the code into clear directories

In Part 2, I’ll design layouts with Tiled, load sprites, and turn empty scenes into playable spaces.
The complete source code is available on my GitHub Repository.
Feel free to explore it, play the game, and let me know what you think.
💼 Since this project is also part of my job search, I’m open to opportunities as a JavaScript/Frontend/Backend/Full Stack/ Developer.
💬 I welcome constructive feedback — on both the article and the code.
🙏 This is my first post on this platform, so please be gentle (but honest) with your comments!

Top comments (0)