6 ms·

A developer portfolio as a 2D top-down walking simulator

76 points by JSLegendDev 3y ago

deleted 3y ago
[deleted]
stoniejohnson 3y ago
This is cool! I immediately tried to use my arrow keys to move around though.
- LorenDB 3y ago
  Agreed, lack of keyboard support is immensely frustrating.
gnabgib 3y ago
Given your HN name and the Github name.. I think this is your own site? You might want to change the `<title>` block to something other than 'Vite App'. Has anything changed since your Show HN submission 5 days ago? https://news.ycombinator.com/item?id=39659471 https://news.ycombinator.com/item?id=39659471
- bbor 3y ago
  :( this is a really cute post, fingers crossed it doesn’t get removed for this reason. Tho rules are rules. EDIT: I vaguely remember “you can repost your own stuff within reason” tho perhaps? All I can find is this which I’d personally muse doesn’t exclude this post: Please don't use HN primarily for promotion. It's ok to post your own stuff part of the time, but the primary use of the site should be for curiosity. Ok I gotta get back to work, done nitpicking HN moderation policies that are out of my knowledge or control!
jesperwe 3y ago
Two suggestions: - Make <esc> close dialogs - Don't repeatedly show the dialogs already shown just because user touches same object again
- deleted 3y ago
  [deleted]
gs17 3y ago
It's a neat idea but I think you need to make the actual portfolio pieces more obvious (e.g. have them animated, glowing, or just more brightly colored to stand out more). I'd also recommend a way to get the resume/CV directly without "playing", even if you also make it more visible. I, personally, would prefer tapping/clicking to move to the location you tapped, with arrow keys/WASD to move otherwise. It says "tap/click to move" but clicking is not actually how you're supposed to move. It also would feel better IMO to have the text pop up when you click on something specifically or hit some key (so walking by your diploma doesn't take you out of motion multiple times). This could also help clear up things like the desk with two different interactions. (also, set the page title!)
kylecazar 3y ago
This is actually really smooth on mobile. Nice work.
aaroninsf 3y ago
Keyboard control pls. ASDF or IJKL or arrows or all of those.
jmole 3y ago
based on this, i would not be hiring you as a game dev.
- jlnho 3y ago
  Based on your comment, I wouldn't want to work for you.
- deleted 3y ago
  [deleted]
hackan 3y ago
It's pretty cool, but where's the portfolio? :P I was expecting to find like diff projects represented by things in the game, but couldn't find any. The idea is rad for sure, so keep on it!
deleted 3y ago
[deleted]
joshuamcginnis 3y ago
I like this. One of the issues I'm hearing from the SWE hiring community is that a lot developer applicants are too generic. Here, the developer managed to combine a passion and niche (gaming) with a skill (javascript development) and has taken the time to build demonstrable projects, including an engaging website and YouTube channel. There's a lot here that can be emulated for other developers looking to differentiate themselves from the mass of generalists.
- JSLegendDev 3y ago
  Thanks! I'm actually looking for a job. So if anyone has any opportunities feel free to contact me at jslegend[at]protonmail.com [at === @]. I'll then send you an actual CV with my skill and experience. I'm looking for fullstack or frontend roles and I'm based in Canada. I created this portfolio website for my YouTube channel. That's why I haven't put my info there. It's meant more as a template. If you're interested in learning how I built this project: You can watch the video tutorial here : https://www.youtube.com/watch?v=gwtfWORCN0U https://www.youtube.com/watch?v=gwtfWORCN0U Or look at the source code directly : https://github.com/JSLegendDev/2d-portfolio-kaboom https://github.com/JSLegendDev/2d-portfolio-kaboom
numtel 3y ago
Nice, a few years ago I tried making a game engine for maps made using Tiled that has a very similar look, slightly different controls though. https://numtel.github.io/webgl-isometric/ https://numtel.github.io/webgl-isometric/
bulbosaur123 3y ago
Cute, but a bit gimmicky and too basic.
turtleyacht 3y ago
Looking around, developer is bilingual in French and has video tutorials for Kaboom.js: https://youtube.com/@jslegenddev https://youtube.com/@jslegenddev Resume link, but it's to a template currently [pdf]: https://github.com/JSLegendDev/Resume/blob/main/JSLegend%20Resume-1.pdf https://github.com/JSLegendDev/Resume/blob/main/JSLegend%20R...
geuis 3y ago
Love this. And that it works so well on mobile web. Some suggestions: Touch controls are sensitive. Add some kind of specific control pad area instead of the entire screen. Kept running into the same objects over and over and getting the same dialogs. Don't show the entire dialogs again and again. Provide some kind of prompt like "Read?" Hitting "Close" should stop the dialog rendering immediately vs waiting for it to finish every time.
- JSLegendDev 3y ago
  Thanks for the feedback!
molly0 3y ago
This reminds me of my first real dev job, 10y ago, making small facebook games with https://phaser.io https://phaser.io it was actually kind of fun now that I think back.
nvader 3y ago
A small piece of feedback: the CS degree's description says, "I hanged it on the wall"--the past participle for "to hang" should be "hung"[0]. So, the sentence should read, "I hung it on the wall..." [0] Unless of course you're talking about another type of hanging: https://www.merriam-webster.com/grammar/hung-or-hanged https://www.merriam-webster.com/grammar/hung-or-hanged
- JSLegendDev 3y ago
  Thanks for catching this. Will correct it ASAP.
- pesfandiar 3y ago
  Another small piece of feedback: Even though they're both "hung", the correct term for it is the "past tense" or "past simple". It'd be past participle if it was "I've hung it on the wall". I understand the distinction between the past tense and the past participle is fading away in informal American English ("I got my hair did" anyone?), but it's still quite odd to see them confused in writing.
  - nvader 3y ago
    Thanks!
lxe 3y ago
I just want wasd controls. Clicking around and then getting surprised by various speech bubbles in not good UX.
- adamredwoods 3y ago
  wasd or arrows. This would also show me that you understand a11y and why it's important to have alternative ways to access FE components. Overall this a neat way to gain portfolio traction!
- T-zex 3y ago
  ..or hjkl if we are at it. Asking for my friend (primeagen)
bbor 3y ago
This is adorable and amazing. Shoutout to the guy who did a similar thing years ago with Three.js and a little monster truck. If anyone remembers what I’m talking about please link it! Pops up here every now and again. Some things I love: - The content is hidden but every object is interactable with a cute message. This is a great way to make me want to keep “playing” without getting frustrated. Great principles of Consistency and Discoverability. - The graphics are perfect, and fit well on a phone. Did you use AI or maybe buy this pixel art? Either way its minimalism adds an air of professionalism IMO. - The messages are just adorable. What I didn’t like: - As others have said, needs a header for shortcut navigation. What if we’re sitting in an interview and I’m just trying to pull up your resume? - Needs some indications right at the start showing what’s possible and which direction it lies in. I know I complemented the gamification/scavenger hunt aspect, but I think a little practical consideration for the less hacker-inclined would be nice. Maybe in-universe signs, or a short welcome message? - the computer doesn’t really look like a computer. Where’s the chair?? - There’s a weird pause before it prints any links to the message block. A tiny blemish on a very satisfying UI Long story short, well done! I’m sure this will kill on YouTube. Please share any ideas you had on the way to this so we can (politely) steal them!!
- JSLegendDev 3y ago
  Thanks for the feedback!
erkk 3y ago
This is amazing, I love it! I've always wanted to delve into things like this as a web developer. Would you mind sharing the tools you used to build this and experience you had? Or even better, the repo?! Good stuff!
kebman 3y ago
Somehow made me think of The Union Demo (1989) for the Atari ST, specifically the Main Menu with the walk-around side scroller where you selected doors to see the various sub-demos.^1 Great work! [1]: Example video https://youtu.be/cVDr-eFtPoU https://youtu.be/cVDr-eFtPoU
juris 3y ago
Very fun! Did my best to break out of bounds, heh. Only bug I found is if you hold down the left mouse button while you've brought up a dialog box, the character continues to walk afterwards (usually into the same object and summoning the same dialog box). Cheers!

76 points by JSLegendDev 3y ago

deleted 3y ago

[deleted]

stoniejohnson 3y ago

This is cool! I immediately tried to use my arrow keys to move around though.

LorenDB 3y ago
Agreed, lack of keyboard support is immensely frustrating.

gnabgib 3y ago

Given your HN name and the Github name.. I think this is your own site? You might want to change the `<title>` block to something other than 'Vite App'. Has anything changed since your Show HN submission 5 days ago? https://news.ycombinator.com/item?id=39659471 https://news.ycombinator.com/item?id=39659471

bbor 3y ago
:( this is a really cute post, fingers crossed it doesn’t get removed for this reason. Tho rules are rules. EDIT: I vaguely remember “you can repost your own stuff within reason” tho perhaps? All I can find is this which I’d personally muse doesn’t exclude this post: Please don't use HN primarily for promotion. It's ok to post your own stuff part of the time, but the primary use of the site should be for curiosity. Ok I gotta get back to work, done nitpicking HN moderation policies that are out of my knowledge or control!

jesperwe 3y ago

Two suggestions: - Make <esc> close dialogs - Don't repeatedly show the dialogs already shown just because user touches same object again

deleted 3y ago
[deleted]

gs17 3y ago

It's a neat idea but I think you need to make the actual portfolio pieces more obvious (e.g. have them animated, glowing, or just more brightly colored to stand out more). I'd also recommend a way to get the resume/CV directly without "playing", even if you also make it more visible. I, personally, would prefer tapping/clicking to move to the location you tapped, with arrow keys/WASD to move otherwise. It says "tap/click to move" but clicking is not actually how you're supposed to move. It also would feel better IMO to have the text pop up when you click on something specifically or hit some key (so walking by your diploma doesn't take you out of motion multiple times). This could also help clear up things like the desk with two different interactions. (also, set the page title!)

kylecazar 3y ago

This is actually really smooth on mobile. Nice work.

aaroninsf 3y ago

Keyboard control pls. ASDF or IJKL or arrows or all of those.

jmole 3y ago

based on this, i would not be hiring you as a game dev.

jlnho 3y ago
Based on your comment, I wouldn't want to work for you.
deleted 3y ago
[deleted]

hackan 3y ago

It's pretty cool, but where's the portfolio? :P I was expecting to find like diff projects represented by things in the game, but couldn't find any. The idea is rad for sure, so keep on it!

deleted 3y ago

[deleted]

joshuamcginnis 3y ago

I like this. One of the issues I'm hearing from the SWE hiring community is that a lot developer applicants are too generic. Here, the developer managed to combine a passion and niche (gaming) with a skill (javascript development) and has taken the time to build demonstrable projects, including an engaging website and YouTube channel. There's a lot here that can be emulated for other developers looking to differentiate themselves from the mass of generalists.

JSLegendDev 3y ago
Thanks! I'm actually looking for a job. So if anyone has any opportunities feel free to contact me at jslegend[at]protonmail.com [at === @]. I'll then send you an actual CV with my skill and experience. I'm looking for fullstack or frontend roles and I'm based in Canada. I created this portfolio website for my YouTube channel. That's why I haven't put my info there. It's meant more as a template. If you're interested in learning how I built this project: You can watch the video tutorial here : https://www.youtube.com/watch?v=gwtfWORCN0U https://www.youtube.com/watch?v=gwtfWORCN0U Or look at the source code directly : https://github.com/JSLegendDev/2d-portfolio-kaboom https://github.com/JSLegendDev/2d-portfolio-kaboom

numtel 3y ago

Nice, a few years ago I tried making a game engine for maps made using Tiled that has a very similar look, slightly different controls though. https://numtel.github.io/webgl-isometric/ https://numtel.github.io/webgl-isometric/

bulbosaur123 3y ago

Cute, but a bit gimmicky and too basic.

turtleyacht 3y ago

Looking around, developer is bilingual in French and has video tutorials for Kaboom.js: https://youtube.com/@jslegenddev https://youtube.com/@jslegenddev Resume link, but it's to a template currently [pdf]: https://github.com/JSLegendDev/Resume/blob/main/JSLegend%20Resume-1.pdf https://github.com/JSLegendDev/Resume/blob/main/JSLegend%20R...

geuis 3y ago

Love this. And that it works so well on mobile web. Some suggestions: Touch controls are sensitive. Add some kind of specific control pad area instead of the entire screen. Kept running into the same objects over and over and getting the same dialogs. Don't show the entire dialogs again and again. Provide some kind of prompt like "Read?" Hitting "Close" should stop the dialog rendering immediately vs waiting for it to finish every time.

JSLegendDev 3y ago
Thanks for the feedback!

molly0 3y ago

This reminds me of my first real dev job, 10y ago, making small facebook games with https://phaser.io https://phaser.io it was actually kind of fun now that I think back.

nvader 3y ago

A small piece of feedback: the CS degree's description says, "I hanged it on the wall"--the past participle for "to hang" should be "hung"[0]. So, the sentence should read, "I hung it on the wall..." [0] Unless of course you're talking about another type of hanging: https://www.merriam-webster.com/grammar/hung-or-hanged https://www.merriam-webster.com/grammar/hung-or-hanged

JSLegendDev 3y ago
Thanks for catching this. Will correct it ASAP.
pesfandiar 3y ago
Another small piece of feedback: Even though they're both "hung", the correct term for it is the "past tense" or "past simple". It'd be past participle if it was "I've hung it on the wall". I understand the distinction between the past tense and the past participle is fading away in informal American English ("I got my hair did" anyone?), but it's still quite odd to see them confused in writing.
- nvader 3y ago
  Thanks!

lxe 3y ago

I just want wasd controls. Clicking around and then getting surprised by various speech bubbles in not good UX.

adamredwoods 3y ago
wasd or arrows. This would also show me that you understand a11y and why it's important to have alternative ways to access FE components. Overall this a neat way to gain portfolio traction!
T-zex 3y ago
..or hjkl if we are at it. Asking for my friend (primeagen)

bbor 3y ago

This is adorable and amazing. Shoutout to the guy who did a similar thing years ago with Three.js and a little monster truck. If anyone remembers what I’m talking about please link it! Pops up here every now and again. Some things I love: - The content is hidden but every object is interactable with a cute message. This is a great way to make me want to keep “playing” without getting frustrated. Great principles of Consistency and Discoverability. - The graphics are perfect, and fit well on a phone. Did you use AI or maybe buy this pixel art? Either way its minimalism adds an air of professionalism IMO. - The messages are just adorable. What I didn’t like: - As others have said, needs a header for shortcut navigation. What if we’re sitting in an interview and I’m just trying to pull up your resume? - Needs some indications right at the start showing what’s possible and which direction it lies in. I know I complemented the gamification/scavenger hunt aspect, but I think a little practical consideration for the less hacker-inclined would be nice. Maybe in-universe signs, or a short welcome message? - the computer doesn’t really look like a computer. Where’s the chair?? - There’s a weird pause before it prints any links to the message block. A tiny blemish on a very satisfying UI Long story short, well done! I’m sure this will kill on YouTube. Please share any ideas you had on the way to this so we can (politely) steal them!!

JSLegendDev 3y ago
Thanks for the feedback!

erkk 3y ago

This is amazing, I love it! I've always wanted to delve into things like this as a web developer. Would you mind sharing the tools you used to build this and experience you had? Or even better, the repo?! Good stuff!

kebman 3y ago

Somehow made me think of The Union Demo (1989) for the Atari ST, specifically the Main Menu with the walk-around side scroller where you selected doors to see the various sub-demos.^1 Great work! [1]: Example video https://youtu.be/cVDr-eFtPoU https://youtu.be/cVDr-eFtPoU

juris 3y ago

Very fun! Did my best to break out of bounds, heh. Only bug I found is if you hold down the left mouse button while you've brought up a dialog box, the character continues to walk afterwards (usually into the same object and summoning the same dialog box). Cheers!