Build a Stunning React Portfolio: Next.js, Tailwind, and CSS Animation | Part 2

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

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

  • @riteshpatil6104
    @riteshpatil6104 6 дней назад

    Dude, I made it all and its superb. Thnx man

  • @MrAlam-i9w
    @MrAlam-i9w Месяц назад

    For the first time I completed a portfolio website and learned lot of things. Again thank you so much Frontend Tribe

    • @frontend-tribe
      @frontend-tribe  Месяц назад

      That’s awesome to hear, great job! 👏

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

    Finally completed this part as well, and the webpage is looking awesome! 🔥

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +1

      Amazing, glad to hear it 🎉

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

      can you please send me the full code link on github. I'd really appreciate that

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

      @@raghavsharma3229 I can't,
      don't be lazy

    • @kruthingadhiya3459
      @kruthingadhiya3459 24 дня назад

      @@TicTac02 import { PropsWithChildren } from "react";
      export const HeroOrbit = ({
      children,
      size,
      rotation,
      spinDuration,
      }: PropsWithChildren) => {
      return (


      {children}


      );
      };
      hey tic tac, I'm having an error in this part its a components section file hero orbit.tsx the problem I face is the the sparkle animation is too fast and in the video its normal and subtle...I started facing this issue at 2:23:45. can u help me with this

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

    Completed the project... looks great. But honestly, I learned a lot, especially the animations, and now I can apply it independently because I know where to change and tweak to get the desired results. Thanks a lot!

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Really great to hear! You’re welcome ☺️

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

    completed part 1 amazing felling confident now created some of my own design
    too

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

    finally completed the project. thanks man

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

    Hey wanted to say i am loving your channel. Its super informative and straightforward. One thing i noticed though is for the scrolling effects you left them a bit finicky in which they would jump.

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

    really gained a lot from your video with multiple problem solving, finally the page looks amazing, great video man really

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Awesome to hear! Glad you got all the way through 💪

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

    Completed part 1+2. Learned a lot from your tutorial 😃

  • @Kumar-r1724k
    @Kumar-r1724k 2 месяца назад

    Thanks for this man. Finally I started to create my own portfolio. It was really convenient to go through the pace. Keep up the good work !

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

    Man it's a ton of works 🔥🥵👀
    You nailed it.
    I leaned lot from your videos.
    Frontend tribe ❤❤❤

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

    just completed this thanks a ton !

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Great to hear! Glad you enjoyed it 😊

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

    Very Good Tutorial , Hope To Keep Seeing New Videos , Keep Growing Brother🤟❤

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

    your design knowledge 🔥🔥

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

    Great video and really nice sound, would you mind sharing your setup? Mic+sw? Thanks!!

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Sure - I use a Rode NT USB Mini 🎙️ 🙂

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

    Doing great honestly

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

    JESUS, this guy is a perfectionist.....im on the column part im like dude....its just a little off from the mockup ....but anyway good practice...

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      You’re not wrong - I like pixel perfect 😍

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

    This channel is fire

  • @samirshaikh-gz2yi
    @samirshaikh-gz2yi 2 месяца назад

    You are doing good work

    • @samirshaikh-gz2yi
      @samirshaikh-gz2yi 2 месяца назад

      I will pray for you and your family and and for your success also.

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

    Great Job again, Can I use the design and code along for my portfolio Site?

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +2

      Yeah, no reason you couldn’t if it’s modified with your content 🙂

  • @MrAlam-i9w
    @MrAlam-i9w 2 месяца назад +1

    why i can not get mask-image linear gradient?what is the problem?thanks for you awesome tutorial

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

      For testimonials: [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]

  • @Mr.Strang-z9e
    @Mr.Strang-z9e 2 месяца назад +1

    Which Bowser are you use

  • @JOKER-zi3nq
    @JOKER-zi3nq 2 месяца назад

    Please create more project that will impress the recruiter and make us get hired as a frontend developer

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

    Your are helping me to GET a ** JOB ** , thanks a lot :))

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

    🎉 Exciting Milestone Achieved! 🎉
    I’m thrilled to announce that I’ve successfully built the "Build a Stunning React Portfolio: Next.js, Tailwind, and CSS Animation" course page! 🚀
    This journey has been incredible, allowing me to dive deep into modern web technologies and enhance my skills in:
    ✨ Next.js for powerful React applications
    ✨ Tailwind CSS for efficient and responsive design
    ✨ CSS Animations to bring dynamic interactions to life
    I am immensely grateful for the opportunity to work on this project and for the support from my amazing team/community. 🙏

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

    beautiful

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

    Hurray part 2 is hear

  • @mohammed.k9637
    @mohammed.k9637 Месяц назад

    Completed this part also added react-mail for email also change the navbar for specific section and some more touches I need to do as for my projects thanks for helping out man ! Ciao 🥷

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

    Thanks man...

  • @TheInvincible-success
    @TheInvincible-success 2 месяца назад

    Thanks for the video really helpful! Why don't you add video/s regarding not only FrontEnd but also Backend as well; because it will help thousands of people to get nice jobs maybe!

  • @AJPHIL-bt4me
    @AJPHIL-bt4me Месяц назад

    where do you download personal svgs from for example the grain image in the Bento grid and the svgs for the tech stack in project

    • @frontend-tribe
      @frontend-tribe  Месяц назад +1

      I made the grain image, and got the tech icons from font awesome if I remember correctly, but I modified them to suit my usage 😊

    • @AJPHIL-bt4me
      @AJPHIL-bt4me Месяц назад

      @@frontend-tribe Thank you soo much

  • @NamanJain-cc9fr
    @NamanJain-cc9fr 2 месяца назад

    Is there a live link for this? I'm curious

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

    Hey great video and thats true i've learned lot more from this video.. but can you help me with something i just wanna how to create those memoji it will be very helpfull if you share with us..

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

    When are you uploading the final part????

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

    Hi love the video!
    i have a question about the my reads card what if we have a lot more books i dont get how will it be able to show them

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +2

      Yeah, sounds like that will require some creativity for sure 👍

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

    what site can I use to put in emojis for windows please?

    • @frontend-tribe
      @frontend-tribe  Месяц назад

      Not sure right off hand - maybe font awesome?

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

    after completing hero section animation i got this error " Warning: React does not recognize the `shouldSpin` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `shouldspin` instead. If you accidentally passed it from a parent component, remove it
    from the DOM element. " how to fix....

    • @frontend-tribe
      @frontend-tribe  Месяц назад

      Hard to say without seeing the code, sorry.

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

    what about navbar?

    • @frontend-tribe
      @frontend-tribe  Месяц назад

      It’s the final challenge for you to complete 😅

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

    Can I have the css background for elementor please? The moving background is so beautiful.

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

    also the buttons are not working example the header button no tapping does not take me to that section, similarly footer links, is that needs to be done separately

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +1

      Yup, I didn’t add that piece 👍

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

    hey, when i tried to add new icons, their colors don’t change to the gradient, they show up as the original colored image
    How can i fix this? Thanks!

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      You might need to adjust the props - svgs can be tricky sometimes 😅

  • @mohammadmonir6476
    @mohammadmonir6476 17 дней назад

    which is your browser

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

    Great

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

    Is someone have this complete template repo in Git Hub or other resources ?

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

    This look's great in most browsers, however it seems to have issues in Safari. Has anyone overcome these?

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Might just have to do with using ‘autoprefixer’. Check out the tailwind docs for how to set it up. I usually demo in safari so it should work…

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

      @@frontend-tribe
      I want to start off saying I love your content. Keep up the great work! Plenty of value here!! Thank you very much. I will check this out.
      I had a play around myself in the mean time:
      Issue 1: I ended up having to use the tailwindcss ring class instead of outline, as it was cutting off the rounded corners on the cards.
      Issue 2: I found the site moved on the horizontal axes, so I added this line to the global css -
      html,
      body {
      @apply overflow-x-hidden;
      }
      This then caused an issue with the first card animation due to placing the overflow-x-hidden on the main html and body elements. So I experimented with framer motion to resolve this. There may be an easier approach to this I'm not aware of??

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

    Hey you didn't finish doing the navbar. It's not functional.

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

    My frintend skills are 0 can i follow u ? Btw im nore in backend but your videos looks cool

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      No problem, I’ll teach you 👨‍🏫

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

    can i anyone show a demo website of this? thanks!

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +1

      Or you could build it along with the video 😁

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

    Any one know ka sir na yajo svg use ke hai project ma ya kaha sa download ke hai ku ka mane typescript aur next js ke karni hai to wo nahi ho rhe sahi download please Any one help me

  • @Hot-tj2jd
    @Hot-tj2jd 2 месяца назад

    When part 3 will published?

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

      Did he say there is going to be a part 3? I am yet to watch the video though.

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      No part three - this is the final one 👍

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

      @@frontend-tribe I made 2 comments and i cldnt see them. ?

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

    Bro make a mrn stack Blog Web app like medium which we have cms/Admin

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +1

      That would be cool - might do that in a future video 👍

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

      @@frontend-tribe yeah bro 🤘🏻

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

    What if I got stuck in code, because u didn't share the entire code.
    Second, I use VS code is it ok?

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +2

      Yes, VSCode is good 👍. If you get stuck, just go back and watch again. I walk through every line of code 😊

    • @dev-akeel
      @dev-akeel 2 месяца назад +1

      Share your repo here and the issue maybe someone (or I) will be able to help.

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

    السلام خويا أنا web developer عندي إنجليزية مزيانة. بغيت نهاجر. أنا عندي مستوى مزيان ولكن معنديش تجربة فشركات! درت خطأ أنني بقيت بزاف freelance والصراحة حتى لي بروجي لي كنت كنخدم ماشي شي حاجة لي تحطها ف portfolio وتكون فخور بها أغلبية غير مواقع wordpress. مؤخرا خدمت على جوج بروجيات كبار باش نحطهم ف بورتفوليو. يلا عندك نصائح لي تقدر تعاوني بيها

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +2

      Best tip is to keep building great projects! If you build enough things that are great you’ll gain experience and learn the skills as well 🙂

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

      ​@@frontend-tribeI don't know what happened! I commented this on another video talking Moroccan language.

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

      @@frontend-tribe I’ve been self-learning since 2016, gaining significant experience and a deep understanding of web development. However, due to a lack of guidance, I made a mistake by spending too much time on freelance projects that I’m not proud to showcase in my portfolio-mostly WordPress websites. Despite this, I’ve never stopped learning. Lately, I’ve started to feel confident in my skills and have been considering getting a job with a company. I’ve lost hope in finding opportunities in my country, the opportunities here are very limited. which is why I’m thinking of going abroad. My current struggle is that I don’t have real experience working with a company. So, my strategy now is to build large projects that I can feature on my resume to demonstrate my skills.
      That was my comment to the other guy seeking advice.
      Thank you for your reply. I’m actually surprised you managed to translate that, because it’s not Arabic that's our local language in Morocco.

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

      @@frontend-tribe I’ve been self-learning since 2016, gaining significant experience and a deep understanding of web development. However, due to a lack of guidance, I made a mistake by spending too much time on freelance projects that I’m not proud to showcase in my portfolio-mostly WordPress websites. Despite this, I’ve never stopped learning. Lately, I’ve started to feel confident in my skills and have been considering getting a job with a company. I’ve lost hope in finding opportunities in my country, the opportunities here are very limited. which is why I’m thinking of going abroad. My current struggle is that I don’t have real experience working with a company. So, my strategy now is to build large projects that I can feature on my resume to demonstrate my skills.
      That was my comment to the other guy seeking advice.
      Thank you for your reply. I’m actually surprised you managed to translate that, because it’s not Arabic that's our local language in Morocco.

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

    can't login to frontendtribe

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Shouldn't be a login. Just go to the link at the top of the description 😀

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

      @@frontend-tribe I thought it's a bug bc login with GitHub and nothing happens 🤔

  • @ArunKumar-dz6rx
    @ArunKumar-dz6rx 2 месяца назад

    can we have the code

    • @frontend-tribe
      @frontend-tribe  2 месяца назад +4

      The best code is the code that you build yourself ☺️

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

    💖💖💖

  • @Tony-Red
    @Tony-Red 2 месяца назад

    Is it just me or is your channel volume always super low?

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

    I posted a comment and i cant see my comment again.

    • @frontend-tribe
      @frontend-tribe  2 месяца назад

      Not sure why - I can see this one ☝️

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

      RUclips censors everyone. I had my other account, can't comment on some yt channels.

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

      @@_gigachad177 Really annoying. I was trying to share my work on how i completed the design before the part 2 came out but YT did their thing.

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

    deploymnet plzz