Build a Next.js 14 Portfolio website with Tailwind CSS and Typescript

hello and in this video you'll learn to create this awesome portfolio website using n js14 and typescript there's multiple Pages has animation on transition has swiper sliders one of the best features are these cards which flip on click to give you more information about the project also we have this contact form now without further Ado let's begin all right so the first thing we can do is go to our desktop and create a new folder fer which we'll call next- website make sure to not use any capital letters and let's drag and drop this into our Visual Studio code and expand it next thing we can do is go to view and terminal and paste the command which will get from the official nextjs website and add a slash we are going to use typescript so yes yes yes no yes and no so basically clicking enter a bunch of of times and everything should get installed when that's complete we can run mpm run Dev to run the app in our local server now let's control click onto this link and see the nextjs template now we're going to remove all of this and start from scratch so first of all we can close this terminal and go to app and page. TSX our main page in here we can scroll down and remove everything inside of this return statement and add a main which will say home next we can go to global. CSS and remove all the CSS except for these three lines these three lines ensure that we can use Tailwind CSS in our app next thing we can do is go to layout. TSS change this title in my case to webchain Dev and change the description to this is my portfolio now we can have a look at how this looks in our app and as you can see a completely blank screen which says home exactly what we need next thing we can do is open our terminal stop it from running and say mpm install D- save-dev and framer Das motion swiper and react Das icons now we can start working on the front page but for this we'll need images so you can go to the description down below and download all the necessary images and now that we've moved all the images into the public folder we can close it and go to page. TSX in here we can say class name w- screen h- screen and relative in here we can remove this home and instead add a div this div can have a class name of flex items D Center w-f h - full BG Das cover and BG D sensor next we can say style background image and say URL main dbg do web close this bracket and also add a slash over here now let's see how this looks in the app don't forget to run your terminal and as you can see we have this awesome background in here we can have another div this D can have a class name of padding left of 20 medium devices a padding left of 40 a padding bottom of 56 a medium devices pading bottom of 20 next Flex flex-all Gap D5 z-10 and finally Max dw- 750 pixels in here we can have an H1 which can have a class name of text- 50 pixels text - white and font D semi bold and this can say make anything possible with under here we can have a span this span can have a quite interesting class name this will be text- transparent BG dclip Das text mg- gradient to R Pro from- purple -500 to- c-500 and this can say web development under this H one we can have a P tag which will say some random text and it will also have a class name of text- gr-200 hidden and a medium device and higher block under the P tag we can have a div containing all the buttons this will have a class name of flex-all MD flex-r hidden and om medium devices flex and this can have a link which will come from next SL link this link will first of all have an href in this case SL my- skills and a class name this class name will be rounded -20 pixels BG D blue- 500 on Hover BG D blue- 400 adding x05 ping y over three text- LG text- white and Max dw-200 pixels next thing we can do is go in here and say learn more also we can go inside of this div and make it a group Next let's copy this entire link and let's make a div inside of it this will be a self-closing div this self closing div will have a class name of absolute rounded D20 pixels z-1 BG D white inset -0 opacity d0 group- hover in that case opacity will be 20 we can also change this text to my projects and finally let's copy this link one more time add it in here and say contact me and we should be done with this port next thing we can do is go through divs under so right next to the main and copy the div we just made we'll be making another very similar div for the mobile version this div will first of all be absolute bottom-10 z-20 right -5 next we can remove this medium flex and we can remove this medium flex Das row and we can see on medium devices it's hidden also these self-closing divs that we added are completely useless on the mobile version so we can simply remove them right on this image we can add another image which will be the cliff so we can say Source SL cliff. web next you have an alt of Cliff a width of 480 and a height of 480 under here we can have another div this div can have a class name of absolute bottom d0 z-5 W-4 and h-4 inside of it we can have an xjs image tag this tag will first have source of Slash trees. web also an ALT of trees a width of 2,000 and a height of 2,000 we can make this Auto inad the full and in here add a class name of w- full and h- full and finally we can the final image of our homepage for this we can copy this image tag copy it over here and say start s change this to Stars leave this at 300 and change these values this will be top-10 left- Z and a z of 10 next thing we can do is add a few minor fixes first of all over here we can say projects and over here we can say contact dasme also if her is over here this should be hover and hover and over here we can say Gap D5 next we can go over here and also say Gap -5 and say my Dash projects and over here contact-me now we still have a few more errors with these buttons now if we look over here over here this seem normal but as you can see it seems like we've always selting this button over here which is an issue in a mobile version this also doesn't look correct so to fix that we can simply add Flex over here which will fix uh the mobile part so as you can see now they will be all in a column and next we can go over here and add relative to all of these divs so relative relative and once again relative and this should be fixed now let's see and yes it does work perfectly also we can go to this web development part I'll add a space over here and will automatically give me this space and as you can see now everything looks good well can now move on to the nav bar by the way if you ever have any issues with this Buck fixing you can always go into the description down below and check the source code from GitHub to create Navar we can go into the root of our directory and create a new components folder and in here create a nav bar. TSX and run our EFC next thing we can do is remove the starter text and style the wrapper div this will be class name fixed top- Z z-40 w- full h- 100 pixels BG D transparent Flex justify Das between items Das Center adding x-10 and medium devices a padding X of 20 in here we can add another div which can say class name Flex fx- row Gap -3 and items Das Center and here we can nextjs image tag this tag will first of all have a source let's move this over here and add the source will be slash hor logo do jpg an ALT of logo a width of 40 and a height of 40 this image will also have a class name over a w-f h- full object D contain and rounded Das full under here we can an H1 which will say webchain Dev in my case and it can have a class name of text- white text- 25 pixels and font D semi bold and we can actually move this line up into this div and create a new div under it this can a class name of flex Flex D row Gap -5 and margin bottom-2 this can say socials do map social make an instant return and return an xgs image tag however we haven't created these socials yet so let's do that now to do that we can go into the root of our directory and create a new constants folder and in here create an index.ts and paste all this inside this is simply M static data which we'll be using for the website for example somewhere over here we will have the socials and there they are you can find all this in the description down below so that we can go to navbar select socials and press control space to input it from constants and in here first of all we can the key as this is a map and we can say social. name next The Source will be social do Source the alt will be social let's make this Dynamic and social. name the width will be 20 or rather 28 and the height will also be 28 and now we actually done with this SV bar we can now go to layout. CSX go above the children and add the navbar component now if we look at the navv bar itself this image seems very oversized so we can go back and add another div around this image let's copy this and paste it over here and say last name equals relative and this should fix the entire issue once this eror is gone this slogo is small and everything looks great now we can move on to the navigation so we can now go into the components folder and create a new navigation. TSX and run our EFC we can also straight away make this a client component as we'll be using hooks so use client now we can go inside the component and say use State snippet and say is routing and by default it's going to equal to false as always if you can't use any of the snipp so you can go into extensions and download this extension this is also where RFC comes from so now we can do is also import use state from react next thing we can do is go under here and say const path equals use path name which is going to come from next SL navigation this simply going to give us the current path in the browser next we can say use State snippet and this going to equal is active and by default it's going to equal also we can say use State snippet and this is going to be graev path and by default it's going to equal to slash under here we can have a use effect which will come from react and open damic block of code we can say if gra path does not equal to path in that case set is routing to true and this is going to depend on path and prev path next we can actually change set PR path to the capital letter over here and add another use effect over here first of all it will say if is routing in that case set PR path to path next we can say con time out equals set timeout and this will return set is routing to false but this will only happen after 1,200 milliseconds and while still inside of the if block we can return so return and this will be clear timeout of timeout and this use effect will depend on is is routing next we can go into return statement and remove this navigation text and style this div first of all it will say class name absolute this will be quite on class name z- 50 minus bottom -20 so don't forget the minus w- 50% on medium devices w- 20% Max DH - 150 pixels rounded Dash full Flex justify Dash justify Dash between items Das Center border and Border Das white next thing we can do is move this class name down and over here add a normal CSS style which will say left of 20% and actually now to think about it we can actually remove this set is active use State we don't really need it next we can actually go into here and say nav links. map say nav over here and make an instance return this will return nextjs image tag or the link tag as the Z map we can say key equals nav do name hre will equal to nav do link and this will also have a class name of margin bottom-6 padding X or padding left -4 Min dw- 20% inside here we're going to say nav do icon which will be a self- closing tag we can give this a class name and this will be a dynamic one so we can say w- 24 pixels H-24 pixels also open Dy Dynamic block save p path equals to nav do name in that case text- purple D800 otherwise text- we and I believe we're for now done with this component now what we can do is go to layout. TSX go under these children and say navigation which will come from components and now let's see how this looks we can go into our browser reload the page and something seems to be off as you can see over here all right so let's look at the problems one by one first of all we want this part to be partly under the page but we don't want the page to be scrolled by it so now we can go into global. CSS right here say body and say overflow hidden next we can also go to navigation ation and add a padding y of seven so the icons aren't at the very top and this part is fixed and now let's see if the body part is also fixed sometimes you simply need to reload in the entire page so we can say contrl C in the terminal clear and run it again but sometimes these kind of things don't update automatically it's a weird thing but it does happen sometimes let's control click into it and in a few seconds we should get the correct page and yes as you can see it's no longer scrollable and these icons are in the correct place if we click we will get redirected to another page which we haven't created yet so this is exactly what we're going to do create all the pages by the way if you're enjoying the video so far please consider liking and subscribing thank you as many of you know routing in xgs works for the folder structure so we can go to the app directory and create a new folder called my- skills and create a new page. TSX and run our EFC also let let's make this page Capital now we can actually copy this and in app add another folder called my- projects also add a page. CSX and copy all of this in here and once again we can go to app create a new folder and create contact-me once again page. CSX and once again page all this in you can change this to contact me can change this to my projects and can change this to my skills and let's see if this works now let's look if we click this will direct us to my skills and as you can see it's over here now for some reason I can't see the navigation which is an issue oh yes it is actually there but we can't see it for now we will remove this later we can go into navigation and say BG Das black also we can add a padding X or4 now it's going to be there you can click over here my projects contact me and the homepage everything is correct now we can go ahead and create the transition for the routing for this we can go to components and create a new file called transition. TSX and run our EFC in here we can make this client component as we'll be using motion so use client and under here import the motion itself import motion from framer motion next under here but still outside of the component we can create the transition variance first all we have an initial position so initial is is going to be a y of 100% and a height so height of 100% next under here we can have an animate animate of we can actually copy this Cas it in here and change this to 0% and finally we can have an exit this exit will be a y of an array of 0% and 100% next a height of the same thing 0% and 100% now we can go inside the transition component remove this text and create a motion div we can now sty this div this will be a class name of fixed r-0 h- screen w- screen bottom Das full z-3 and a BG of # 2 e 2257 next we can expand this by moving this down and moving this down and over here adding some variance which will be transition variance next we can have an initial of initial an exit of exit and finally an animate of you guest it animate and finally we can have a transition this will be delay of 0.2 a duration of 0. 6 and finally an ease of ease in out and remove this in we can actually make this a self closing div as we w't have anything inside of it and let's copy two more times now we can change delays to 0.4 over here and 0.6 over here next we can change the Z index to 20 and 20 and also change the background colors over here it will be 3B 2D 71 and over here 4B 3792 now we can go into the navigation above the SV links we can say is routing in that case we will have the transition which will come from do/ transition and now let's see how this looks and this looks great by the way I made a small error but you don't really have to fix it so if we go over here and change the Z to 10 we'll have three instead of two like this both look great it's really your choice which one you would choose and by the way the navigation might lag on your local device so it might not show up in time this is completely normal as think JS is a server side rendered framework and on your local device this will cause lag however once we deploy it to verel there will be practically no lag also before we move on to the my skills page let's make this text match with the color of the horse and let's make these transparent so we can go back and change this from s to Red next we remove this and CBG Das transparent and do the same thing over here uh over here as well and over here also let's remove this hover as it's a mobile version and you physically count hover on mobile also we can say border border Das white and copy this three more times so one and we'll remove this two and three water border and once again over here border let's see how this looks let's reload the page and this does look much better especially text for some reason we still can't see the border around here so let's see what the issue is it seems it simply wasn't updating correctly and now we have the entire front page and this looks amazing now let's move on to the my skills section so to do that we can go into my Dash skills page TSX and start working first of all we're going to make this a client component as will be using swiper next let's make all the Imports first of all import swiper and Swiper slide from swiper SL react next import swiper SL CSS next import scale data from constants next import image from next image and finally import autoplay from swiper SL modules and something's wrong here and we simply need to make this not Capital next we can go into the component itself remove this text and style div we have a class name of h- screen w- screen items D Center justify Das Center BG Das cover and BG Das centor next we can also say we'll move this down and say style to add the background image so we can say background image URL SLB g-2 dogp PG in here we can create another div which can have a class name of flex flex-all Gap D20 Max dw- 80% text- Center and items Das Center in here we can create another div which will house all the text we can say class name Flex flex-all items d D centor and GAP -4 in here we can first of all have an H1 which will say skills this will have a class name of font Das semi to semi bold text- white and text- 50 pixels in here we actually have a very similar div as in the page. CSX or other span so we can go up here copy this span go over here paste it in here and change this to and and actually we don't really have to remove this space that we have over here copy this space paste it under here as well and in here say Technologies and actually to improve this another place we can this fan is the nav bar so we can actually make this position better copy this span go to the nav bar and add the span over here and remove this Dev and add the dev over here like this so back over here we can go into the H1 add a P tag and say using the latest Technologies or other Tech this world has to offer and a class name to this P tag so will simply be text - gray D300 and text -20 pixels now we can go under this P tag and under this div and add a swiper this swiper will have a lot of attributes first of all slides for View and this will be five next Loop equals true so it never ends next we can say autop playay and this will have some attributes of its own so equals delay of zero so maximum speed and disable disable on interaction is false under here we can say speed 5,000 modules equals autop playay and finally a class name of Max dw- 80% and here we can say skill data do map fill and make an instant return of a swiper slide which in this case will have a key uh not whatever I just did a key of index which we'll need to add over here inside of here we can have an image which will have some attributes as always so first of all a source of skill. image next and ALT of skill do name a width of scale do width a height of skill do height and that is all so to make the second swiper we can copy this one as a second W be practically identical paste it in here go into Al to play and here say reverse Direction and set it to true and we should actually be done let's go over here go into my skills and as you can see here we have this page with two swipers going into two separate directions and now we're fully done with this page and now let's move on to the my projects page so we can begin to create this page by going to my projects and page. CSX removing this text and styling the div this will have a class name of w- screen h- screen Flex items Das Center justify Das sensor vg- sensor BG Das cover so we can now move this down and add the background image so we can say style background image URL just as we've done before multiple times mountains. jpg and close the BR here we can create another div which will have a class name of grid grid Das C -2 Gap -5 maxw -90% and Max dh- 90% this will house all the project cards we can now create the project card component by going to the components folder creating a new file called the project card. TSX and running our EFC we can make this a client component as we'll be using motion so use client and import motion by saying import motion from frame motion this component will be reusable so it will have props we can go in here and say image title and text and this will all be of a type of props now we can Define the props interface so we can say interface props and Define all the types so image of a type string title of a type string and finally text also Al type string next thing we can do is go inside this component and say use State snippet and say is flipped by default it's going to equal to false next we can make this a capital letter and make another use state to use State snippet is animating and by default it's going to also equal to false make this capital and select this press control space and import you state from react next we can change this to an I I made a mistake and under here create a new function so function handle clip and in here add an if statement the if not is animating in that case set is flipped not is flipped and set is animating to true now can make the card itself we can remove this text and give this div a class name this is going to be w450 pixels h- 280 pixels rounded D MD and cursor D pointer we can also move this down and say on click handle clip in here we can create motion. div this motion D will have a lots of attributes first of all as always a class name which is going to be flip - card- inner a custom class w- full and h- full under here we can say initial equals false next animate equals rotate Y and in the case of is flipped it's going to be 180 otherwise 360 next a transition which is going to have a duration of 0.6 and an animation direction of normal and finally we can say on animation complete a callback function of set is animating defaults now we can add all the custom classes for this you can go to global. CSS and paste this which you'll find in the description down below and here we can create another div which will have a class name of w- full h- full flip D card- front BG D cover BG Das Center text- White rounded - LG and a padding of four this is going to have a background image so in here we can say style background image but in this case it's going to be a template string of URL and image which will come from props and here we can have a self closing dat this D will have a class name of absolute inset d0 w- full h- full rounded DMD BG Das black opacity - Z group- hover and opacity -40 and we can also make this a group and relative next under here we have another div which is not going to be self closing and it will have a class name of also absolute in set d0 w- full h- full text D20 pixel adding bottom of 10 hidden group Das hover Flex items D Center z-20 and justify Das Center this will say learn more and ngt which is a special HTML character next we can work on the back side of the card let's copy this paste this here change this to back actually remove this and make this opacity -50 and remove all of this next in here we can have a div this div is going to say class name flex flex-all and GAP D20 also padding y of three and a z of 13 also I forgot this should say Z Dash one this first of all is going to have an H1 which will say the title and it's going to have a class name this class name is going to be text- white text- 2XL font D semibold under here we can have a P tag which will say text and it's going to have a class name of text- Gray -200 text -20 pixels now if there aren't in a we can now go back to the project page and map all of these components out so you can say projects which come from components or rather constants not map project and index and make an instant return this will return the project hard and it's going to have some attributes so we can say key is going to be index a title of project. tile a text of project. text and finally an image of project. image or other source I believe now let's see how this looks in the actual app so we can go to the projects page and here it is these four cards and when we click on them we get a description of this particular card by the way all these are real projects that you can find in the description down below and on my YouTube channel now we can create the final page of our application for this we can go into contact me remove this text and sty the rapper div here we can say class name w- screen h- screen BG Das cover BG Das Center Flex items Das centor justify Dash Center we can now add the background image by going over here and saying style background image URL b-3 jpg and here we can have another div which will have a class name this will be h- 60% w- 80% relative vg- cover vg- Center rounded D Exel border and Border Das white this dat will also have a background image so style background image URL at some BG Das comp. web and in here we can have yet another div this can have a class name of absolute left -20 bottom -16 W -70% medium devices W -30% and then here we'll have the contact form components so for this we can go into components create a new file called Contact form form. TSX and run our EFC now we can actually make this da a form and remove this text in here we can have an H2 which will say contact me we can style it by saying class name text -2 XEL font D bold margin bottom-5 and text- we under here we can have a div which will have a class name of margin bottom D3 and this D will have an input which will be a cell closing tag this input will first of all have a type of text a placeholder of your name a name of name a class name of w- full padding x-3 padding y-2 text- smm text- gr-200 placeholder Das gray- 400 BG D white border -0 rounded and Shadow now we can copy this div add it two more times and here say email the placeholder is going to be email and the name is going to be email next in here we can say the type is also going to be text so we can remove this the placeholder is going to be your message and the name is going to be message and in here we can add a button which will say send a message we can now style this button by saying class name adding X-6 adding Y-3 text- smm font D bold text- white offer case transition Dash all duration -50 e- linear linear like this BG dl-500 and a hover vg- blue d400 now we can go back into contact me go inside of this div and place the contact form and now let's look at the finished application but just before doing that let's add a Marin bottom das5 over here and now we should truly be done so here we have our finished website we have this aesome Navar video and image background navigation buttons and unique navigation tab also when we navigate we have this navigation animation we have these skills and Technology sliders we also have the project page with cards that flip around on click and we finally have this contact page with a contact form well thank you guys for watching if you enjoyed the video please like And subscribe thank you

Channel: WebChain Dev

Views: 27,817

Keywords: react, next js tutorial, nextjs, react channel, typescript, next js portfolio, portfolio website, tailwind css, css, next js portfolio website, framer motion, animation, reactjs, react animation, next js 14, next js 14 tutorial, web dev, web development, webchain dev, website

Id: qwtWcGeIe40

Length: 47min 2sec (2822 seconds)

Published: Thu Nov 09 2023