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

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

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

  • @selimpy8105
    @selimpy8105 2 месяца назад +21

    bro is chef that cooks the best tut ever nice work!

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

    You are absolutely one of the best RUclips channels out there, great work!

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

    Man the way you code is really helpful, like teaching everything from scratch step by step why that's happening or how we can achieve a particular design. And the zooming in while you writing is a life saving thing for me as I watch on phone. Keep going!❤

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

      Awesome, glad it's helpful! I do think about people who might be watching on smaller devices, so glad that makes a difference 😊

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

    Where in the World is this master coming from, Great Work.

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

      Thanks for the kind words - glad you liked the video 😊

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 месяца назад

    Great , you learn a lot of transitions and frontend improvements in your channel , it is appreciated that you take the time to explain everything step by step

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

      Glad you’re learning a lot from these 😊

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

    oh my my .......A bow to the masters ......i dont know what to say ...your amazing .....i will surely build this ..let me finish the previous one

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

    Finally , the content I was looking for , thank you so much 🥰

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx 2 месяца назад +9

    Omg after watching this dude I am leaving the full stack development right now and going to be a frontend dev only😂

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

      why bro

    • @AjaySingh-jz8qx
      @AjaySingh-jz8qx 2 месяца назад +1

      @@nky7033 because I love frontend part more than backend😁

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

      ​@@nky7033 Can you share your git-hb i-d?
      I'll give your repo a star and you give my repo a star..!

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

      I’ve spent a decade almost exclusively in frontend. Can’t recommend it highly enough 😊

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

      @@frontend-tribe Your github? I want to give your repo's a star 🌟.

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

    Thanks a lot, bro. I'm currently watching and coding along with this video, and I really appreciate it. I just have a small piece of advice: please make sure to let beginners know how challenging it can be to arrive at the solutions they're seeing in the video. I know it may seem easy when following along, but in reality, there are ups and downs, trial and error.
    Why am I saying this? I've been a developer for about 5 years now, but when I first started, I noticed how effortlessly the tutor seemed to figure things out. However, when I tried to do it on my own, I realized how difficult it really was-so many bugs and frustrations. That's when I learned that what looks like a simple two-hour tutorial might have taken the creator a week or two to code, not to mention the editing.
    By the way, I don't usually comment on RUclips videos, but I had to say this. Thanks a lot, bro. Peace out! And don't worry about any grammatical or typographical errors.

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

      I really admire your mastery of CSS and creativity-you're so talented! How many hours or weeks did it take you to code this? Also, could you please share your thought process? Specifically, I'd love to know how you measure sizes to match the designs exactly with the Figma layout.

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

      Oh yeah, definitely easier once it’s all figured out 😄. Thanks for the kind words!

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

      @@frontend-tribe done with the whole design now...

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

    Amazing! One of the best portfolio tutorials available out there on RUclips 👌👌

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

    Thank you for this; I admire your dedication to share this with others. I have never used tailwind before so I'm excited to try it out.

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

    Amazing work brother, i have just set a reminder, once part 2 drops i watch... i don't like waiting long..

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

      No problem - planning on dropping that vid next week 👍

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

    Learned so much from your videos. Excited to see part 2

  • @KimJune-x2s
    @KimJune-x2s 2 месяца назад

    thanks again bro, have nothing to give back to you besides like and subscribe. Very grateful to you for giving us a tutorial like this

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

      That’s enough for sure. Glad I could help!

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

    you deserve 1M subscribers, please keep it up

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

    How many years have you been in design and frontend developing? Btw tysm for video, i didnt actually built this but i got very inspired, the layout in my portfolio is almost same. Also, is this tutorial mostly for ppl looking for job? I mean, theres this happy clients section so im asking

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

    this channel is going to boom soon

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

    part 2 pls
    this is awesome

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

    Nice work! please can you show how to make svg globe animation like vercel have on their page

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

      Maybe in a future tutorial 🤞☺️

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

    Absolutely great.

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

    That's Amazing Awesome keep it up 👏

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

    Whens part 2? Would love to build this along with you but kinda worried you leave off part 2 for a very long time ahaha

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

      Planning on releasing it next week. Stay tuned 😊

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

    amazing channel, already can see 100k subs!

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

    best tutorial 🔥

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

    Great and detailed explanatory video!
    Is there any extension to view a responsive window? How can I do this on Windows?

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

      Browser link in the description 👍

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

    What browser do you use? I love the feature that allows three media previews at the same time.

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

    liked and subscribed after first 10 minutes

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

    Love your voice and content!

  • @samtekh9696
    @samtekh9696 2 месяца назад +14

    When would part 2 be ready?

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

      Check back in a week 😉

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

      @@frontend-tribe can u make video part 2 as fast as possible? pls

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

    Another banger!

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

    yo, i want to ask about the slider that you move to see css changes, is that an extension or what ?

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

    another great video!

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

    Good work boss!

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

    I am in :) let's GO :))

  • @rain-2263
    @rain-2263 2 месяца назад

    You're the GOAT 👑

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

    Is this portfolio a good finished project? I have participated in many such lessons where they make some kind of website, and they finish the lesson when the project is still raw

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

      Yes, at least after I release part 2 ☺️

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

    Dudeee. I was creating a tutorial on this Figma design 😂 Anyway great job

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

      😅 - I didn’t stick to the Figma, kind of made my own version 😁

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

      @@frontend-tribe Yeah. I noticed that too but great build

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

    lovely!

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

    Just completed part 1 my css fear is going away i will start part 2. please make videos of state management usage in next with redux or recoil

  • @TedrosKahsu-qw4oo
    @TedrosKahsu-qw4oo Месяц назад

    Let me save you some debug time at 14:06 add weight of 600 to inter
    const inter = Inter({
    subsets: ["latin"],
    variable: "--font-sans",
    weight: ["600"],
    })

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

    Quality content.

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

    which chrome extension you are using?

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

    Thank you so much

  • @AnuragTeckchandani-ev3zf
    @AnuragTeckchandani-ev3zf 12 дней назад

    at 1:14:28, why did you choose 10 as the z-index. I tried changing and it only seems to work on 10.

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

    Nice One! You tried to clone JsMastery
    Welldone

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

    didn't get all the resources - trying to download on windows - if possible can anyone provide the github link?

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

      If you need help shoot an email to support@frontendtribe.com

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

    hey peeps, do you suggest this video for beginner to Next.js

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

      It’s doable even if you don’t know much about next.js - I walk you through it 👍

  • @mohamedalgharib-uc7sj
    @mohamedalgharib-uc7sj 2 месяца назад

    Hi.. Its agreet, can i ask you about the browser you use or the extntion name ? 🎉🎉

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

      Check the link in the description 😊

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

    so helpfull for real

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

    Waiting part-2

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

    the form isnt working, im not getting the email for some reason

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

      Shoot an email to support@frontendtribe.com

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

    Amazing

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

    does anyone have the completed github link

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

    I finally have a portfolio 😭

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

    at last part ofprojects section for desktop version my image is overflowing outside the container and i have done same as you -

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

      Not sure - might just need to rewatch to see if you missed something 👍

  • @ReactTrader-d1m
    @ReactTrader-d1m Месяц назад

    please help me for initail setup

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

    Is there any link for the live version? I want to test this website

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

      If you build it, you can test the live version after that 😄

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

      @@frontend-tribe don’t get me wrong, your video is truly amazing. But there is already dozens of similar videos here on youtube.
      That being said, checking the final live version is important for me in order to decide whether I want to build your solution or not

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

    please release part 2

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

      Its out now 🎉 ruclips.net/video/72OKuwYxWf8/видео.html

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

    When is Part 2 releasing?

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

      Look for it in the next couple of days 😊

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

    can you provide that image for Mobile, Ipad and desktop so that we can also put in polypane browser

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

      It’s in the resource bundle 👍

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

      @@frontend-tribe No it is not in resource bundle. I was asking about the figma image which you had put in your ploypane browser(Mobile, Ipad and Desktop View Figma Image) to verify the page side by side. Resource bundle includes website images and icons only.

  • @farid-game
    @farid-game 2 месяца назад

    Is it possible to share the Figma design with us?

  • @ReactTrader-d1m
    @ReactTrader-d1m Месяц назад

    sir appne depedencies ko install karke ku show nhi kiya

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

    I cant do any className to your icons - so i am forced to use React-Icons instead. How can you write className onto your icon components?

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

      Not sure right off hand… it worked in the video?

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

      @@frontend-tribe its weird though, not the biggest "eeeeh" moment, but still weird 🤣
      And it was good you made use of @layer for reuse css classes xD which extension you use for having Long className to wrap auto for next lines?

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

    can i get the full source code for this? anyone has completed this??

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

    can you plz add backend to this project and implement admin dashboard?

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

      That would be interesting. Might do something like that in an upcoming video 🙂

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

      @@frontend-tribe thx, i am waiting

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

    which ai voice do you use un you video

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

    where is the github repo where the code is there?

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

      No repo for this one, just the starter code…

  • @ManishKumar-xt6kf
    @ManishKumar-xt6kf 2 месяца назад

    bro cooked

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

    Your site login not working

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

      🤔 - did you try the landing page for the assets? The one starting with lp.frontendtribe.com?

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

      @@frontend-tribe no your official one

  • @crazyboy-gw7rk
    @crazyboy-gw7rk 2 месяца назад

    source code?

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

      The point of the video is to build the source code 😅

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

    i dont understand why these Js mastery like Courses are now trending these days.. nobody will learn anything if they just Copy paste with brief to no explanation at all .. i'd prefer tutorial hells over these videos.

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

      Brief to no explanation?
      It has a lot of explanation of it, Doesn't it?

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

      It’s a good thing you are speaking for yourself

  • @saikumarponnaganti-w1b
    @saikumarponnaganti-w1b 2 месяца назад

    hey, frontend tribe...I would like to know your official mail for promotion.

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

      Not sure what you’re asking for…

    • @saikumarponnaganti-w1b
      @saikumarponnaganti-w1b 2 месяца назад

      @@frontend-tribe we have a website to promote. so were looking for youtube channels related to frontend dev. I have noticed that didn't mentioned any to social media platforms to contact. If your interested you can provide your official email or social media -- Instagram & twitter