Gamified developer portfolio website

Welcome! 👋

Table of contents

• Overview
  • The challenge
  • How to setup the project
  • Screenshot
  • Links
• How to run
• How to build
• How to preview the build
• How to host
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Explore a 2D game environment that serves as a portfolio website.
• Interact with objects like a degree on the wall and a resume on the table.
• Experience the site seamlessly on both desktop and mobile devices.

How to setup the project

To set up the project locally, follow these steps:

1. Clone the repository using GitHub Desktop or Git Bash:

   git clone https://github.com/SartHak-0-Sach/2D-game_portfolio-website.git

2. Navigate to the project directory:

   cd 2D-game_portfolio-website

Screenshot

Links

• Solution URL: Link to this repo
• Live Site URL: Live site URL

How to run

Note: You need Node.js and npm installed on your machine.

npm install
npm run dev

How to build

npm run build

A dist folder should be created.

How to preview the build

npm run preview

How to host

Here is a guide: How to deploy the project

My process

Built with

• KaboomJS
• CSS
• Vite
• Canvas
• HTML

What I learned

Working on this project allowed me to learn and implement game development concepts using KaboomJS, and also enhanced my skills in creating interactive and responsive web designs.

This project helped me apply all of my JavaScript knowledge into game development, huge shoutout to awesome creators from freecodecamp who illustrate the tutorials so well. Following code snippet is one such example of using basic JS code application into game dev principles-

for (const layer of layers) {
    if (layer.name === "boundaries") {
      for (const boundary of layer.objects) {
        map.add([
          k.area({
            shape: new k.Rect(k.vec2(0), boundary.width, boundary.height),
          }),
          k.body({ isStatic: true }),
          k.pos(boundary.x, boundary.y),
          boundary.name,
        ]);

        if (boundary.name) {
          player.onCollide(boundary.name, () => {
            player.isInDialogue = true;
            displayDialogue(
              dialogueData[boundary.name],
              () => (player.isInDialogue = false)
            );
          });
        }
      }

      continue;
    }

Continued development

I plan to further develop my skills in game development and explore more advanced features of KaboomJS. Additionally, I aim to integrate more interactive elements into my web projects to make them engaging and fun for users.

Useful resources

• KaboomJS Documentation - This is a great resource to learn KaboomJS.
• MDN Web Docs - Comprehensive resource for HTML, CSS, and JavaScript documentation.

Author

Sarthak Sachdev

• Website - Sarthak Sachdev
• LeetCode - @sarthak_sachdev
• Twitter - @sarthak_sach69

Acknowledgments

Special thanks to the vast knowledge base available on YouTube and Stack Overflow, where I learned many of the concepts and got my doubts cleared.

Got feedback for me?

I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com.

If you liked this project, make sure to spread the word and share it with all your friends.

Happy coding! ☺️🚀