How To Build A Portfolio Website: React.js, Next.js 14, Tailwind CSS, Shadcn UI

Поділитися
Вставка
  • Опубліковано 19 жов 2024

КОМЕНТАРІ • 67

  • @cedricd9108
    @cedricd9108 11 місяців тому +3

    Thank you for this work! it's incredible the resources are available, no more training and learning with you

  • @Salah-YT
    @Salah-YT 6 місяців тому +1

    Thank you so much! I just completed the project and it was truly amazing. However, I have a suggestion for the next time. Could you please explain things verbally for beginners like me? Also, I was wondering if you could create a full-stack portfolio with backend and authentication. That would be great! Thank you again. I really like your coding style.

  • @alvin151
    @alvin151 4 місяці тому +3

    It's a great project with a very clean design. I plan to use this as my new portfolio. However, there is a small issue. You added a scroll listener to the header; after scrollY > 50, the py-4 will change to py-6. This may cause a loop if the scrollY is near 50. I think the changing py value might affect the scrollY position.

    • @mohanrajc989
      @mohanrajc989 2 місяці тому

      what is the solution then?

    • @Iszzytone
      @Iszzytone 4 дні тому

      @@mohanrajc989 Use the same padding py-6 for both variations

  • @ThunderboltPath
    @ThunderboltPath 9 місяців тому +1

    Awesome project! Exactly the material and stack I’ve been looking for

  • @topdoggin1
    @topdoggin1 6 місяців тому +1

    What an absolute gent, thank you sir.

  • @DotSquall
    @DotSquall 4 місяці тому +1

    This is really cool, I'm new to react and next and i'm learning a lot, i bought you a coffee and got the source coda :)
    I might even try to tweak it and use it as my portfolio.

    • @vishalshahdev
      @vishalshahdev 14 днів тому

      Have you deployed your website in any platform, if yes share the link in this comment.

  • @FullStack_Pro
    @FullStack_Pro 11 місяців тому +1

    This is awesome! I'm learning Next js in practice from your videos!

  • @godsonselorm2682
    @godsonselorm2682 11 місяців тому +1

    It's about time. Thanks bro

  • @saisuryatejachavatapalli
    @saisuryatejachavatapalli 10 місяців тому +1

    Awesome Tutorial, Absolute best!!

  • @benixmaximus
    @benixmaximus 11 місяців тому +1

    Woah... Just found your channel. Can't wait to get stuck in. As a suggestion it would be cool if you could create a video for a Digital Agency website.

  • @huannalmeida
    @huannalmeida 7 місяців тому +1

    thank you so much for sending this!

  • @KhaliqKarimy
    @KhaliqKarimy 11 днів тому +1

    Thank you for this great work! can i use your asset folder for my self project?

  • @oyepariolaoluwalonimi8185
    @oyepariolaoluwalonimi8185 11 місяців тому +1

    I’ve been waiting or your next video fr

  • @ashwanikumar4486
    @ashwanikumar4486 11 місяців тому +1

    Nice job sir, it's incredible the resources are available😊😊😊

  • @PremVakilVarma
    @PremVakilVarma 10 місяців тому +1

    57:45 By Pressing CTRL+ click , you can jump into that components file.

  • @TayyabAliCheema-t4w
    @TayyabAliCheema-t4w Місяць тому

    Hey Cristian, Thank you for this awesome tutorial. I have just finished the tutorial. I am facing problem in cropping my images according to the background of Hero and About Section. As I am not familiar with the Figma and Illustrator or Photoshop. How can I crop my images according to the background? I shall be grateful.

  • @bhargavparekh2560
    @bhargavparekh2560 7 місяців тому +1

    Thank you so much

  • @misslael1094
    @misslael1094 11 місяців тому +1

    Always awesome ❤️

  • @sarimkhan2306
    @sarimkhan2306 4 місяці тому +1

    How did you create blob and developer image for background? did you use Adobe Illustrator

    • @cristianmihai01
      @cristianmihai01  4 місяці тому

      search for blobmaker on google and it's a website where you cand do any blob shapes

  • @kachicelestine9659
    @kachicelestine9659 11 місяців тому +2

    Men we really love you.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 11 місяців тому +1

    Thanks Cristian :3

  • @datello
    @datello 10 місяців тому

    Dear Cristian, excellent work! , I just have a question, could you please write to me internally.

  • @brainybeats4kid
    @brainybeats4kid 9 місяців тому +1

    Many thanks

  • @ValixxOnline
    @ValixxOnline 9 місяців тому +1

    Hey. What font do you use in your editor?

  • @camilomanuelcangaro7503
    @camilomanuelcangaro7503 11 місяців тому +1

    Hello genius I want to ask you a question, what program can I use to make those cropped and borders on your profile picture to make it look the same?

    • @cristianmihai01
      @cristianmihai01  11 місяців тому +1

      Hi, I'm using Figma for all my designs, check it out and see if it works for you! :)

  • @klutchboi3266
    @klutchboi3266 9 місяців тому +2

    Can i use the design for my own portfolio?

  • @mohanrajc989
    @mohanrajc989 2 місяці тому

    can i use typescript? to modify or add certain components from accentricity

  • @codewithandres
    @codewithandres 11 місяців тому

    Wo brutal

  • @RABWA333
    @RABWA333 9 місяців тому

    Is it possible to tweak it to be a websites for small startup the provides consultancy?

  • @alisufiyan5133
    @alisufiyan5133 10 місяців тому

    The `xl:text-[72px]` class does not exist. If `xl:text-[72px]` is a custom class, make sure it is defined within a `@layer` directive. facing this issue after the new tailwind update.

    • @tharakakarunarathne2420
      @tharakakarunarathne2420 5 місяців тому

      these are arbitrary classes. It doesn't need to be in the tailwind. we can just add anything like this.

  • @Solutionist_nik
    @Solutionist_nik 7 місяців тому

    Hi can you send a tutorial showing how to export this and deploy in c-panel

  • @benixmaximus
    @benixmaximus 11 місяців тому +1

    When you click inside of an element bracket, it creates a border around the contents. Is this an extension?

    • @cristianmihai01
      @cristianmihai01  11 місяців тому +3

      I can't rember exactly but this is my extension list 👇
      Theme: Material Community Theme
      Icons: Material Icon Theme
      Font: Jetbrains Mono
      Extensions:
      ES7+ React / Redux / React-Native snipppets
      File Utils
      Auto Close Tag
      Auto Rename Tag
      Highlight Matching Tag
      Live Sass Compiler
      Live Server
      Path Autocomplete
      Path IntelliSense
      Prettier
      Simple React Snippets
      SVG Preview
      Tailwind CSS IntelliSense
      Thunder Client
      vscode-faker

  • @whatsweetyeats
    @whatsweetyeats 7 місяців тому

    Hi , Awesome code , but I got stuck with hero section background image on dark mode. bg-none property is not working . any solution ?

    • @billymaaa
      @billymaaa 5 місяців тому

      Add "bg-transparent dark:bg-transparent" to the list of classNames

  • @너굴맨-n1d
    @너굴맨-n1d 8 місяців тому

    3:36:36 checkpoint

  • @harshmistry3231
    @harshmistry3231 3 місяці тому

    I am getting issue with navbar in home page it is working well while in other page it is transparent

  • @MikeeBuildstech
    @MikeeBuildstech 10 місяців тому

    Hey Cristian, im @2:08:40 and when i add the flex class it makes the text inline and not in a row like yours, ive tried taking out the flex class but it messes up that whole section design. any clues to whats happening?

  • @rohitdubey2954
    @rohitdubey2954 3 місяці тому

    I want the mobileNavBar to be auto close when click on any links, can you tell me how can i do it?

    • @rohitdubey2954
      @rohitdubey2954 3 місяці тому

      Never mind, i have done it myself.

  • @lisasaghia8653
    @lisasaghia8653 9 місяців тому

    Hello, when i code in react and next js every single change that i do i must do npm run build and npm start, instaed i see that you just click ctrl s, how this is possible ahahah can hou help
    Me ?

    • @dandres21
      @dandres21 9 місяців тому

      Hi, just use npm run dev instead build and start

    • @lisasaghia8653
      @lisasaghia8653 9 місяців тому

      i love you
      @@dandres21

  • @atharva_A
    @atharva_A 10 місяців тому

    hey mate, so i encountered an issue as i am not able to get the underline hover effect on my page
    can you please help me?

  • @datello
    @datello 10 місяців тому

    Dear Cristian, I bought a coffee...:)
    I can't visualize exactly how your code is written.
    Could you help me to deploy the project please.
    Best regards,
    David

  • @AIByBard
    @AIByBard 10 місяців тому

    1:46:06

  • @onlycode7513
    @onlycode7513 10 місяців тому

    2:01:15

  • @codingzonebd
    @codingzonebd 8 місяців тому

    usescroll hook

  • @ravinduwellalage
    @ravinduwellalage 7 місяців тому

    whyyyyyyyyyyyyyyyyyyyyyyy