React portfolio website | Mobile optimization (responsive)

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

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

  • @CodewithSloba
    @CodewithSloba  2 ปีที่แล้ว +4

    Previous tutorials
    1) th-cam.com/video/ESHaail1eGc/w-d-xo.html
    2) th-cam.com/video/I2TNlHVJ9KQ/w-d-xo.html

  • @noahhorbinski7919
    @noahhorbinski7919 ปีที่แล้ว +6

    Awesome work sloba! I learned a lot from this series!
    Also, for any of those who wanted to center the Loaders for mobile, make sure you go to the the app.scss file and add this:
    "@media screen and (max-width: 1200px) {
    .loader-active {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    bottom: 50%;
    }
    }"

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      Hey I’m glad! Great addition 👏🏻

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

    Just wanted to really say thank you Sloba, I have noticed that I have a great passion for web design as Im on my software engineering journey. I wanted to make my own site to display my projects and also get my hands on with React and you gave me the best of both worlds in this tutorial. I learned a lot and I hope to learn more from you going forward.

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

      Thank you so much I appreciate it

  • @m123g
    @m123g 2 ปีที่แล้ว +3

    You're the man. Well done and thank you for following through with the mobile optimization!!!
    Amazing stuff. Keep making videos, we appreciate the content!!

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Hey finally I made it! I'm glad I can help

  • @erdoganatas8776
    @erdoganatas8776 ปีที่แล้ว +2

    I studied your videos on a really detalied way, and now I am on my way to create my on portfolio and to publish, thx again for making me understand the algorithm Maestro.

    • @erdoganatas8776
      @erdoganatas8776 ปีที่แล้ว

      The only thing that I lack I really don't know how to publish the site, but I guess I will figure it out.

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      Thank you! Yes you have drag and drop publishers. Google is your friend

  • @LifeSurf123
    @LifeSurf123 2 ปีที่แล้ว +1

    Let's goooo! I was checking every couple of days for this. It's like waiting for a good movie!

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      haha, sorry for waiting so long 👏🏻🙏

  • @caleblyster87
    @caleblyster87 2 ปีที่แล้ว +1

    Super cool! Everyone was really looking forward to this!

  • @al-doori2392
    @al-doori2392 2 ปีที่แล้ว +1

    Yessssss, finally thank you so much was waiting for this part for so long

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว +1

      Sorry for waiting so long, I'm glad it's here :)

  • @michaelm8044
    @michaelm8044 2 ปีที่แล้ว +1

    I'm super happy you did this video. Thanks so much! Keep up the great work.

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Hey thank you so much! I am finally as well!

  • @williamjaimes6671
    @williamjaimes6671 2 ปีที่แล้ว +1

    Im following your tutorials and they are awesome! Im learning so much css and React! Thanks!!

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว +1

      That's great! Keep up learning!

  • @killerpopholly4054
    @killerpopholly4054 2 ปีที่แล้ว +1

    Thanks dude!! That's a good start for responsive to continue this great project !! I changed things that I prefered, adapted others with my workflow and take off certain things I cannot put in it, like the Green Sock plugin, either I'm a free member of GS, I downloaded the free pack with bonuses, but I haven't the DrawSVG plugin. Too bad, but that's not the most important.
    So again thanks for all those video, that makes me a lot of inspiration on lot of things

    • @killerpopholly4054
      @killerpopholly4054 2 ปีที่แล้ว +1

      And for the 10k.... BRAVO!! You diserve it! you are a great teacher

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Thank you so much I appreciate the support!

    • @zombiefacesupreme
      @zombiefacesupreme 2 ปีที่แล้ว

      Yeah, the DrawSVG thing is a real buzz-kill because mine loaded and looked so good only one time! It's pretty much a perfect space for a headshot or to showcase any personal logos, so it's definitely not a dealbreaker.
      Thanks for the knowledge, Slobadon!

  • @dalestewart
    @dalestewart ปีที่แล้ว

    Thumbs up to part 3. Very professional👍👍

  • @Slay_and_Play
    @Slay_and_Play ปีที่แล้ว +1

    This was fun, thanks man!!!

  • @MattieRamos
    @MattieRamos 2 ปีที่แล้ว

    YESSSSS! Finally!! Thank you so much bro!!

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Yeah finally :) You're welcome

  • @Notghazy
    @Notghazy ปีที่แล้ว +2

    Hey love the videos. For some reason the icon is very large and displaying in the center, so as the image and the wordings.

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว +1

      thanks! Is not like on video?

    • @Notghazy
      @Notghazy ปีที่แล้ว +1

      No, I have experienced this in the first part but I managed to fix it in the css. For some reason, the size is much different on my screen then yours.

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      @@Notghazy hm I'm wondering

  • @williamjaimes6671
    @williamjaimes6671 2 ปีที่แล้ว +2

    Sloban-sensei, I saw your portfolio and I am amazed by the canvas you made in the skills section, how did you do it?

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Hey I used a jQuery lib for it

    • @imranhosain8312
      @imranhosain8312 ปีที่แล้ว

      @@CodewithSloba Can you me that jQuery plugin link?

  • @AlexPD93
    @AlexPD93 ปีที่แล้ว

    Thank you very much for this tutorial, it is really cool! I noticed in the current version you have a skills section. Is there any chance you can do a tutorial on how to create the canvas with the flying words? Thank you :) :)

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

      that is just a plugin though

  • @jamaicaigot9335
    @jamaicaigot9335 2 ปีที่แล้ว +1

    Thank you for the information, are you also in audea btw? I'd love to listen more of your contents

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Hey I don’t what’s that?!

  • @frogGames
    @frogGames ปีที่แล้ว

    very nice thank you for the series i learned so much, i'd really love if you explain some properties while adding them. i know it might seem obvious but for us learners sometimes we don't know what to do, for example adding posiotion 0 to top left right and buttom. thank you. :))))

  • @justinlee7183
    @justinlee7183 2 ปีที่แล้ว +2

    Hello Code with Sloba! I love your videos! I was just wondering why the portfolio section would have different sizing .image-box when having more than 2 projects in the portfolio.json file in the data folder? Do you think this is an error in my code? Thank you!

    • @CodewithSloba
      @CodewithSloba  2 ปีที่แล้ว

      Thank you, sizing should be same. Can you share the screenshot

  • @rishiraj2548
    @rishiraj2548 2 ปีที่แล้ว +1

    Thanks a million

  • @orewabrt1106
    @orewabrt1106 ปีที่แล้ว

    Zdravo Slobo. Dobar i koristan serijal. Imam jedno pitanje, tice se bounce efekta koji je na tvom sajtu malo drugaciji. Da li si koristio keyframes? pri brzom prelasku preko slova efekat se ne pojavi na ovoj verziji. Hvala!

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      Zdravo, hvala. Sto se tice tog efekta na mom sajtu on je u stvari radjen sa JS-om. Ne znam da li je to izvodljivo sa CSS-om

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

    Hi Sloba,
    I have a question - how did you create the page transition animation between the preloader and the component?
    Thanks for the videos.

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

      Actually this is a vanilla js, just show and hide

  • @bendevweb89
    @bendevweb89 ปีที่แล้ว +2

    Hello Sloba after following the tutorial and deploying the portfolio I have a gsap error telling me that the plugin used is not valid do you know how I can fix that ?
    thank you

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      You can’t use test lib for deployment. Instead install regular one

    • @rakha9666
      @rakha9666 ปีที่แล้ว

      @@CodewithSloba any alternative for the drawsvg?

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      @@rakha9666 this one is the best, you should not use this trial package for deploy. If you use regular package it will work

    • @missceebrownin
      @missceebrownin ปีที่แล้ว

      @@CodewithSloba How do you get the images to show in deployment? They completely disappear, also changes the url locally

  • @oluwatadeebenezer648
    @oluwatadeebenezer648 ปีที่แล้ว

    Thanks so much for this

  • @user-kr9sz8uf5n
    @user-kr9sz8uf5n 2 ปีที่แล้ว

    Thank you! ❤️❤️❤️

  • @deniselima8243
    @deniselima8243 ปีที่แล้ว +1

    Thanks a lot Slobodan!! I dont know why my menu hamburguer doesn't work. Someone with the same problem?

  • @juanibellavitis1055
    @juanibellavitis1055 ปีที่แล้ว

    There will be a 4th part? I mean, I saw the repo and there is Skills page and I'm very interested on how doing the right effect skills... Or at least tell me what it is?

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      That's just a plugin, you can inspect it. There are 4 parts already

  • @curiosityguyy
    @curiosityguyy ปีที่แล้ว

    Sir how you make a skills section please tell me I also want to add how I do it without skill the website is not usefull

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว +1

      Skills section is the same as all other webpages. Check this page for sphere
      www.jqueryscript.net/text/jQuery-Plugin-To-Create-3D-Sphere-style-Tag-Cloud-tagcloud.html

  • @jorgeenriqueecheverria5165
    @jorgeenriqueecheverria5165 ปีที่แล้ว

    I'm a newbie, but I have a question. Is it not the paradigm now to build websites 'mobile first'? Doesn't it mean that the media queries should be for desktop sizes and the default CSS dedicated to mobile size?

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      It means that you develop first for mobile, and then optimize for desktop

  • @Ankit_verma_lifts
    @Ankit_verma_lifts ปีที่แล้ว

    the final portfolio link is different from the one in video , please make the changes available in the github and if possible , make a video about it too, also i asked this in first video but never got a reply , pls reply if possible. " how did you design the svg outline s-logo(timestamp-42:32), i wanted to design it for my name as well, is there somewhere i can make it? "

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว +1

      Yes because original one is with jQuery and it's much older. We have 4 videos about this portfolio, check them on my channel. For letter design I hired a designer on Fiver

    • @Ankit_verma_lifts
      @Ankit_verma_lifts ปีที่แล้ว

      @@CodewithSloba oh ok , thanks , i can't seem to find the 4th video , i have already watched the 3 videos , can you please mention the 4th video

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว +1

      @@Ankit_verma_lifts oh my bad sorry there is only 3 videos. Last one is where we optimize it for mobile devices. Sorry for confusion

  • @oluwatadeebenezer648
    @oluwatadeebenezer648 ปีที่แล้ว

    Please how did you generate the letter 'S' as image?
    Thanks

  • @DawoodDawood-px3xp
    @DawoodDawood-px3xp ปีที่แล้ว

    hey can you also show how to make the skills section

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      to be honest probably not, it's just a plugin

  • @curiosityguyy
    @curiosityguyy ปีที่แล้ว

    Sir how to make skills section please reply

  • @missceebrownin
    @missceebrownin ปีที่แล้ว

    Did anyone manage to deploy this to github pages?? Because I have not found a solution to make this work. (Followed the 3 parts) Is there a tutorial to deploy this? The images are a big problem. If anyone found a solution please let me know! Otherwise it seems like I have done this in vain...

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      I haven’t been uploading to github pages to be honest

    • @missceebrownin
      @missceebrownin ปีที่แล้ว

      @@CodewithSloba I ended up using Firebase. It might be an idea to let people know where you deployed from without issues, as I had to find out the extremely hard way that this doesn't work with pages

    • @CodewithSloba
      @CodewithSloba  ปีที่แล้ว

      @@missceebrownin sorry to hear that

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

      @@CodewithSloba How then were you able to push the code to GitHub? Did you use Git lfs or? I’m getting an error while push cause the file is to large?

  • @timporter5926
    @timporter5926 2 ปีที่แล้ว +1

    promosm 👏