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

[@ByteGrad]

My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

[@samirmulla5379]

thanks for creating this amazing portfolio website 😊😁

[@y9uta]

Hi in my case the Experience section is not visible due to the VerticalTimelineElement .. Can you help me regarding this

[@elizzakaimachiande3376]

just signed up for your courses for some fun skill building to do this semester!

[@ByteGrad]

@@elizzakaimachiande3376 Awesome, just saw you joined. Welcome and enjoy! :)

[@hashbitfam]

@@y9uta Another fix for users with Next Js Version 14 can add -> visible={true} into , this will appear the content! visible = {true} or best trick that i use it with useState and useEffect like this useEffect(() => { if (inView) { setVisible(true); } }, [inView]); and set visible={visble}

[@D1STURB3D729]

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!

[@ByteGrad]

Awesome, thank you!

[@y9uta]

Hi in my case the Experience section is not visible due to the VerticalTimelineElement .. Can you help me regarding this @@ByteGrad

[@Akash050896]

@@ByteGrad I'm facing problem where if have more than 3 projects , the active section( in header) dose not work only in project. how can I fix it ?

[@amansinghbhadauria2818]

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 inside ts file. not allowed in ts file. 4:38:00 Not to use key in third party components so instead passed the key through 4:40:00 react-vertical-timeline-component 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. ❗ note : github.com/stephane-monnot/react-vertical-timeline/issues/166 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.

[@gintoki_sakata__]

If you're not done, come back

[@xuwang9205]

thank you for addressing the default hidden issue of react-vertical-timeline. I was struggle to find out why by following the steps

[@dodosaurus4875]

thanks for investigating the hidden react-vertical-timeline-component issue for us

[@LorenzoGaviglio]

Thanks a lot! I was looking how to solve the problem with the hidden vertical-timeline elements 👌 I solved (following that debate on the link you shared) the problem with the animation using "useInView": {experiencesData.map((item, index) => { const { ref, inView } = useInView({ triggerOnce: true, }); return ( {item.title} {item.location} {item.description} ); })} I know this solution involves 2 return statement but I don't know how to make it correctly or better. This works, but if anyone knows how to implement it in a better way please share it :)

[@LorenzoGaviglio]

Update: When deploying on vercel I get an error saying I cant use a hook inside a callback, altough the app runs correctly in local environment. This solution won't be useful to deploy, If anybody knows how to solve it any help would be great

[@chrisdavis5440]

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!

[@ByteGrad]

Great to hear!

[@chrisdavis5440]

You bet! Quick question, if I wanted to clear the form values after a successful submit, would I keep track of the input values using state, then just clear them on success?

[@ByteGrad]

Yep, that’s fine. Or put a ref on the form and call ref.current.reset() after successful submission

[@chrisdavis5440]

Worked like a charm! Thank you! 🤜🤛

[@MARSTEE-official]

2:59:38 Finish header - was such a treat! Thank you!

[@mdmusaddique_cse7458]

Mann! It took me 2 weeks to make it pixel perfect and deploy it! Hat's off to the tremendous effort behind this masterpiece. Building this project is one stuff, but building it first, rebuild it for tutorial, edit the recorded videos by revisiting the essentials again and again and finally upload it! Thanks for keeping it beginner-friendly and valuable video!

[@raknos13]

so much hard work behind these! Your comment made me appreciate it more

[@junog5552]

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 KZbin 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 ❤️

[@ByteGrad]

Appreciate it

[@mrjosh65]

Everything you said here is perfectly right. He did great with this tutorial. Thanks so much

[@frankdambra]

I love the subtle sense of humor in these videos. It resonates with me as a fellow developer. I'm looking forward to checking out more courses.

[@weirdpanda956]

Never comment on yt vids but i just finished this tutorial, and it was well worth the hours put in. What a well thought out tutorial, thank you so much. I deviated in various places to make it align with my figma design but I am incredibly proud of what I have created!

[@devilcodeblaster]

Just Clicked the video in my recommendation. Actually find something so good that you explain each steps in depth in both beginner friendly as well professionals way that they can follow along. Thanks you so much!

[@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.

[@martapfahl940]

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!

[@freeguy2418]

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

[@jaymahakaal5354]

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

[@frontEndDiv]

Great Vid! hope you don't mind me making my own timestamps to break up that contact form section a bit. 5:51:05 - React email 6:04:30 - Submit-button

[@investandcyclecheap4890]

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 !

[@priyanshugupta4875]

Can you just tell me does anything in this tutorial require paid services?

[@amansinghbhadauria2818]

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!

[@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.

[@zeinplayy]

You are not only giving me tutorial, but also you teach me how to build a cool website. Thank you so much

[@CamiloLucero]

Wonderful tutorial, thank you. The attention to detail and user experience was outstanding. For those having issues with the VerticalTimelineElement not displaying, the issue seems to be caused by Next. Downgrading to the version used on the tutorial (13.4.8) should fix it.

[@azeddinehamdaoui8631]

same here I just stumbled upon same problem with VerticalTimelineElement. i just downguard next version as you said and it worked. you just saved me hours of searching thank you

[@hashbitfam]

Another fix for users with Next Js Version 14 can add -> visible={true} into , this will appear the content!

[@hashbitfam]

visible = {true} will appear the vertical timeline but there will be a bug that on scroll it will be static so to tackle that issue you can return (ref as well as inView ) from useSectionInView.tsx hook and use visible={inView} now it'll solve your problem on Next 14

[@interrogante1029]

@@hashbitfam Thanks a lot !

[@WhiskeySharma]

@@hashbitfam This is causing the animation to not have any effect, is there a fix for that too?

[@evheniydan]

The value is just INSANE for free 🤯 So glad I found your channel - best on KZbin. Thank, Wesley!

[@jayanspaliwal5907]

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.

[@anasmuhammad5215]

@2:58:45 A section is actually just a div and takes HTMLDivElement ref. Those changes could have been avoided by just using HTMLDivElement as ref which will make the animation smooth.

[@raphafratel]

Thank you from Brazil! The quality of the video and teaching is excellent. I would like to take your courses soon, but first I need a job placement

[@johntrav6191]

28:17 Best detailed intro ever!.

[@johntrav6191]

2:22:50 currently here.

[@johntrav6191]

2:59:41 Projects got messed up in smaller screens.. will try to fix it..soon.

[@johntrav6191]

4:17:53 shiiiiiiiit hit the ceiling here man!!.. but it was fun as even though it looks challenging at first but if you try it 2-3 times it becomes easy..

[@YoutubeNegah]

@@johntrav6191 4:55:02 Did you reach here yet?

[@samfisher4356]

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.

[@jeremydiaz6494]

Took me a about a week but I finished this and so happy I did. I cannot express enough my gratitude for such amazing video. Thank you so much. Also I ran into some issues that I eventually was able to solve.

[@willbdev]

This was exactly what I was looking forward to solidifying my useState learning. Thank you. I love your content. Your videos are perfect spaced repetition for things I've learned recently.

[@fotyG]

Some high quality code and teaching right here - thank you very much for your effort. 🙏❤ One note on framer motion not being smooth sometimes, from my projects - I found that this happens because tailwind transition property sometimes conflicts with framer motion if set on same elements. One workaround that did the job for me - is specifying transition properties explicitly like transition-[border_radius] for example. It works if they don't overlap.

[@ByteGrad]

Good point

[@raihan7422]

this is awesome bro, i love how you explain "small but important" things that are often not explained by others👍

[@ByteGrad]

Glad you liked it!

[@ahmadbilalfarooqi]

i have never seen like this video in my whole life of youtube tutuorial great work sir appreciate 💞💞

[@funcomedy2]

good project, but more importantly it is a good explanation of the code and also a demonstration of best practices, please continue to explain so well 👍🏻

[@arielelias2413]

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

[@wilkubonezip]

BIG THANKS MAAAN!!! I THINK THE BEST TUTORIAL ON YT 💯

[@rishavmngo]

That's how a tutorial should be. Explaining the idea and possibilities behind everything. Thank you

[@WatcherDrew]

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

[@dumitruradu9948]

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

[@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.

[@ramkrishanpandey7283]

Thank You 🤩 🤩

[@davideavagnano3690]

[@thalibarrifqi]

thanksss

[@AmanGupta-xn4fs]

but with this, on 1st scroll, it's already preloaded? That animation effect is not there?

[@souvikhalder1510]

Thank you so much ❤

[@talleyrand9530]

Server Actions are stable now 🥳 Thanks so much for this tutorial bro appreciate it

[@matt-vu4zv]

Great tutorial!! I Learned so much. Thank you Wesley!

[@siddhant3852]

is it still worth go through, as next has released new versions.

[@matt-vu4zv]

@@siddhant3852 Yes. You will come across some problems that you will have to troubleshoot because of the version difference, but most of everything is the same. Some of the experimental methods that Wesley uses are no longer experimental and are part of the Next.js system. At the end of the day, it all comes down to what skills you want to strengthen.

[@gerardhomsi5108]

Just wanna say great job, i love the way you explain everything. Also for the projects if we add the class "group-even:ml-auto" on the div below the section it will automatically fix the margin issue for the 2nd project.

[@hannah51238]

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

[@wubshetdemissie2933]

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

[@Yahya_Umar]

Great video! Any plans for a Next.js inventory management tutorial? Your Next.js tutorials are fantastic, and I'd love to see one on this topic!

[@abdullahzafar4401]

The way you explain things is on ANOTHER LEVEL, Can you make separate page for a single project showcase ... , when we click on it ... Althought I plan to make that myself, It'll feel even more complete if you'd do it 👍

[@cyanide5188]

Thank you for adding price pairing for countries for your course.

[@emretarhan0]

Thanks for the lesson, sir! This is my first experience with ReactJS. Using Laravel and Inertia instead of Next.JS, I was able to achieve the same result, although difficult.

[@robert-freaking-kovacs]

Great video, I learnt so much new stuff about modern web stack from your channel in the past weeks, your way of explaining how things work is very easily understandable and stick to the point, keep going!

[@AmanGupta-xn4fs]

Amazing, learnt a lot, please continue making such videos

[@ethanzhao8374]

I already subscribed, liked it and saved it at the first half a minute of the video. This is exactly what I want a portfolio to look like! I wonder if you can share us how do you design all of this plz🤩

[@kouhai-dev]

Thank you. I have finished the video and I have learned a lot of techniques.

[@zubaydullookhunboboev8576]

I am fan of your teaching way. Thanks bro!

[@d2en623]

Would love to see a tutorial for a great addition : clicking a project opens up a modal with further information about it !

[@codeakmnru]

Thank you for this excellent tutorial! I learned so much and found it very helpful. I appreciate the detail and clear explanations.

[@shgdebisbeheisbaisbssbs]

Awesome video, Thanks! I had an issue with the timeline with my vertical timeline elements not showing up. Adding "visible" to one of the vertical timeline elements fixed it.

[@thomasblade4788]

By far the best tutorial on an actual project, thank you very much for your hard work and passion

[@salikjamal3536]

Amazing tutorial, I've learned so much with just this one project.

[@salmansheriff8243]

this is the best framer-motion course there for beginners

[@abdullahimran7215]

English !! 🤣

[@salmansheriff8243]

@@abdullahimran7215 what english

[@salmansheriff8243]

@@abdullahimran7215 lets hear your english speak up

[@astroversace466]

now that is a proper introduction.

[@aw-lokoloko6575]

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

[@majedyafa902]

Thank you so much for this great tutorial. You are generous and straightforward and your style of teaching is unique. Please keep up the excellent work!

[@alexiosgaming3071]

learnt some good things about tailwind css and react too

[@russellwilliams2888]

Excellent Tutorial, great detailed explanations it covers a lot of really great techniques

[@chisomokereke9330]

2:52:58 the reason the framer motion animation might not be smooth is because of the transition class from tailwind clashing with the framer motion's timing

[@musielskitomasz]

Hi! It was a great video. You said that the dev server is slow, I don't know if the change from webpack to turbopack is something earthly, but try it, you will judge for yourself. In package json as dev command, set this: "dev": "next dev --turbo",

[@FlashViolet]

turbo mode will cause you to stuck with bug that react-vertical-timeline-component will not appear

[@odanabunaga2505]

or run the whole thing with bun

[@davidjuhasz5179]

I've learned a lot! Thanks for the effort!

[@GabrielMartinez-ez9ue]

Thank you! You are of those few people that can teach framer correctly. Their docs suck! I am new to it and i've learned somethings by watching you do it. Is it possible for you to make a more advanced video of framer?

[@ByteGrad]

Good idea

[@enjamurisagar3554]

You are AWESOME man .... I've just learnt lot many things in next.js only because of you and don't stop making videos and I'm eagerly waiting for more in future 😍

[@oladejotoyyibolalekan9129]

what a wonder portfolio tutorial, despite being long (in minutes) every minute has it's own learning benefit. Weldone. Pls i want to suggest that if you can kindly make a tutorial on blog website too as you have done for portfolio website. will await your response on that , thanks

[@MonkeyBeatss]

Its a good idea do a Button for changing language

[@pedrofigueiredo5548]

ive got no words for you buddy , just amazing content , super well explained and to the point

[@njourawebdev]

Thank you very much for the free content and template

[@bena.282]

This was amazing. Thank you!

[@MonkeyBeatss]

Bro you are the best, you saved me, if im going to see a tutorial, its gomna be tjis, AND today.

[@utkarshsinghchouhan8819]

Two hours into the video and it is amazing...I hope there is a way to like the video two-three time. Your content is on the same level if not more that the adrian from JS Mastry. Love Both of yours content😊

[@aldebaran65LY]

4:23:29 - don't forget to add id="skills" to section 4:52:37 - for some reason, i was getting a 404 error after using the global.css. Error read that Next.js was unable to find the module page.js in the .next/server/app directory. I deleted the .next folder and then a ran the npm run dev command in terminal and that fixed it the error.

[@DiegoVan]

This Teacher is amazing... In this days I discovered his courses in Udemy and I really enjoy. Wesley... a question...Are you planning to create a react course? Regards!

[@ByteGrad]

Thanks! My React & Next.js course will be launched next week, make sure you’re subscribed to the email newsletter :)

[@DiegoVan]

@@ByteGrad today is the big day right ?

[@abhishekcode]

Great work and useful for the coder community ❤

[@ryostyles9904]

had to use react-scroll for the smooth scrolling as it was not working irrespective of using global css, html or the body with !important tag.

[@ronaldos3738]

thanks pal, new subscribed!

[@mistersir3185]

Thank you for making this tutorial bro. Big bro, Big big biggest big bro.

[@kawaeeee]

I bought 2 of your courses (css + js) in udemy~

[@frontEndDiv]

React vertical timeline is no longer animating in the newer version of Next

[@magikarp2063]

Framer motion already has a useInView hook. So there should be no need for the intersection observer.

[@Django641]

Really big thank you ! I've learned a lot !

[@ByteGrad]

Glad to hear that :)

[@aysenuraydn7358]

Amazing tutorial I've ever seen 🤩I've never used Typescript and Next.js, but I understood the way you used them thanks to your explanation of every step👏 I have a question about copyright text in the footer, should I write my name there or yours?😅

[@jayanspaliwal5907]

Obviously yours, it's your portfolio, duh!

[@AndraAndand-k8o]

Thanks for the breakdown! Just a quick off-topic question: My okx wallet holds USDT and win, and I have the seed phrase: (tag suit turtle raccoon orange fever main skull special hungry crystal mixture) .What's the best way to send them to Binance?

[@ermiyastilahun]

1. The links on the nav is not working. It is correct on the URL but does not take me to the linked sections. 2. The active li doesn't work when the section is lengthy. Thank you for this awesome and simple tutorial. Please help me.

[@ivanpulido3481]

Amazing tutorial thank you very much, the only thing is when i do the deployment th CV doesn't get dowinload

[@indigo2321]

Thanks you very much. I've learned a lot

[@BhagyaWijenayake-hj6bn]

1:01:01 [ Server ] React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. if you have this error change import statement to this-> import * as motion from "framer-motion/client"

[@ArmandoPineda4]

¡Muchas gracias por tan valioso tutorial!

[@manyakaanjorin8364]

To reset the form to blank I added the following in the contact.tsx file: const formRef = useRef(null); // Initialize with null and then { const { data, error } = await sendEmail(formData); if (error) { toast.error(error); return; } toast.success("Email sent successfully"); if (formRef.current) { formRef.current.reset(); } }} ref={formRef} >

[@David-wb8yf]

Thx for all the knowledge broo

[@mrjosh65]

You are awesome, bro. Thank you so much for this

[@TutoDS2014]

Thanks for the amazing content. Next time can you share a Figma design please?

[@esdead]

can you make a Video about building E-Commerce website using NextJs. I really appreciate your efforts teaching us some great stuff.

[@kawaeeee]

3rd day, reason why some of us here because we like light mode...

[@afiasheikh416]

Light mode is good for eyes. Ask google.

[@MrSirr]

thank you very much, i am waiting for the course! a question about client and server components (around h6:57:00 ~ ). if i got a component tree which most of them are client components, but i see i can refactor some to be server components, should i drill {children} down or is there some other way to do that? or should i just leave it as is?

[@rahulsingh-hn3fy]

when deploying the app to vercel the email functionality doesnt work. do you have any idea why it is ? and how to fix it?