Build a Dev Portfolio as a 2D Game - JavaScript Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ก.ย. 2024

ความคิดเห็น • 151

  • @JSLegendDev
    @JSLegendDev 5 หลายเดือนก่อน +139

    Hope you enjoyed my course! I have plenty of in-depth gamedev tutorials all in JavaScript/TypeScript. Head over to my channel if you're interested!

    • @alishxn
      @alishxn 5 หลายเดือนก่อน

      Amazing video loving the concept. You sir got got a new loyal subscriber 😃

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน

      @@alishxn Thanks :)

    • @LBCreateSpace
      @LBCreateSpace 5 หลายเดือนก่อน +1

      Thank you very much for making this! I love that you don’t rush through it and you explain things. Thanks again!

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน

      @@LBCreateSpace Glad you liked it!

    • @ShelbyLuong
      @ShelbyLuong 5 หลายเดือนก่อน

      thanks for the nice tutorial. Could this be deployed on github page?

  • @dhirajsuthar2607
    @dhirajsuthar2607 5 หลายเดือนก่อน +59

    For people not familiarising with the 2D-portfolio is you can create a 'normal' portfolio that is good for recruiters and give a dialog or something that takes them inside this, incase they are interested in checking out something like this. Great video by JSLegendDev, loved this concept.

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      Thanks for watching!

  • @londonalexander7868
    @londonalexander7868 5 หลายเดือนก่อน +9

    Definitely going to build this and put it as a button on my portfolio. Don’t think having it be the landing page is the smartest tho. I wish recruiters cared enough

  • @dreamisover9813
    @dreamisover9813 5 หลายเดือนก่อน +14

    That's a pretty interesting concept for a portfolio, really neat

  • @progwithpaul
    @progwithpaul 5 หลายเดือนก่อน +339

    But problem is here recruiters are quite lazy. They'll not even go through this :( and straight off reject the portfolio

    • @death135
      @death135 5 หลายเดือนก่อน +16

      Exactly

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +67

      Feel free to adapt it so it becomes more convenient while maintaining originality. You could for example, implement quick navigation, etc... My tutorial is just meant as a starting base you can take it in any direction you want from there; or just use what you learned here to start making actual games ;)
      You could also make it as a personal site (your personal corner on the internet) rather than strictly a developer portfolio.

    • @АхенныйкритикЮтуба
      @АхенныйкритикЮтуба 5 หลายเดือนก่อน +3

      Exactly, most people at such jobs are tired and are just scanning through all CV’s as fast as they can.

    • @Firstborn0Raz
      @Firstborn0Raz 5 หลายเดือนก่อน +10

      Tell me about it. And they keep giving you the same response without fully explaining exactly why they chose someone else for the job instead of you? I am not a coder, I am a visual artist and this has been happening to me for so many years.

    • @eric-jt
      @eric-jt 5 หลายเดือนก่อน +9

      It doesn’t need to be the main portfolio, it can be a second one. Maybe like a toggle on the main portfolio

  • @tomfoolery-chan
    @tomfoolery-chan 5 หลายเดือนก่อน +10

    This looks sick. Might do this this weekend.

  • @MOHAMADAMIRSALIHINMUSTAFA
    @MOHAMADAMIRSALIHINMUSTAFA 5 หลายเดือนก่อน +8

    I'm still inexperienced in coding but this tuto is really a great motivation for me to really learn as the portfolio is important as I'm currently still a student and it is fun because of the game concept rather than plain portfolio for learning purposes

  • @a7mdbest15
    @a7mdbest15 5 หลายเดือนก่อน +7

    This is really creative way to make a protfolio

  • @anitaaaa1293
    @anitaaaa1293 4 หลายเดือนก่อน +2

    This is sooooo amazing. Love it 🧡

  • @LydiasPianoStudio
    @LydiasPianoStudio 5 หลายเดือนก่อน +3

    Such a fun project! 😂🎉 Thanks for sharing! 😊

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน

      No problem!

  • @boxbrain
    @boxbrain หลายเดือนก่อน +1

    This is so awesome!

  • @QuirkyAvik
    @QuirkyAvik 5 หลายเดือนก่อน +2

    I thought about this a while back unfortunately the HR didn't want to play, she asked me if I had a paper resume or linkdin. Unfortunate state of where I live, we kill creative thinking.

  • @brandon_wallace
    @brandon_wallace 5 หลายเดือนก่อน +3

    This is great!

  • @ianwataka3328
    @ianwataka3328 5 หลายเดือนก่อน +5

    I have never imagined one could do this😅😅

  • @suoh7341
    @suoh7341 หลายเดือนก่อน

    Merci pour ta vidéo !

    • @JSLegendDev
      @JSLegendDev 21 วันที่ผ่านมา

      De rien :)

  • @hassamulhaq7762
    @hassamulhaq7762 5 หลายเดือนก่อน +2

    such videos are useful, and diff in many cases.

  • @3minutesbibletruth
    @3minutesbibletruth 5 หลายเดือนก่อน +2

    we need a whole video on the canvas api

  • @bhaskarmondal7461
    @bhaskarmondal7461 5 หลายเดือนก่อน +2

    this tutorial is soooo cool,

  • @psiryan
    @psiryan 5 หลายเดือนก่อน +3

    Clever Idea. But important to consider your audience; this might not be a good format for certain types of developer jobs.

  • @keithconner9036
    @keithconner9036 5 หลายเดือนก่อน +1

    Thank you. Please be gracious in the comments. Negativity only attracts more negativity

  • @phat80
    @phat80 5 หลายเดือนก่อน +1

    If it’s one of the several portfolio projects it may be acceptable but if there’re only 2D games in your portfolio it will be strange for any recruiter 😅

  • @Harthikreddyy
    @Harthikreddyy 5 หลายเดือนก่อน +2

    Looks easy enough

  • @marginiszero
    @marginiszero 5 หลายเดือนก่อน

    This is next level portfolio,🔥❤

  • @ivankristian7916
    @ivankristian7916 11 วันที่ผ่านมา

    i hope this have part 2 to add button in mobile. By the way, thanks man

  • @linisusanv688
    @linisusanv688 5 หลายเดือนก่อน +2

    I appreciate the creativity in this project. But not sure if recruiter will open portfolio in game format. Can you please share link for other portfolio project? Preferably in React.

  • @Vinsmokedz
    @Vinsmokedz 5 หลายเดือนก่อน +20

    The field is so saturated that these billion dollar potential projects are churned out for free.

    • @internallyinteral
      @internallyinteral 5 หลายเดือนก่อน +1

      We need more IT professionals so we can keep dropping wages 😂

  • @buland_aavaj1130
    @buland_aavaj1130 5 หลายเดือนก่อน +7

    Recruiters aint playing a game for sure

  • @BL4ckViP3R
    @BL4ckViP3R 2 หลายเดือนก่อน

    You guys heard of what matters in a 3 minute pitch, right? Now, imagine a potential customer comes to your website and gets to see 1:36:20. Sorry, but this should visually be much, much more appealing and excel with a visual design! Why not make a cool space station and you show yourself sitting behind a huge, awesome glass light desk showing a cool menu and when the visitor asks this guy a big Hologram texts popup in the room showing off the cool portfolio of yours?

  • @tokaoshba2188
    @tokaoshba2188 5 หลายเดือนก่อน +7

    Could I make a similar portfolio by using python

    • @dreamleaf6784
      @dreamleaf6784 5 หลายเดือนก่อน

      Yes lol

    • @tokaoshba2188
      @tokaoshba2188 5 หลายเดือนก่อน

      ​How? Is there a video like this one that explains how to make a similar portfolio? ​@@dreamleaf6784

  • @binay8848
    @binay8848 5 หลายเดือนก่อน +1

    I started watching it..

  • @samoylov1973
    @samoylov1973 5 หลายเดือนก่อน +2

    Nice! Will learn JS with this) Looking for the same one in Python!

    • @jigsaw2253
      @jigsaw2253 5 หลายเดือนก่อน +1

      You can translate the one in JS to Python yourself, no need to put another video also it helps you

  • @diegoalberti4348
    @diegoalberti4348 4 หลายเดือนก่อน

    Hi @JSLegendDev, fantastic portfolio! I did it. But my question is, which is the better way to publish it to be visible? Do I need to host the app in some well-known web server paying for it? Thank you very much! Really motivating!

  • @qaw392
    @qaw392 5 หลายเดือนก่อน

    2:07 aee, my man is also goblin

  • @nelsonfernandes5208
    @nelsonfernandes5208 5 หลายเดือนก่อน +18

    Literally I was finishing my portfolio as a game yesterday and this drops now 😭... But this is perfect I can see where I can improve my project now. 😊

  • @SailAway33
    @SailAway33 4 หลายเดือนก่อน

    Great tutorial, what extension are you using that autocompletes the semicolons in VS code. That was the hardest thing to follow due to the autocomplete boxes coming up. As I did not want to just copy and paste. If I type it, I can learn the syntax faster. Do you have any recommendations on debugging errors?

  • @okay5573
    @okay5573 3 หลายเดือนก่อน

    npm run dev is returning an error, something about failing to load config :(

  • @syarafiakmal105
    @syarafiakmal105 2 หลายเดือนก่อน

    I had an issue with the note part not showing, when i inspect it turns out that the app div component was stacked on top of the canvas component and because of the overflow of the body being hidden, it didnt show. I fixed this issue later by changing the position of the app div to absolute. I wanted to ask, why does this happen? when in your case it doesnt?

  • @UBCABANUPRASATHS
    @UBCABANUPRASATHS 4 หลายเดือนก่อน

    When i click the download button the given Tiled software are not downloading

  • @itzmeroj117
    @itzmeroj117 5 หลายเดือนก่อน

    when i create the code for the player and the spawnpoint i only get the map no player... nothing.

  • @luchodf
    @luchodf 4 หลายเดือนก่อน

    Hello how are you! I've followed the tutorial and found it quite interesting! I made a quick portfolio for myself but i'm having trouble to deploy it on the web. Im using git pages, don't know if that could be an issue because it's giving 404 errors with some files. Can I use gitpages? if yes, is there any extra config i need to do to deploy my portfolio on the web?
    thanks!

  • @cristineeross
    @cristineeross 4 หลายเดือนก่อน

    I did code along, and I love how it turned out, thanks so much! I have a small problem though, I hope you can help me out. My player is able to move past the boundaries somehow. I must've missed something. What should I double check?

    • @cristineeross
      @cristineeross 4 หลายเดือนก่อน

      Silly me, I've found it: the boundary.width was missing, it only had a hight, so there was no boundary :D lol. Thank you so much! I coded a few small games in vanilla js before, but Kaboom makes it a lot easier, I love it!

  • @tanmaygupta1473
    @tanmaygupta1473 2 หลายเดือนก่อน

    can u upload a video where u teach how to deploy a website with kaboom.js

    • @JSLegendDev
      @JSLegendDev 2 หลายเดือนก่อน

      I have added deployment instructions in the repo linked in the description. Refer to the "HOW_TO_DEPLOY .MD" file. Hope it helps!

  • @shatanshubodkhe1841
    @shatanshubodkhe1841 5 หลายเดือนก่อน

    lesgooooo

  • @MitosdeArkovia
    @MitosdeArkovia 5 หลายเดือนก่อน

    Lastima que no tiene pista de audio integrado este video.

  • @chenhuing8055
    @chenhuing8055 5 หลายเดือนก่อน

    This is dope!

  • @TheAzovStar
    @TheAzovStar 5 หลายเดือนก่อน +1

    This is a way to create another version of your portfolio, because 99.9% recruiters will not have a time to play😅

  • @lwazishabalala1868
    @lwazishabalala1868 3 หลายเดือนก่อน

    hey quick question i've madea the entire portfolio and i've published it and it looks amazing, but when i go to the portfolio using my phone the text box that appears when you go to the tv, the bed etc. isn't responsive to my phones page, the words generate in the text box but the close button is so far down the screen i cant press close

  • @phoneix24886
    @phoneix24886 5 หลายเดือนก่อน

    3000.1.17? Goodness gracious

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      Yeah, Kaboom version naming is weird. 1000 is ver 1.0, 2000 is ver 2.0 and 3000 is ver 3.0.

  • @urosstevanovic6044
    @urosstevanovic6044 5 หลายเดือนก่อน

    i have a problem the player icon is not loading can someone help me please

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน

      Could you provide more details?

  • @filippo_cecchi
    @filippo_cecchi 5 หลายเดือนก่อน +1

    Hi, the code run fine in localhost but when i deploy it on github I see a white background and only the text top left. In console gives me an error failed to load resources 404 and 6 unchecked runtime error "the message port closed before a response was received". It's like it can't reach the libraries needed to run. Anyone has any idea on what should i do?

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      I have added a guide on how to deploy the site in the github repo linked in the description. Hope it helps!

    • @filippo_cecchi
      @filippo_cecchi 5 หลายเดือนก่อน +1

      @@JSLegendDev Thank you. I finally fixed the code as the guide says, now it works perfectly!!

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน

      @@filippo_cecchi Nice!

    • @aryan0019
      @aryan0019 2 หลายเดือนก่อน

      @@filippo_cecchi can you please tell me how to solve that issue

    • @emanuelsoloman6423
      @emanuelsoloman6423 หลายเดือนก่อน

      can you tell how did you do it?

  • @Abulucu-g6p
    @Abulucu-g6p 4 หลายเดือนก่อน

    57:05

  • @ShadWarri0w
    @ShadWarri0w 5 หลายเดือนก่อน

    Hi, Thank you for uploading this. I really loved the course it's a super interesting way of showcasing a Portfolio. However, I've ran into a problem during deployment.
    I tried to deploy this on Github all it returns me is a white screen with a "Tap/Click around to move" at the top left.
    All the assets do not load and all that's returned is Failed to load resources: server responded with a status of 404(). This is for utils, kaboomCtx, monogram.ttf and constants.
    The localhost loads when I run Npm run preview and Npm run dev so I doubt the pathing is the issue.
    I would really appreciate it if you're able to guide me on this.

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      Hi! I added a small guide explaining how to deploy the project in the project's GitHub repository linked in the description.

    • @himanshuyadavclips839
      @himanshuyadavclips839 หลายเดือนก่อน

      have u resolved the issue ?

  • @my-financial-wealthblog4423
    @my-financial-wealthblog4423 5 หลายเดือนก่อน

    Why would you use vite if you can write in plain JavaScript?

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      You could use plain javascript (just load the Kaboom library via a script tag) without vite however you wouldn't get intellisense for the Kaboom library which is pretty helpful.

  • @Wer-zo8mb
    @Wer-zo8mb 5 หลายเดือนก่อน

    How can i make a React component with that game ?

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      One way you could go about it is to use the div used for rendering the UI and use it as the root of your React code. All your React components will be rendered there.

    • @Wer-zo8mb
      @Wer-zo8mb 5 หลายเดือนก่อน +1

      i'm really new to JS/React world, and i don't undestand much about it. Thx for the help@@JSLegendDev

  • @mataplay1632
    @mataplay1632 5 หลายเดือนก่อน

    Brasil

  • @benjidaniel5595
    @benjidaniel5595 5 หลายเดือนก่อน

    It’s a nice concept but I feel the biggest problem is it’s just not very compelling. There’s just not much to do. Even the resume is just a link to an externally hosted document.

  • @AayushDubey_007
    @AayushDubey_007 4 หลายเดือนก่อน

    jeNa can I join your clan?

  • @AB-kf4vp
    @AB-kf4vp 5 หลายเดือนก่อน

    what is the use of studying coding now that all job will be done by AI and bot most peoples are scary for losing jobs in IT sector and new selection is only for highly IQ and skilled professional 😁

  • @kuroshahplays
    @kuroshahplays 5 หลายเดือนก่อน

    First

  • @AVidhanR
    @AVidhanR 5 หลายเดือนก่อน

    Javascript 😁😁

  • @okonkworchizim6953
    @okonkworchizim6953 5 หลายเดือนก่อน

    2nd

  • @hedgehogform
    @hedgehogform 5 หลายเดือนก่อน

    It's cool but not practical as a portfolio. I wouldn't bother to go through that just to know what your skills are.
    No one has the time to play a game just to see your skills. I mean it could work if you're applying as a game maker creator for a game studio but as a website? No.

    • @benhasel4540
      @benhasel4540 5 หลายเดือนก่อน +1

      most indie games companies have people who look for stuff like this. Of course it depends on where are you applying but for the game industry this is very cool!

  • @phat80
    @phat80 5 หลายเดือนก่อน

    The worst game development tutorial I’ve ever seen. You should run project at every step of the development and gradually show the progress. But you’re just writing and writing the code. It’s also a bad practice for beginners to write code in big chunks without even testing it.

  • @beutelschwitz
    @beutelschwitz 5 หลายเดือนก่อน

    What a coincidence 😅 this week I thought about a digital blackboard as a game

  • @memaimu
    @memaimu 5 หลายเดือนก่อน +4

    I'd feel bad using this. Feels like borderline plagiarism lol.

  • @annebeignatborde1832
    @annebeignatborde1832 4 หลายเดือนก่อน +2

    Valuable tutorial, thank you. I'll be coming back to it once I've worked out my theme and storyline 🙂

  • @guglielmocerri7036
    @guglielmocerri7036 5 หลายเดือนก่อน +3

    It can be published using GitHub pages?

  • @SheepCodeLevel1
    @SheepCodeLevel1 5 หลายเดือนก่อน

    Hello, thank you for uploading this course. The player unfortunately does not load, I tried debugging the matter but still stucked so far. "Cannot read properties of undefined (reading 'x') at Object.main" has been shown as an error. Appreciate any support, thank you.

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน

      Could you provide more details? For example, what line of code is causing the error. By the way, you can clone the final repo and compare it with yours to see where things went wrong.

    • @SheepCodeLevel1
      @SheepCodeLevel1 5 หลายเดือนก่อน +1

      @@JSLegendDev Hello again and thank you for the hint, I did slowly recheck the code using the final repo and managed to find the issue, thank you for the hint.

    • @JSLegendDev
      @JSLegendDev 5 หลายเดือนก่อน +1

      @@SheepCodeLevel1 No problem! Glad it helped :)

  • @rally_furymoments5294
    @rally_furymoments5294 5 หลายเดือนก่อน +1

    What is frame, and how do you count it?

    • @devtravaller
      @devtravaller 5 หลายเดือนก่อน +1

      frame count is how many sprite u have for animate

    • @Luis-wf9ws
      @Luis-wf9ws 5 หลายเดือนก่อน +1

      Animations(and games by extension) are made of images put one after another to give the illusion of movement, those images are called frames and the fluidity of a game depends on how many frames do you have in a second

    • @rally_furymoments5294
      @rally_furymoments5294 5 หลายเดือนก่อน

      ​@@Luis-wf9ws you're the best! You explain better

    • @rally_furymoments5294
      @rally_furymoments5294 5 หลายเดือนก่อน

      What about sprite?

    • @Luis-wf9ws
      @Luis-wf9ws 5 หลายเดือนก่อน +1

      @@rally_furymoments5294 they would be the drawings with what you compose the frame, if im not wrong sprite is a term specific to pixel art(the art style that use a los of 2d games, like this one)

  • @reyrot24
    @reyrot24 5 หลายเดือนก่อน

    super nice project, but someone else as problems deploying it to the web? When i try to delpoy it, all the assets don't load

    • @yaredmyers2403
      @yaredmyers2403 4 หลายเดือนก่อน +2

      i cannot deploy corretly, displays only a white background with the tap an click text, somebody can help?

    • @reyrot24
      @reyrot24 4 หลายเดือนก่อน

      @@yaredmyers2403 I had an error in the index file of the build folder, probably you have the same; it was a little error, that the editor doesn't show, look in the console when you do npm run preview

    • @yaredmyers2403
      @yaredmyers2403 4 หลายเดือนก่อน

      @@reyrot24 I dont see problems in console when I use npm run preview, only a warning that says "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. "

  • @Blaze_MediaTv
    @Blaze_MediaTv 5 หลายเดือนก่อน

    When he said "JS Legend Dev" he wasn't joking 🔥

  • @gsdealer7691
    @gsdealer7691 5 หลายเดือนก่อน

    Make it a blockchain one...