Build a Portfolio with NEXT.js13 & TypeScript & TailwindCSS

welcome it's great to see you here today we are going to create a sunny portfolio website that can showcase your skills experience and projects this website will be built using the latest and most Advanced Technologies including snap the f30 Tailwind CSS and typescript the combination of typescript and SDS is becoming increasingly popular and for good result many tutorials cover nastiest but not many delve into the powerful pairing of nasty f13 and or nastiest and type script if you've been browsing job descriptions lately you'll likely have noticed that I discrete expertise is in high demand in fact many companies prioritize candidates with hyperscript knowledge overdosed with yes and SDS so if you've been avoiding typescript now is the time to embrace it it's coming for you in our exploration of typescript on Netflix will also dive into the exciting new routine features introducing nastiest team this update brings enhanced flexibility and performance to your applications making it a sexual aspect to master for motor web development they'll miss out on the opportunity to boost your skill set and become a suit after developer by learning the ins and outs of typescript and net yes and stay ahead of the game with next year starting routine okay what are the purposes for this video you need at least basic knowledge of web development HTML CSS and JavaScript if you have nastiest react or typescript that would be great otherwise you are here to learn so that's fine the purpose of this video is to teach you how to build a dynamic and professional portfolio that you can share with companies May while you practice the stack by the end of this tutorial you will have a better understanding of these Technologies and the skills needed to create a website of your own I'm going to start the project in a similar way of how I normally do it the Prodigy has all the installations done so it's ready to go for you so that means that nfts Cypress Creek Tailwind CSS is only solid um so you just need to run npm installer yarn and I use the art but you can use whatever you want so as I did in my previous projects I will also upload this project to GitHub with a initial State and branch and a final state branchera in progress no final and I will leave all the details in the description box below so make sure you clone the new repository code portfolio website a portfolio app and you take out to the initial app Branch okay let's have a look at what we are going to build first so this is the portfolio that we're going to build we have here the header with the navigation the name by the way all of these data I completely made it up we are gonna have here a photo of this person or this Richard Brown and a bit of information about him here at the bottom we have the social media or email and so on of this person and you will have to put your own links and then in my projects page we are going to have a list with cards each card represent the project and so for example personal finance tracker movie recommendation tic-tac-toe game this is actually a project that I I uploaded a couple weeks ago so I hope you can add this to your portfolio website and yeah and so on and then here in contact me we are going to have a contact form so companies can contact you um so we're gonna make this work using apis and yes this is going to be completely dynamic and all of this data we're going to get it from uh we are going to have a database in our own repo and just as a file a Json file and we are going to read the data from it and yeah so uh stay with me because this is going to take a while and some of these work might spill over to the next video okay let's go to the vs code I have a challenge for you are you up for it I'm offering I want to go inside you with the first two people who complete this tutorial and meet the requirements during our sessions we can share experiences and I'll be happy to offer advice on your job search or help with any struggles you might have to participate simply follow the step outline in the description box below first add one of the suggestions I'll mention at the end of the video they'll let me know you finished the course by leaving a comment finally send me a link to your GitHub repo by messaging me privately on Twitter or via email are you ready to take on this Challenge and let's do it first thing we are going to do is go to Netflix config and here we are going to enable the experimental features so for that we need to say experimental yep and then brackets up there and then this is true okay if we save this and now we should be able to have access be able to create uh the pages in the new directory which is within a app but let me run the project first so yarn run that so here is our home page so first what we're going to do is remove these Pages because in HTS 13 with this experimental feature on this is not how you do the routing so I'm just gonna remove it and now create a new file in the root called up and now what we are going to add a page here so page.tsx just like this let me just add here home page we need to kill the project kill the run and run again John run def okay yeah allow run this again and here we have our home page but not only this if we go back to our BS code we can see that Nest yes has created for us these two files head and layout okay this is really cool because this is going to allow us to put um a common layout for all the pages and a common head for all the pages as well code okay let's go back to the designs we are going to start creating the header here so we are going to create the layout and as part of the layout we have the header and the footer here and then we will move on to creating the first page the home page and then my projects and so on so for that here in light out I want to um we have the body but I want to have within here the header and footer so I'm going to create a com um a folder within app called components and here I'm going to have a headache and footer okay so just gonna have Heather I'm just going to export it by default um yeah and so let's just think about how this is going to work first I'm just gonna leave it as it is here in Heather and then in footer I'm going to do the same and I'm just gonna export it okay save this and I'm going to go to layout and here in layout I'm going to have a within body I want to have my header children and footer so Heather import from there then footer okay if I save this yes we can see it here header homepage and put her and you we create a new page let me just create my projects so we think up my projects okay and here I need to create page again page dot TSX and my projects okay if I now come here and go to my projects I can see that the header and the footer is the same if I go back to the home page I can still see it okay so this is a great addition that nashds has introduced because before you will have to create this layout manually as a component and then put it within the underscore app file um but yeah we're seeing uh this file that we have here that we removed previously okay so we have our main structure before I continue let's configure Tailwind CSS because that's what we are going to use for our CSS and it's quite important to have it ready so uh first thing we need to do is let's come to the post CSS config and because we need to add something here in Tailwind CSS we need to make reference to this file here tailwindconfig dot yes so for this config and now The View tell win see sorry config dot yes okay just like this it should be okay and now if I come to tailwind.config here I'm going here is where we add all the configuration of our Tailwind right uh so the things that we want to have the colors the fonts I cover all of this in a previous tutorial in in my tutorial about the creating a resume app so if you want to go through it in detail please make sure to check that video up I have the time stamp in the video so um so you could just go directly to the where I talk about hotel win configuration okay okay so here we need to make sure that we add all the routes that we want to support Tailwind CSS okay so Pages components are up this is no for us then within the theme here in we want to add color s and I'm just gonna copy my theme colors gonna paste it here so make sure that here you specify the colors that you want for your project you don't need to copy even if you're falling along these tutorials you don't need to copy everything except to the same you know you can customize your portfolio however you want and that would be great so you can make sure that you don't have a portfolio so start to the same as someone else portfolio so make sure to to use your imagination your creativity and use different colors if you fancy okay and then we have font family and for the font family I'm just going to use these ones and we have font size okay all of this one size let me that make this is smaller okay and the mean width I'm also going to add this we'll call this all of this later and let's see and then English 10 this is everything that we want to extend from the from the by default Tailwind CSS okay so I'm just going to copy and paste and go through it quickly and so I'm standing the width so when you use one third and when I type like this I want to say I want to have 30 uh 30 percent mean height 50 55 pixels book Shadow I want to I'm just specifying here the book Shadow that I'm going to use in the footer so like this background images image I'm also specifying this this is for the header a Spacey important review sound Flex basis when you are doing this on your on your own um it's probably more normal that you you add your basic configuration you start working in your projects and then you might add some more configuration to tell when CSS that's completely normal and nevertheless if you know this is detail from the beginning maybe because you have the designs and you know that here we have a shadow and things like that and you could just do it as when you are setting out the project so you make sure that yeah you're ready to go to use these classes um yeah okay and then a English screens I'm not 100 sure if we need this but I'm just gonna add it why not so yeah screams SN and d l d XL and then plugins with less any plugin cool let's continue now that we have all of this and uh let's go let's close this we don't need this anymore let's just run the project again and okay let's just save it this will all work the same okay and here I'm going to go back to and let me just close page for now and next config and um this one as well so this is the structure that we want and let's go back to here there and here so we are gonna drop this in the head of tag okay and uh let's just have a look at what we have in the header we have an image at the bottom and we have this background a color like linear gradient color that is the one that I actually specify it specifies here linear gradient okay and so yeah so then we have the navigation at the top and the these would be the H1 which is the name of the person here at the bottom cool so to do that I'm going to have I'm gonna divide it in two blocks the first block is going to have the content line navigating H1 and so on and the other block is going to be the image so let me guess to this the most sense um return okay nif okay and here the image and this is going to be um the nastiest image so let's just import it okay um this is going to be our priority uh so this is uh we are specifying that from the control of the page this is the priority tool this is the image priority to run um this is important for the core web vitals but if you don't have if you don't know what core web vitals mean don't worry it's not that essential to know at the moment first we need to learn how to build websites right so and let's come here we can see that the highest 385 and with 1728 but also let's just run that up and hide uh yes 400 with let's just say 2000 okay and we are going to add some class names here and and Okay so um class name just gonna leave attempty for the moment RC leave it empty old we also need to add alt for accessibility and let's just leave it empty and Aria label as well for accessibility now we can close it okay and the format is really odd what am I mean here okay now good okay so in the death we are going to have the navigation first so let's use the top knob okay and within the navigation we are going to have these three links for now let's just set the Three Links and then um we are going to have the H1 is also going to have a class name and the name of the parcel okay so this is the main structure okay cool so before continue we need the data and for the data like this name of the person and the image and and the material and so on now for that we're going to we said that we were going to have a database within our own project so let's just go ahead and we think app we are gonna create data and then later though we could just call it data again data Dot and Json and [Music] um yes or data lodges or page data data.js on thus fine yes and here I'm just gonna copy old my data okay and I'm just realizing that [Music] um I'm just going to leave this uh TSX rather than jsuk TSX it was really similarly but in your steel having a Json format we just have it like normal JavaScript um what normal TSX in this case uh sport const pages okay so let me just go through it quickly so here in pages I am I'm specifying the three pages that we are gonna have about me my produce and contact me okay the about to me is actually our home page so I could um rename this paste later but it's fine um so by rename I meant only here yeah sorry here I could set about me page okay and let's just close this okay so each of them has an ID and this is because we are just we are going to map them then we have the complete data so hello I'm Rita Brown which is this part here and a soul engineer a subkina when and yes all of this so uh for the home page data um which to be honest I'm calling it here home page um I might update it to about me page okay mild me data contact me so this is for this part here contact me data and here in projects and this is an array of objects and each object let me go to this one The Tick Tock so game and a we have a title body one body two image so this is the name to the image links so the links to the source code and so on and this is just an example right but this could be Tick Tock toe up cool and yeah this is just a really sample data so you'll see that some of the links maybe are don't yeah and are maybe are not updated but now I'm just checking on this even all updated but yeah here obviously you need to put your own data okay otherwise it doesn't make sense to create a portfolio of fake data okay use your real data and let's just save this and come to header I'm just realizing that I have this but in Heather um I having saved the name so in about me I could say here name okay save it you obviously don't need to have the data structured like this in a different file you could just go ahead and just add it here but I find it really useful to to have data only one file maybe if it's your own name and you don't need to buy for example the product is really useful because you could just come here update the data it's a lot cleaner and easier to find and you can update it multiple things at once um so yeah this is quite useful and it's also useful to get it's also good to get used to working with external data no hard-coded data within your components okay so now that we have our word of data let's just save this and um let's just we will add type script this is uh this is important it's quite important that you learn type Square so we will add typescript for now I'm just gonna start typing it like normally in JavaScript and then we'll add the types okay so enough for the nap first I'm going to pass here the data so this is this is going to work in a really similar way of the resume app and the header is gonna have one argument that is data and within in this data we are going to pass this data here in the layout okay so data and is here where we import the file data so import the data from and it wouldn't be like that would be okay about me data Rosa here Port about mid data from and now data data and now here I can just pass the about me data save it and here we go to header here just complaining because of the types exactly we are not specifying the data so it is implicitly has on any type that's fine for now so in layouts okay we pass about me data and feather just close this and here yes no data dot name save it and let's just go to the site yeah Rachel Brown cool okay so enough we are going to have a map we are going to use a map so data dot map and then you can call it element or whatever you want and um oh sorry let's just call it page actually and here within the page we are going to have a link and we are going to use nastiest link let's just leave it empty for now it's going to have that key every time that we use a map you know every element needs to have a key and we know that this is the page ID so let's just add the H ref and let's come here so we have ID label and Link so actually let's just update this page um labeled page link and we only need the classes and in the middle here we'll have paste dot label okay data is not a function so um sorry look let me just save this and the reason for that is data map is not a function okay So within data we specify let me just come here and here we are passing the about me data but in the header in the navigation I actually need the pages data okay and what it was saying is the about me data is not a function because here that data.map is not a function because this about me is an object it's not an array it's an object so um let's come here and um and I'm just thinking because for the about me we only need the name so I could say and still doing it like this I could say uh I could have paid and then the name yes okay so let's just say I passed um I'm gonna pass the knee so here [Music] it's not letting me to this now yeah and then pages and then if you need to pass here Pages as well import pages so pass them down here so because the the name is the same we could just do this okay so now within data this is what we have and now in in header without uh name and pages so pages and now here we could say name and let me check that this works because no 100 search for what I'm doing uh okay save everything Pages cannot read property of undefined okay and [Music] okay let's just let this move out causing me issues now let's just move it out so we are gonna say name equal about me data name and then pages equal pages okay okay yes who's trying to put it within the object but if I was doing it like that um I will have to do it a little bit different here as well so this is easier to to pass the the props like this specifically so yeah we have the the name um and here the pages let's go back to header and open this okay and let's see where we have our Pages here because I cannot see them at all they are empty okay so pages and label okay pages right said I wonder why they are no choice so I'm just gonna put here the console log pages type this so as you can see you are getting what what it is to actually code you know there are always here there are always errors so just get used to that um images missing there so see what that's not important for now okay so I cannot see here the console lock so something that you do quite a lot is add something to make it easier to identify the console logs I'm not getting paid use of course not that they make sense so I pages am I gonna have to cut this so you don't see me here wasting my time try to find out what the issue is but this is the real life of us sewing in here honestly the time that you spend with little mistakes you have you will have no idea but it's good that you see it so you'll see that you are not the only one we all go through this all the time so especially if I have a camera filming me okay and okay I was looking in the wrong place because the console log we can only see them in this internal terminal no in the browser console because all of these components that we created they are server components so it doesn't quite work like and with the paste directory with the apps directory all the the pages all the components that you put inside all the TSX or if you were using um JavaScript jsx they are all server components by default if you want to convert the into client you will have to come here at the top and specify it use client just like this but we'll see this later okay and this is probably complaining because this will be the first element so this needs to be the first line yeah okay we don't need that for now so so we don't need that in this page basically and so let me just come here I can see that we have the data so it's definitely something that I'm doing wrong here and I can see the mistake here I think in every tutorial that I do I have this mistake which is I'm creating here a narrow function I'm unwrapping it in curly Breakers uh and I'm not adding the return key every single time and I forget that cool okay just remove this now now we can see them about me my projects and contact me okay let me remove the counter locks and we could start adding the styles and the images as well so before that actually before the style let's just add the images because we are missing here the image so I'm gonna come to public I'm here I'm gonna create a folder images and I am going to just copy all the images that I have okay and this images needs to be a photo of the tools that you've been working on the background image for the header a picture of yourself um this is the picture of Richard Brown the person that I made up and yes other images just to these images are just to dress at the website this okay so now here I need the header image okay so I can come to public images unless you see which team is watch this one this one okay because we are adding them to the public I actually don't need this but I just need to adhere images and in alt image of and then we could pass here this name so let's just call her converting into a literal template we need to wrap all of these in curly brackets and here I can pass the name and I could use the same for the audio audio label so if I inspect this we can see here the old area label okay um let's add the Styles then for the header class name is gonna add this to all of them okay so first um okay if I go to the sign let's just have a look we want to this to have a display flat here which is a column I also want to add this linear gradient as the background and uh yeah let's just start for that so Flex is a flex column position is going to be relative and and then background linear um and it's going to be background linear and I just want to be this color here so come on and just put it here okay and with a point and age 48. okay so we added the size but there is this one little thing I forgot so we need to create the Styles file so here in the root I can just come and say global.css and I need to call this in our layout okay so import and dot CSS okay I save it and then to in global CSS we need to call tell win base also tell win components and Tailwind utilities okay now that we are here let's just add a few studies here to our layer face so for the H1 H2 H3 H4 the font family is going to be oops Wild or if that one is not available and system s UI and then serif okay estimate and then the rest um I still remember what the name was exactly here otherwise I'm just gonna copy this proximanova and since okay let's see if it's this and let's just also add the styles for the um for the 81 because I'm gonna need them here so H1 and so here to the applied apply and now the text and this is going to be for excel and for mobile is going to be six or seven instead save this we can see it here big okay a little bit bigger than this answer it's fine and yep go back to the code okay let's just say this and go to the header let's just check I want this navigation to be a flex row and okay aligned to the right of the screen at the top and this name at the bottom and the left bottom left bottom corner of this screen so okay okay so for this div um Flex this is uh this is the div that wraps all um and this one this one like the navigation and the and the title and the name so flash column okay um justify around and um height needs to be full a padding six and and I want to have the background head on this one here um a stand ify this on the screen where did I add it instead it has to be understand yes background image header okay so yes background header and um the index 10 we save this okay we can see here coming I'm just going to make this a smaller just try to have everything in the screen but it's quite complicated so this one comes first okay we can see things happening here okay and now um fifth class is to fire around and now for this navigation let's just add the classes so first the test needs to be aligned to the right needs to be Flex a flex row let's just a couple of six self and and um yeah I think that's all for now okay this is how it's looking like and now for the links come here and the links I want them to have padding around so uh no this is not around sorry this is like horizontal and and then so padding at left and right so and then p y is for padding at the top and the bottom this tube and a mink with let's say 100 and um yes and in our design here you can see that it's blue when you select it otherwise is the background is white several background is this should be white okay and um I might just add some hover let's just check the colors we have we have this blue light so that's what I'm going to add so um hover look light and then release over the text is blue okay now if we hover it over okay and at the moment we don't have that when when we are in the selected page we should have the background as blue but we'll do that in the future so I'm just gonna leave it like this for now and yeah so let's just save this and link I also want the font uh to be the display one and uppercase okay cool and they look like the letters are really close to each other so I'm going to add some lettering space so tracking white and for that by the way you could check at the tell win CSS documentation which I have somewhere I had somewhere here but yeah just check the documentation towards CSS and just bring it here and in the docs every time I don't know how to do something I just come here which is a letter spacing for example and I just see it yeah so I chose this one tracking White um in the eight to one text White text and text white we could put this in the in the global CSS but let's just leave it like here an uppercase and it's way too big right it's a little bigger than what we have here in the design so I'm just gonna come and change it should say we or maybe this is the issue um I might just leave three for both of them yeah okay cool Heather and now in the image class name self the image is gonna be the width is gonna be full the height is going to be the same height 48 I want this image to to be placed in the background like as an object there so object and the object um is going to be a set cover so it covers the whole space and a object top okay and the position is going to be absolute let's just save this okay and let me add here also margin bottom six okay cool and let's move to the footer now so in the footer we are going to have let's go to the sign and unless with icons um that I'm gonna provide you with and but you cannot hear any icons you want any social media you have basically and each of them is going to be a link so first I'm gonna come here and create a new folder with all the icons um so icons and just gonna copy them all icons let me show you what I have so this is just an SVG and this is a sporty as a component but it's an SVG I'm passing here the class names as we can so you can add the specific class names to each icon if you want same for LinkedIn medium and Twitter okay and now something that I like to do is have here an index yes X and here I'm going to export all of these ones so sport everything from um oops GitHub support everything's Brown LinkedIn from video and Twitter okay missing one and some missing one okay I'm using the envelope okay now okay and I'm missing one I'm missing the envelope yes so envelope envelope same a component with an argument class name here okay and if we come here I can see that there is one more icon and that we don't have so we have in total four five six icons so let me also copy that one um window okay cool now we have all of our icons so let's go to footer and I'm going to remove this another footer tag and here we are going to have um this and then we are going to have a link per um per icon here so the name will drop the icon okay so let's just do that it's going to be a regular link because we are going to add external URL so we want to use the navcs link cool okay so um here link and we pass this as a prop so let's just leave it like this and area label let's just leave it like this as well and so yes and now here for the icon okay so let's start for the envelope class name Okay so email you can just say like that okay and Okay so gonna need or more so we have envelope Twitter LinkedIn a video Twitter LinkedIn and Napier and Twitter has been reported so yes Twitter and medium cool okay so now um here Twitter painting Mel to like this okay just say it again okay so unexpected footer case because it's missing here so or not just gonna pass empty calls okay we can see here our icons to our links and so let's just add the Styles first class name so we want this to be white uh full width again and we want to use this Shadow footer that we had and we want it to be fixed at the bottom to look like this and yes I do have some margin here we can see on some paddings so first with full okay and then back around White shadow water maradine top 12 the padding uh let's just say six Soul four and fix um bottom Sheryl just do the same these okay and let's just come and now here was name this needs to be Flex the items gonna be Center in the middle um justify also Center so everything in the middle and let's just add a gap of one okay we can see that here and now for the icons um I'm going to create a class so I can apply the same class for everything so I don't need to copy the seven Styles in each of them so let's just say icons for contact me and if I copy this and I come to the global CSS here now I can pass the styles so um I can say apply and the text is gonna be to XL the size for the smaller screams I'm gonna make it a little bit better yet and the text is going to be black and bless the sad Martin all around okay just to save everything but yeah we can see that it has been applied to one of them yeah okay so save this and we can see here our icons we have colors here but I'm just gonna leave it like this because these are the icons that I have so for some reason this one seems a lot smaller right um maybe because it's Nest to the Twitter to the bird so but yeah it looks we could add specific classes here to change that one but just gonna leave it like this okay so this is our footer let's just close this this is how it looks like okay and but we don't have the links yet so we need to pass that data so let's go to our data I can see that we'll have here pages about me contact me on projects so we can come here and say sport cons contact me links and this is going to be an array and here we could actually specify ricula damn ID enable and so on but um I'm just gonna pass the links directly uh so let's just uh which ones do I have email Twitter LinkedIn and media so time to code at gmail I don't think this is my email but yeah and now LinkedIn and GitHub and medium or it was a Twitter it was Twitter wasn't it so Tweeter okay okay and now we can go to footer here we are gonna pass contact me links I could call and I could import this data from here I could do that or um like I don't need to do this I could just pass it here directly or we can pass it here as a prop um and then import it from here I almost prefer that so just you so you get used to having dummy components okay that only accept the data so let's just do this zero and now okay so this is one two three and let's just pass from the layout the data save it come here and yes if we hover over the icons we can see it here at the bottom in the in this side you're gonna see in the left the bottom corner and the that the links are populated okay so now that we have our header and footer we like we have the UI of both parts we need to pass we need to add the types because if we go to both components you're gonna see here that is complaining because it has had any type and the same here for header is complaining so that's what we are going to do next in header I'm gonna create here props header props and here outside the component type feather looks equal to and now here I have name this is a string and then Pages which this is an array of objects and a half and let me just check Pages have an ID which is a number label a link so by the number labeled is a string and Link is a string as well and this is an array so just like this with empty brackets square brackets I say here I save it and the warnings are gone let's go to Legend it's not complaining here okay so let's go to footer so contact footer props copy this come here type footer props equal currently brackets contact me links this is an array of strings so a string array save it let's just double check yes and that's it is that simple don't tell me wrong a type script is usually not this simple but in this case it's actually quite simple especially when you know the when you work with your own data and you know the types of your data for the small projects cool okay and so let's come here everything is still working so let's create the home page in the home page we have three sections first session with an image at the left and the text at the right so straight away I'm thinking three sections the first sections will have two dips therefore the image and dig for the content which with a flex column so to display it in a column and then the second sections will be only the text and then the third section same two dips with the image in this case at the right so let's come to page let me just close all of this save and just come to page okay so I can delete this now and if I go to actually layout have here the body and then the children okay I want the each piece to have the text main so main okay sections so let me just double check this side yes okay so section one and here I have two dips this one for the image and the other div for the text and content then section 2 I mean this could be a div rather than a section but I like to structure like this and same here but text and then image save this and okay so let's start by a passing here the data okay so for this page if we go back to data I have um about me data these ones okay so I need this object so from page I'm going to import it import about me from data later okay and now if I come here we have the title I need to pass the title body highlighted body body two and that's it so um this is um I guess we could add it as in ih3 or H2 um because we don't have any issue in this page so yeah H2 bout me data Dot title and then a paragraph about mid data body okay okay I'm here this was highlighted body this is body 2 which here this should be prop in paragraphs okay let's just say this and we can see our data here okay cool yes okay okay let's start um let's add here some Styles actually so this is going to be a flex Place column and the items are going to be centered in the middle cool now for this one class name this is going to be a flex Flex row actually and um the size I want so let's just check this design I want to have some more of this around um so I don't want it to be full width so for that is have some like width 10 12 okay uh margin top ten items Center and let me add and Martin button as well okay cool and this image should be one third of the size of the paring of the section so let's replace this for the image actually let's just leave it we sing at the FI at them is here in the middle this image for Ness from nasty yes okay and this should be one third looks like this I think it is yes one third and here let's see the brief height this is everything we need a area level okay old SRC and Purity Falls and there are other things that we can add here like a placeholder or a blur image that and they are all features to optimize the images protocols oops fin Sorry probably something that we would do in the future because um the result I want to say you need to stay tuned because we are going to improve this project a lot um and we are going to use a more technologies that I didn't mentioned at the beginning of the video we are going to add unit tests to this project so if you want to learn how to create an end-to-end project the same things that you will do in a company stay tuned because yes we are going to add unit test to this project okay let's continue so for the Whip and let's take the sign for that okay three four eight five four oh five okay let's just say here 640 and uh 960 which is like uh standard sizes and then for the area label um I'm just gonna use um um so here you could say um that you're like the similar what we did before image of you know of the parts of you of yourself but because I took this images from Anis plus I'm just gonna use their names um as the area label and ALT okay so I'm just gonna copy this just explaining what these images are about so just gonna use this exactly same for old okay and then we need to use the image that we have here in public so images and now I have here the image that we want to use okay I'm actually a little bit better just like this okay let's see uh it must start with a slice didn't I oh I removed it okay cool we can now see the image 640 Now 60 and let me just put this at the top and then the SRC images um let me just copy this okay we should be able to see the image okay now we see the image cool I also want to add some styles to make look oh I'm I make a mistake this is not the image actually um I'm using this image but I want to use this one so you just copy this actually I'm just gonna copy this paste it here because we will need it later so but yeah let me just go to this image cop here okay and now paste it here and here and here okay that's better and I'm just gonna pass some Styles as well so class name and um I'm just gonna Define it here so for example profile image and now I can copy this if I go to my Global CSS what is it here now I can say okay at first I want to apply like around that around so round it fold like a border radius and now then width is going to be O2 height O2 as well sorry 100 percent object fifth cover and object social and fifty percent and it's four percent okay cook now let me um also apply some style for the section now that I'm here in the global so sexual apply mb10 save it okay that's a little bit better let's go back to our page okay so we added the image here now uh here for this this let's just add some margins around and so ml um left the margin left 20 and the width in this case is two thirds because this one was one third okay and H2 class name okay actually um I have some Styles here so for the H2 oh no I didn't know okay so H2 let's just add a text XL mac2 XL and oops apply uppercase um I also want it to be a text black and the boys um when that case is not so let's just let that font semi bold yes and let's just start a margin bottom yes so all of our titles have a bit of a space spacer m in the bottom so the title has a bit of margin so it's just it's not Nest to the paragraph okay cool this is looking cool and pages okay so we don't need to add anything here I mean if the H2 is different than this one so we could add a specific Styles but um I think um we can just leave it like that and now class name here we want to use the text base okay and for this section class name okay let me just see yeah we want the width to be a 100 pretty much 12 or 12 and um we also need to add the background this blue light and at the the height so let's do that so with full and then margin bottom on top eight background blue light okay yeah and a padding turn and the height is going to be full cool okay so there's like 100 like this full means like is as high as what the content needed to be so as high as the content thanks okay and yes this is looking much better okay let's go to the third section so classnet here in this one uh we want to have let me just go to the design and so we have Sun also it's not 100 it's not fully width and um yes and and the English will be one third again and this test two third maybe let's just give it a little so I hear um this is flex Flex row and a yes 10 12 similar as earlier 13 top 10 and items should be centering the middle okay and I mean I don't need to add this text the base because you will apply to I think you should apply to all paragraphs but yeah probably don't need this okay let me I just leave it there from from here okay class name and then Flex column and now pair with an let's just have a look okay it's just like it's a slightly a bigger than two well enough for which one third or maybe we could try with something like just also just to show you that we have more options than one third you see if you you type one and you wait and you type the slash forward and you wait you can see here all the different options that we can have so let's just say 7 12 say this okay yes I like that and now plus name here uh no I don't need here sorry it's me and the width and this will be five twelve um specify but and margin left okay cool it's looking cool and now in class name the height we need to specify the height let me just check 248 so 250 but 250 like this and now um is similar as earlier this object cover and we also need to pass the width round 500 so with 500. save this and yeah it's looking pretty cool if I compare this to this sign I can only see one little thing that is like this Shadow here is not getting applied so I'm just going to inspect the element footer with purple I cannot see the shadow or maybe I need to practicing another div to apply that um let me go to footer Shadow foot oh okay that's what it was okay and it would be good to have a bit of margin button here and yeah and we also need to update this so the width here is 500 and 250. so okay let's add some margin I'm gonna add it to the main here and marking bottle 10 it's not enough so let me just add quite a lot more yeah that's a bit better and now I also want to ask a bit of padding so padding temp although just gonna remove the padding yeah I think I like it more like this so if we make this a smaller okay this is how it's looking like so at the moment we have everything in in a row and so when the screen is smaller it should be better to have this as a it's a rope column instead uh as a as a column sorry I said yeah so SM Flex kernel I think it should be just like this and here a Sam with full and the same with four I mean page SM Flex column okay let me respect this element third oh right okay so it's in the other way around of course because we decide for mobile first then okay so um just like this now I'm same here okay okay let's just save these now it's working let's make this a smaller okay it's a bit too big isn't it and yeah so let's just Center this in the middle as well so our case because we have some padding around there oh because the width here is 10 12 so this is also SN just another here and this would be with full okay and now um I also need to justify all of this in the middle so center line items um align content Center oh okay this is with this plate Flex Center okay is the fact onto Center so flex and justify Center this is only for mobile gold that's the issue so it was good either way okay cool it's a bit too big okay let's just try to make it a little bit smaller um so here in profile image for [Music] how we spawn to be honest I'm just gonna leave it like this for now we will we could improve the CSS but I don't want to focus too much in this video about the CSS so yes so let me go back to here I'm just gonna add a couple more Styles and then it could be done so much important and shoot and Marine tops or six and then SM irting top zero okay this looks cool and then only this one so we are going to do the same in section this is gonna be for the SM and then the width is a fourth yep and the SM and then here is with an up sorry Flex column SM then with pull okay hope you are understanding this so we put this SM because this is this means like everything bigger than the Mobile screen that the SM screen the smallest screen it should apply these Styles and by default we use this one so because we want for desktop to be 5 12 we add SM and then um width here will be just food and here is Sam I don't want it to have any margin left um code and I'm going to add okay so these ones are spotting for example let's just see the padding it's a smarting but uh yeah I mean 12 I'm adding there are 12 I'm also going to remove it from there so this one um that okay so it's not this one I'm just looking for the martini left um I actually left I have here oh here it is okay so this is SM only and then this will be zero and let me just tie that up a little bit so okay okay padding I'm just gonna add a padding of 10. cool and here I'm also going to add a paddy okay and in this one another here looks actually maybe I just move it from here yes but I'm going to add the margin bottle Martin button 10 so and mac and Y is going to be 10 and for the um oh summary okay I want to add the Martin bottle here so and bottle 10 and uh s m bottle syrup just gonna move this to here okay so this is how our website is looking like in Mobile let me just put it properly iPhone 12 Pro uh 50 percent like fits okay now okay so the head of Nisa bit of adjustment we have our massive image here a bit of about us this highlighted section and our third section and you see here that the section has quite a lot of padding so I think my might just edit that SM and then yeah I think this is a bit better did it it didn't change the nice just swallowed this okay hmm okay I'm adding uh I'm just being so silly I'm adding also uh margin top about bottom in these sections I'm just gonna remove because I'm already doing in the global so just gonna remove from here and from here and what is the other section and from here gone okay better I like a lot more and the only thing is I will add it back to this one I could just add it to this marking merging top just to say eight pixels Okay so empty time okay and this is how it looks like in desktop we go back to mobile the footer looks good that's fine um now we have quite a lot of Marty here 32 so we can go to layout uh no page page yes so this is SM and then Martin button uh system yeah that is better okay so let's just add a bit of styles here as well I mean ideally you will have a menu but we are not gonna do that for now so instead of that I'm just gonna make this cup is smaller and maybe I can make this list with snow working okay padding two pixels okay maybe I do something like this let's just do this in Heather enough here so this is the same so Gap zero okay and now padding where was our padding here this is a Sam so the X one just like that okay let me just reload this cool all right and now if each of them um transpire real transparent background and I need to put this within here okay and let me just add one Gap okay cool I mean this is not perfect and it is a lot more adjustment but it is looking better now right padding left Pierre left shoe Sam yo zero all right okay so we have our home page we have created our home page using nessius and type type script on tell when CSS cool okay now we have the home page already and with the responses okay um I think I'm going to leave it here for today's video um I think this video is probably close to two hours and next week we are going to continue with my project so I'm going to show you let me go back to the designs um here I'm going to show you how to create this nice cards how to populate the data and and yeah and in future videos I will also show you how to create a contact form and how to submit it so this contact form is going to be 100 working and remember what I told you earlier we are going to carry on improving our app I'm going to show you how to add unit tests and we are going to use just on react and the testing react Library so you're going to learn a lot in this tutorial in this series tutorial okay so so yeah let's just leave it here I hope you like this video I'm sorry I haven't been posting the last two weeks live has been really crazy lately I've working in New produce that I really want to share with you but yeah uh no for now but if you like this video and you want to support my channel I really will appreciate that you leave a comment like the video and subscribe of course thank you for watching and see you in the next one

Channel: Time to Code

Views: 3,778

Keywords: build a portfolio website with typescript, build a website with nextjs 13 and tailwind, build a portfolio website, build a professional portfolio website, build a website with next.js, nextjs, next 13, next.js13, tailwind.css, javascript, typescript, next js 13 and typescript, nextjs13 typescript, build a typescript app, react, next.js 13, nextjs 13, time to code, timetocode

Id: RJ8qfharNOE

Length: 97min 20sec (5840 seconds)

Published: Sun May 07 2023