React Responsive Portfolio Website Tutorial Using ReactJs | React js Projects For Beginners | Deploy

Поделиться
HTML-код
  • Опубликовано: 8 янв 2025

Комментарии • 107

  • @howtobecomeadeveloper
    @howtobecomeadeveloper  7 месяцев назад +5

    What video would you like to see next? 👇

    • @Xcoder__1957
      @Xcoder__1957 7 месяцев назад

      A complete backkend? Plz

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад

      You got it, its coming! 🙌😊​@@Xcoder__1957

    • @Xcoder__1957
      @Xcoder__1957 7 месяцев назад +1

      @@howtobecomeadeveloper omg thanks❤🥺

    • @shivanshigupta9359
      @shivanshigupta9359 7 месяцев назад

      Please make a video on how to make a npm package using javascript

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад

      @@shivanshigupta9359 Awesome suggestion! 📝

  • @codiosity
    @codiosity 7 месяцев назад +15

    Its morning here , fresh air , fresh start portfolio website , to showcase miniprojects , .... Learning becomes very much interesting with these kinda tutorials , Love from 🇮🇳

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад +1

      Amazing, love that! Happy you are enjoying these tutorials 😊

  • @aaronamoso
    @aaronamoso 2 месяца назад +1

    I must say, I have completely given up trying to figure out how to work React on Mac for months and I happen to watch your setup in the beginning haha, so big thanks I got it working on an M3 Macbook!

  • @PegeCovers
    @PegeCovers 4 месяца назад +8

    If your project is not showing up at around 40:14, it's because you haven't declared the toggleTheme with a "const". You need to declare it with a const because unlike the useEffect function above it, it's a custom function that hasn't been declared/defined elsewhere (like useEffect has been, since it's a part of React itself).
    This is what happened to me. Cheers guys and good luck with the project.

    • @JoNas-dg7em
      @JoNas-dg7em 4 месяца назад +1

      Happened to me as well. Thank you for this.

    • @PegeCovers
      @PegeCovers 4 месяца назад

      @@JoNas-dg7em You'll make it through brother. Remember to use smart prompts with chatGPT when you get stuck on something.

    • @PegeCovers
      @PegeCovers 4 месяца назад

      @@JoNas-dg7em Check my other comment too regarding the checkmarks. This tutorial forgot to flip the colors for them for dark and light mode.

    • @kasemmuhammad9820
      @kasemmuhammad9820 Месяц назад +1

      @@PegeCovers yeah, thats right

  • @RYKalmante
    @RYKalmante 5 месяцев назад +3

    I just wanted to say thank you for the tutorial. After watching your videos 8 times, I now have at least a 10% understand of how React works. I'm looking forward to learning more from you. I hope you can create more content on ReactJS and ReactTS soon. If you have a Patreon account or any other way for your subscribers or students to support you, please keep us posted so we can contribute in a small way.

  • @PegeCovers
    @PegeCovers 4 месяца назад +2

    This is the only tutorial so far that is in any way helpful, lmao. You're a natural at this. Do not stop creating helpful videos.

  • @fahadrahman1831
    @fahadrahman1831 7 месяцев назад +6

    I was just looking to create a portfolio for my resume and projects recently and now your vid shows up!
    Can't wait to use this it looks so clean!

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад +1

      Amazing, I love when the suggested video is spot on 🤌 Have fun coding! 🙌

    • @fahadrahman1831
      @fahadrahman1831 7 месяцев назад

      @@howtobecomeadeveloper I noticed that you forgot to add the check marks to the light theme version of the app. could you add it in the code? many thanks once again! 🙌

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад

      @@fahadrahman1831 They are both there to my knowledge, or are you referring to somthing else? github.com/Ade-mir/harris-johnsen-2/blob/main/src/assets/checkmark-light.svg
      github.com/Ade-mir/harris-johnsen-2/blob/main/src/assets/checkmark-dark.svg

    • @fahadrahman1831
      @fahadrahman1831 7 месяцев назад

      @@howtobecomeadeveloper oh no I meant the checkmarks don't show up in the skills section when app is changed to light mode. For reference: see @2:00:39

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад +1

      @@fahadrahman1831 Ah I see! I forgot to add the logic to change the colors here. The answer is to use ThemeContext as in the Hero. I've pushed the fix, here is the link 😊 github.com/Ade-mir/harris-johnsen-2/commit/c54aa7906b4b5e8fdff4571afade772828b5fcec

  • @blah-aby
    @blah-aby 18 дней назад

    Thank you for this tutorial video, I self-studied HTML, CSS, JavaScript, REACT, and then some component library and CSS frameworks like Bootstrap and Chakra UI. Somehow, I can't think of a way to start creating my online portfolio. Thank God I came across your video while browsing through RUclips.

  • @alonsocastillo-t3w
    @alonsocastillo-t3w 5 месяцев назад

    thanks for the amazing tutorial, with each one of your projects i learn a little more of different topics, great job as always!!

  • @EnrikMazaj
    @EnrikMazaj 2 месяца назад

    Amazing work fast, simple and very good explanations for even beginners to use this!

  • @soumadip_banerjee
    @soumadip_banerjee 7 месяцев назад +2

    Tusen Takk! Love from Kolkata, India.
    🇮🇳❤️🇸🇯

  • @anilsuyal
    @anilsuyal 5 месяцев назад

    This is absolutely an amazing video. This is my kind of portfolio, what exactly I was looking for, simple and clean website.
    Thanks a lot!

  • @kelpi5225
    @kelpi5225 4 месяца назад

    This was very helpful! It is simple and yet beautiful. Can't wait to see more! 🖤🖤

  • @drmofasa880
    @drmofasa880 2 месяца назад

    Absolutely awesome video! I learned so much, thank you!

  • @whysoserious1054
    @whysoserious1054 7 месяцев назад +2

    Bro you' re really underrated. The designs, the way of explaining everything is awesome just one thing naming of the classes could be short and easier ✌✌✌✌

  • @the_real_visionary
    @the_real_visionary 2 месяца назад

    thank youuuuu ssoooooo much sir
    love from kolkata india
    btw i am 14 years old 🥰🥰

  • @AIdevel
    @AIdevel 19 дней назад

    Excellent work for react beginners

  • @ayhantahapastutmaz210
    @ayhantahapastutmaz210 5 месяцев назад +1

    Thank you sir. Good video, good explanation.

  • @christyphh
    @christyphh 6 месяцев назад +1

    Want to say thank you for the video! Really easy to follow along. Could you plz make more video about the CSS concepts (would be great if you can cover it in a practical way like how did you come up with styling the whole portfolio website, etc)?
    Thank youu ~

  • @RYKalmante
    @RYKalmante 6 месяцев назад

    More tutorials on Vite+ReactJS or Vite+Svelte, please. I'm learning a lot from your videos. Thank you.🙇

  • @kauheaa
    @kauheaa 6 месяцев назад

    Thank you so much for this! Super easy to follow and digest!

  • @rajkadam1950
    @rajkadam1950 7 месяцев назад +1

    Your videos are just awesome, Thank you so much !!

  • @Fluxxx1001
    @Fluxxx1001 4 месяца назад

    Thank you so much for wonderful website u created! It help me a lot

  • @anujrajthala3242
    @anujrajthala3242 3 месяца назад

    1:13:45 why is the use flexbox resolving that transform issue?

  • @rufrida005
    @rufrida005 2 месяца назад

    Please share the VSCode theme name!!!!! Absolutely loved it!

  • @NathanAguilarr
    @NathanAguilarr 6 месяцев назад

    Where would you recommend to host a personal portfolio that showcases MERN stack projects and .NET projects? Im building my own portfolio from scratch using HTML, CSS, and JavaScript?

  • @IAmLorenzoF
    @IAmLorenzoF 5 месяцев назад

    Great video! Thank you so much for this. I would really love to get a copy of your CV template please

  • @lesediseleke1416
    @lesediseleke1416 6 месяцев назад +1

    Great tutorial! For the copyright section in the footer do we use Harris Johnsen or we use our names?

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  6 месяцев назад +1

      You are free to use your own name 😊✅️

    • @lesediseleke1416
      @lesediseleke1416 6 месяцев назад

      @@howtobecomeadeveloper Thank you a bunch! Can't wait for future videos

  • @LOLFUNNYTIKTOKS
    @LOLFUNNYTIKTOKS 2 месяца назад

    My sun/ moon icon disappeared when I was doing the app.css part. How do I get it back? I even undid everything and it shows nothing.

  • @amulkumar5-yeariddminingen159
    @amulkumar5-yeariddminingen159 7 месяцев назад +1

    i really donot want to make this from scratch so can i use this and replace it with my info and i did some modification like made the contact form working using email js lib , added a nav for better navigation , and a resume viewer.

  • @esrasiregar8391
    @esrasiregar8391 7 месяцев назад +1

    Awesome tutorial! easy to understand for me who not too familiar with React, but understand some of the basic algorithms, looking up for future videos✨

  • @akarshtyagi88
    @akarshtyagi88 6 месяцев назад +2

    Where are fully functional contact form of portfolio ???

  • @rounaksingh8158
    @rounaksingh8158 6 месяцев назад +1

    Can someone help me with building a basic navigation bar for this project? Thanks!

  • @aleksandargrozdanoski8719
    @aleksandargrozdanoski8719 4 месяца назад

    Hi there! I great video love the content.
    I have a question about the image its realy good is it ai made?

  • @saqib8504
    @saqib8504 7 месяцев назад +1

    Please make a video on NextJs and the full-stack project as well.

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 месяца назад

    This React portfólio will be as good as the html/css for SEO?

  • @thearhardik2716
    @thearhardik2716 6 месяцев назад

    when I write hero in the fucntion app(){} it doesn't show up on my browser and not even in the elements when I inspect it. what should I do???

  • @Dinnnnnn00
    @Dinnnnnn00 3 месяца назад

    The code breaks when I turn into dark mode, the projects no longer have any distance between them, could you tell me why could this be happening?

  • @xXxNewFutureXx
    @xXxNewFutureXx Месяц назад

    Anyone has an issue display their resume? When I try with his resume it works but when I try with my personal resume it stays blank :( it is a pdf so I don't know what formatting issues it might have

  • @PrakritiKulshrestha
    @PrakritiKulshrestha 5 месяцев назад

    if i want to use my custom fonts rather than google fonts what changes i can do

  • @arpitsharma2101
    @arpitsharma2101 2 месяца назад

    I don't know why but my Project section's media query isn't working although I checked it twice. If someone can help ?

  • @someone-dp4fh
    @someone-dp4fh 6 месяцев назад

    Hi! While I was following the hero component part the img imported and showed successfully but by the end of me finishing the section of the video nothing is showing on the screen. There are no errors in my code and my code is exactly like yours, I’ve checked like a million times. As soon as I imported the sun icon the local* host screen went blank. Is there any solution for this problem? Any idea where I might’ve gone wrong?

    • @rickseth9207
      @rickseth9207 5 месяцев назад

      paste each files code in chatgpt and ask a question, explain your error or just write whats the error, however if this trick doesnt workout revert back to a stage where your code was properly working like his and then start again, its kinda annoying but its one of the best ways.

  • @jaironevares3511
    @jaironevares3511 2 месяца назад

    Hey man 👋
    May I know where can I get/generate that kind lf AI profile picture? Thanks! ☺️

  • @hah9216
    @hah9216 5 месяцев назад

    how did you make email sending/receiving functionality in this portofolio website? like using emailjs

    • @PegeCovers
      @PegeCovers 4 месяца назад

      He has a video called: "Send Emails From a HTML Contact Form". Watch that. Explains and shows everything.

  • @shivanshigupta9359
    @shivanshigupta9359 7 месяцев назад +1

    Please make a video on how to make a npm package using javascript

  • @subinkk4785
    @subinkk4785 7 месяцев назад

    How do the contact work where will be the message store or how can the author see that

  • @bitsguru
    @bitsguru 5 месяцев назад

    Thank you 👍

  • @Fashiondweller
    @Fashiondweller 6 месяцев назад

    Please tell me how to set circular profile picture in portfolio profile

  • @TheMindsetGuruji
    @TheMindsetGuruji 2 месяца назад

    Can you properly XML file of it

  • @kamranracabov8689
    @kamranracabov8689 3 месяца назад

    Как вы сделали эту аватарку, из какой нейросети и что написали?

  • @rohansharma2101
    @rohansharma2101 3 месяца назад

    Conatct form is not link with any backend

  • @CyranicalGoated
    @CyranicalGoated 7 месяцев назад

    Can you make a react + laravel project sir, then deploy to hostinger.

  • @rishabhthapliyal5001
    @rishabhthapliyal5001 7 месяцев назад +1

    Plz make a chat application with a video calling feature ..kind of like a WhatsApp clone....

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад +1

      Such a fun suggestion! Definitely going in my list of future projects! 🙌😊

  • @ursdrex
    @ursdrex 6 месяцев назад +1

    40:34

  • @LiamThiagui
    @LiamThiagui 7 месяцев назад

    Hello!! can i use node version v18.12.1???

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад

      Not gonna say for sure, but I imagine so. Give it a try and let me know if you got any problems 😊

  • @hendoitechnologies
    @hendoitechnologies 7 месяцев назад

    How to deploy this website on google cloud platform

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад

      Awesome, noted!

    • @hendoitechnologies
      @hendoitechnologies 7 месяцев назад +1

      @@howtobecomeadeveloper Kindly post video about How to host React js or Next JS website in Google cloud platform and connect with custom domain. We tried multiple times. we face more error. post full video about Google cloud hosting for websites or full stack MERN Web application. how to host.

  • @039-pradeep2
    @039-pradeep2 3 дня назад

    Command to run project. Please it's urgent

  • @SaintPeter-l4v
    @SaintPeter-l4v Месяц назад

    1:14:39

  • @anvigang
    @anvigang 7 месяцев назад

    it got deplyed but shows only white screen

  • @norestraint
    @norestraint 7 месяцев назад

    Just a heads-up for the people following the tutorial: the image generation thing does not work for black people, it always pumps out a white person(at least on Leonardo). I tried a bunch of things but it never comes out OK.
    Thanks for the tutorial though, great work! XD

    • @howtobecomeadeveloper
      @howtobecomeadeveloper  7 месяцев назад +1

      Ah, I'm so sorry to hear that! Have you tried any other generator after with better results?

  • @WaliaIbex
    @WaliaIbex 7 месяцев назад

    Php + react

  • @leetcodemonkey
    @leetcodemonkey 2 месяца назад

    Too simple :(

  • @Zolti14
    @Zolti14 5 месяцев назад

    55:15

  • @Wilson2746
    @Wilson2746 3 месяца назад

    54:05