Fresh React Portfolio Website (Next.js App, Framer Motion, TypeScript, Tailwind CSS, Email)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Intro
28:05 Setup
50:40 Header
1:18:19 Intro section
2:01:47 Section divider
2:04:40 About section
2:13:53 Projects section
2:59:38 Finish header
4:17:47 Skills section
4:29:42 Experience section
4:45:13 Contact section
6:15:50 Footer
6:19:32 Dark mode
7:11:31 Deploy to Vercel

#webdevelopment #coding #programming

[amansinghbhadauria]

I just wanted to drop by and express my gratitude for the amazing portfolio website application tutorial you shared. It's been incredibly helpful for me in showcasing my projects. Thank you for sharing your knowledge and helping us level up our skills! 🙌

Keep up the fantastic work, and looking forward to more awesome content from you!

[Eldtalk]

I think this must be the best video I have followed so far. Learning so much as you go. You have an amazing teaching skill and you do it perfectly. You keep the tempo and at the same time fill in the details surrounding the topic. Very very good. Thank you very much. Looking forward to checking in your course once I'm done and hope you make more videos in the future.

[freeguy]

I Guess this is the only one comprehensive portfolio guide with a best framer motion inclusion. Great Work mate!

[DSTURBD]

I subbed! Please don't stop making tutorials. The way you break everything down and go into even more detail is very rare with other content creators and much appreciated! As a self-taught web developer this was a goldmine of information!

[jayanspaliwal]

I am a fresher and wanted to build my portfolio website, just didn't know where and how to start, this video is perfect for that.

[martapfahl]

I am only halfway through and learned so much in typescript and generell React like in no other Tutorial, thank you a lot! Funny sidefact I have used the react intersection observer already at work to lazy load a script for a customer support form to reduce data consumption, really nice library!

[investandcyclecheap]

I've really learned a lot so far and I appreciate your style of teaching. You really take the time to explain things in detail, which for a beginner or someone needing a refresh is awesome. Please don't change your teaching style !

[arbionas]

I just found your channel. It has never happened before to check a tutorial all first 27 min with such curiosity without skipping. You kept us hooked! 👏👏👏👏

The way you explained both the cause and the effect, the code, and the product was amazing.

Now excuse me, I want to continue watching the remaining 7 hours.

[samfisher]

Awesome tutorial! Thank you for taking the time to actually explain everything, from small to advanced features. Also great UI/UX work, I'm loving it and can't wait to add some of my own flair to it.

[arielelias]

This is a very kind design. I love the complete UXUI that you used. Hoping you build more things like this!

[jaymahakaal]

New subscriber. Best video to start first project with NExtjs and typescript... Loved 30minutes the introductory part, expecting more Nextjs and typescript projects and seeing your channel grow

[aw-lokoloko]

Super kurs. Teraz jest mi dużo bliżej do TS . Dzięki i pozdrawiam ;) ..

[chrisdavis]

There is so much value in this tutorial. The section on sending an email is pure gold and I haven't seen anything like it on any other channel. Thank you!

[wubshetdemissie]

This is so awesome bud! just got through the entire session. Thanks for your dedication. I hope you get the appreciation you deserve.

[dumitruradu]

The tutorial i was missing in my life. Need more of your content!!!

[WatcherDrew]

Wow you are a legend. Thank you so much for this work. I'll be sure to grab your upcoming course!

[cisdolce]

If you're not seeing any VerticalTimelineElement at @:4:39:44, you need to add the visible={true} property.

it should look like this.
<VerticalTimelineElement
visible={true}
contentStyle={{
background: "#f3f4f6",
boxShadow: "none",
border: "1px solid rgba(0, 0, 0, 0.05)",
textAlign: "left",
padding: "1.3rem 2rem",
}}
....

[junog]

Been watching this video for a few days now. Halfway through the video, i can say it; "What a pleasant lesson to learn". No one I've come across on the react YouTube realm has dissected the react context better than you according to my observation. It was always a half learned concept for me as a beginner. Finally, you helped me clear up the confusion without any extra effort in explanation 🙏

Bless YOU ❤️

[amansinghbhadauria]

Self notes 📝

3:18:00 - Fundamental problem - components that need to get and modify activeState are too spread out, So we can't use prop drilling. So we're using ContextAPI.

3:22:00 - Making the activeSection variable's type more specific to the section names. and making ActiveSectionContextType generics for createContext type.

3:38:00 null issue : activeSection could be null so we'll be creating custom hook.

3:47:09 changing state on component rendering is not recommended. So we'll be using useEffect.

3:57:00 We want to disable the inView blob section change functionality for a second when the link is clicked so it doesn't bobble on its way thus using another useState for keeping the state of the last link click.

4:04:00 redundancy issue: Creating separate file for our custom hook that changes the active section as we scroll over that particular section.

4:34:00 React.createElement() vs <IconTag/> inside ts file. <IconTag/> not allowed in ts file.

4:38:00 Not to use key in third party components so instead passed the key through <React.Fragment>

4:40:00 is by default hidden in the viewport, solved by setting (on parent's prop ) animate={ false } or (on child's prop) visible={ true } but that makes the animation to stop. ❗

4:44:00 Extra style property added to HTML by react-timeline-component causing error in console, solved by setting lineColor property of VerticalTimeline to empty string. Set the line color in globals.css

5:01:00 Hydration Error on using motion on the contact's component section element.

5:09:06 next.js 13 feature Server Actions

5:25:50 Problem sending email through resend API, had to put the API key in a single quote inside the .env.local file

5:28:00 Added null and type check for email message.

5:47:10 Helper function to get the error message from the error.

5:52:30 Creating separate email folder for styled email using react.email

6:01:00 Using React.createElement as the ts file can't understand jsx syntax.

[hannah]

One of the best video projects ever! Great explanations. Thank you very much!