├── dist
├── map.png
├── monogram.ttf
├── spritesheet.png
├── index.html
└── map.json
├── public
├── map.png
├── monogram.ttf
├── spritesheet.png
└── map.json
├── developerportfoliothumbnail.png
├── newdeveloperportfoliothumbnail.png
├── vite.config.js
├── src
├── kaboomCtx.js
├── utils.js
├── constants.js
└── main.js
├── .gitignore
├── package.json
├── HOW_TO_DEPLOY.MD
├── LICENSE
├── README.MD
└── index.html
/dist/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/dist/map.png
--------------------------------------------------------------------------------
/public/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/public/map.png
--------------------------------------------------------------------------------
/dist/monogram.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/dist/monogram.ttf
--------------------------------------------------------------------------------
/dist/spritesheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/dist/spritesheet.png
--------------------------------------------------------------------------------
/public/monogram.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/public/monogram.ttf
--------------------------------------------------------------------------------
/public/spritesheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/public/spritesheet.png
--------------------------------------------------------------------------------
/developerportfoliothumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/developerportfoliothumbnail.png
--------------------------------------------------------------------------------
/newdeveloperportfoliothumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JSLegendDev/2d-portfolio-kaboom/HEAD/newdeveloperportfoliothumbnail.png
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 |
3 | export default defineConfig({
4 | base: "./",
5 | build: {
6 | minify: "terser",
7 | },
8 | });
9 |
--------------------------------------------------------------------------------
/src/kaboomCtx.js:
--------------------------------------------------------------------------------
1 | import kaboom from "kaboom";
2 | import { scaleFactor } from "./constants";
3 |
4 | export const k = kaboom({
5 | global: false,
6 | touchToMouse: true,
7 | canvas: document.getElementById("game"),
8 | debug: false, // set to false once ready for production
9 | });
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "2d-portfolio-kaboom",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "devDependencies": {
12 | "terser": "^5.27.1",
13 | "vite": "^5.1.0"
14 | },
15 | "dependencies": {
16 | "kaboom": "^3000.1.17"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/HOW_TO_DEPLOY.MD:
--------------------------------------------------------------------------------
1 | # How to deploy the project (on GitHub pages)
2 |
3 | There are 2 methods.
4 |
5 | ## Method 1: Using Github Actions
6 |
7 | 1. Update `vite.config.js` base property to match the name of the repository. For example, `base: "/2d-portfolio-kaboom"`
8 |
9 | 2. Navigate to the repository settings on GitHub and configure GitHub pages to use GitHub Actions by creating a custom workflow. Read [this](https://vitejs.dev/guide/static-deploy#github-pages) for more info.
10 |
11 | 3. After setting up the custom workflow, go to the Actions tab within the repository. From there, select the workflow you created in step 2 and trigger the deployment process.
12 |
13 | 4. The portfolio should now be live and accessible through GitHub pages.
14 |
15 | ## Method 2: Using Another Repository
16 |
17 | 1. Run `npm run build`.
18 | 2. Take the resulting content of the `dist` folder and put it in a new GitHub repository.
19 | 3. Activate GitHub pages in your new repository's settings.
20 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 JSLegend
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
1 | # Developer portfolio that's a 2D game
2 |
3 | Inspired by the many creative 3D developer portfolios, I create one that's 2D instead.
4 | This is meant as a template that you can use to build your own. It works on both desktop
5 | and mobile.
6 |
7 | 
8 |
9 | Live Demo : https://jslegenddev.github.io/portfolio/
10 |
11 | Watch the tutorial I made on how to build this on YouTube : https://www.youtube.com/watch?v=gwtfWORCN0U
12 |
13 | I used a modified version of this original tileset (Giving credit where it's due) : https://momen-games.itch.io/happy-la-v2-ts
14 |
15 | # How to run
16 |
17 | Note: You need `Node.js` and `npm` installed on your machine.
18 |
19 | `npm install` then `npm run dev`
20 |
21 | # How to build
22 |
23 | `npm run build` and a dist folder should be created.
24 |
25 | # How to preview the build
26 |
27 | `npm run preview`
28 |
29 | # How to host?
30 |
31 | Here is a [guide](HOW_TO_DEPLOY.MD).
32 |
33 | # NEW! I made a new developer portfolio as a 2D game!
34 |
35 | 
36 |
37 | Check out the new tutorial here : https://www.youtube.com/watch?v=OejpBl2s9OY
38 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | export function displayDialogue(text, onDisplayEnd) {
2 | const dialogueUI = document.getElementById("textbox-container");
3 | const dialogue = document.getElementById("dialogue");
4 |
5 | dialogueUI.style.display = "block";
6 | let index = 0;
7 | let currentText = "";
8 | const intervalRef = setInterval(() => {
9 | if (index < text.length) {
10 | currentText += text[index];
11 | dialogue.innerHTML = currentText;
12 | index++;
13 | return;
14 | }
15 |
16 | clearInterval(intervalRef);
17 | }, 1);
18 |
19 | const closeBtn = document.getElementById("close");
20 |
21 | function onCloseBtnClick() {
22 | onDisplayEnd();
23 | dialogueUI.style.display = "none";
24 | dialogue.innerHTML = "";
25 | clearInterval(intervalRef);
26 | closeBtn.removeEventListener("click", onCloseBtnClick);
27 | }
28 |
29 | closeBtn.addEventListener("click", onCloseBtnClick);
30 |
31 | addEventListener("keypress", (key) => {
32 | if (key.code === "Enter") {
33 | closeBtn.click();
34 | }
35 | });
36 | }
37 |
38 | export function setCamScale(k) {
39 | const resizeFactor = k.width() / k.height();
40 | if (resizeFactor < 1) {
41 | k.camScale(k.vec2(1));
42 | } else {
43 | k.camScale(k.vec2(1.5));
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | export const scaleFactor = 4;
2 |
3 | export const dialogueData = {
4 | pc: `This is my PC. I work mostly in JavaScript/TypeScript these days.
5 | I've made a couple of games in that language. I also like Golang and Python. Anyway regardless of the language, I just like programming.
6 | Here is my Github!`,
7 | "cs-degree": `This is my CS degree. I hung it on the wall because I'm proud of it. It was a very theoretical degree but I think it gave me a good foundation.`,
8 | "sofa-table": `That's my sofa. I like to relax here and watch YouTube.
9 | I also make game programming tutorials on YouTube. Go sub to my channel! (If you like the content)
10 | You'll learn how I built this portfolio you're currently playing through!`,
11 | tv: `That's my TV. I've been watching tech youtubers a lot recently like :
12 | Theprimeagen, Theo - t3.gg,
13 | PirateSoftware (sometimes) and Melkey!`,
14 | bed: `This where I sleep. Great ideas comes when I'm lying on my bed. When an idea strikes, I often have to write it down or else I won't be able to sleep because my mental energy is consumed by it.`,
15 | resume: `This is my desk and on it is my resume. Check it out?
16 | Contact me at jslegend@protonmail.com if you have any interesting job opportunities!`,
17 | projects: `Info about this portfolio : It's made with the Kaboom.js library which is a library for making games in JavaScript.
18 | Text is rendered with HTML/CSS. So the textbox you're currently reading is not rendered within canvas. Learn more about how to use
19 | Kaboom.js by watching some of my tutorials here.`,
20 | library: `There are a lot of programming books on my shelves. There is even one in French (I also speak French btw).
21 | I probably only read one of them. Who else compulsively buys technical books without ever finishing them?`,
22 | exit: `If you want to exit JSLegendDev's portfolio, just close the tab.`,
23 | };
24 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |