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

https://jslegenddev.github.io/portfolio/

by JSLegendDev • 2 years ago

76 31 2 years ago

jslegenddev.github.io

stoniejohnson• 2 years ago

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

LorenDB• 2 years ago

Agreed, lack of keyboard support is immensely frustrating.

gnabgib• 2 years 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

bbor2• 2 years 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• 2 years ago

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

gs17• 2 years 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• 2 years ago

This is actually really smooth on mobile. Nice work.

aaroninsf• 2 years ago

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

jmole• 2 years ago

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

jlnho• 2 years ago

Based on your comment, I wouldn't want to work for you.

hackan• 2 years 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!

joshuamcginnis• 2 years 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.

JSLegendDev4• 2 years 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

Or look at the source code directly : https://github.com/JSLegendDev/2d-portfolio-kaboom

numtel• 2 years 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/

bulbosaur123• 2 years ago

Cute, but a bit gimmicky and too basic.

turtleyacht• 2 years ago

Looking around, developer is bilingual in French and has video tutorials for Kaboom.js:

https://youtube.com/@jslegenddev

Resume link, but it's to a template currently [pdf]:

https://github.com/JSLegendDev/Resume/blob/main/JSLegend%20R...

geuis• 2 years 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.

JSLegendDev4• 2 years ago

Thanks for the feedback!

molly0• 2 years ago

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

nvader2• 2 years 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

JSLegendDev4• 2 years ago

Thanks for catching this. Will correct it ASAP.

pesfandiar• 2 years 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.

nvader2• 2 years ago

Thanks!

lxe• 2 years ago

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

adamredwoods• 2 years 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• 2 years ago

..or hjkl if we are at it. Asking for my friend (primeagen)

bbor2• 2 years 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!!

JSLegendDev4• 2 years ago

Thanks for the feedback!

erkk• 2 years 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• 2 years 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

juris• 2 years 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!

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

Related Stories