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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

🧡 Get Source Code

💙 Get Source Code With PayPal

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

📁 Assets

Download Images:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

⏱ Timestamps
00:00:00 Project Intro
00:05:05 Project Setup
00:12:50 Theme Provider
00:14:41 Theme Toggler
00:20:10 Scroll Progress Hook
00:27:14 Header
00:42:42 Hero
00:58:32 CSS Variables
01:23:24 Mobile Nav
01:27:23 About
02:24:05 Services
02:34:48 Work
03:01:24 Reviews
03:12:54 CTA
03:16:26 Footer
03:21:10 Projects Page
03:36:54 Contact Page

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#nextjs #tailwindcss #portfolio

[cedricd]

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

[DotSquall]

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.

[alvin]

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.

[Salah-YT]

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.

[CompleteReality]

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

[FullStack_Pro]

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

[topdoggin]

What an absolute gent, thank you sir.

[benixmaximus]

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.

[PremVakilVarma]

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

[ashwanikumar]

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

[oyepariolaoluwalonimi]

I’ve been waiting or your next video fr

[mohanrajc]

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

[sarimkhan]

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

[TayyabAliCheema-tw]

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.

[benixmaximus]

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

[harshmistry]

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

[camilomanuelcangaro]

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?

[klutchboi]

Can i use the design for my own portfolio?

[RABWA]

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

[datello]

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