NextJS and TailwindCSS: How to Build a Portfolio Site from Scratch

Key Takeaways

welcome to this tutorial in this project we are going to build a simple personal website almost like a onepage portfolio using react nextjs and Tailwind CSS the finished product is going to look like this it's going to have header and footer elements and some content in the middle and little project cards with thumbnails that we can click through to another page we're also going to host this online for free so that anybody with an internet connection will be able to visit it this is a beginning level project but you will need to know some HTML and CSS and at least one programming language for example python or JavaScript the project will be written in typescript but if you know at least another programming language then you should still be able to follow along it will also help if you are familiar with react and jsx although I don't think it's essential here are the major tools we'll be using in this tutorial you will need to have node.js installed so if you don't please go to the nodejs.org website and install it first that should also give you the npm command and the npx command which we will use at the start of the tutorial to bootstrap the project don't worry about the rest of the dependencies for now they'll be installed as part of the project later here is a tech overview of the project the arrows indicate the direction of the dependencies don't worry if it looks complicated we won't be dealing with most of this stuff directly I only want to explain how our core Technologies are related to each other all the way on the right is nextjs our core framework nextjs Works exclusively on top of react so our project is really a react project as well and underneath react is the node.js JavaScript runtime to use react we'll need to know HTML in either typescript or JavaScript to style the website we'll be using Tailwind CSS which integrates into a node project with Tailwind CSS we'll be able to style the project without needing to write a line of CSS code at all but it is still important to know how CSS works Works under the hood I think this is a simple but also very powerful stack for front-end development in 2022 and let me explain why first of all react is the most popular modern web framework according to the latest stack Overflow survey you find many teams using it today so it is a very good framework to learn next JS it's not essential for a small project like this but it does add some clever technology on top of react which I really like and it actually makes the project easier to develop than if we had just stuck with vanilla react it gives us some nice things like easy routing out of the box image optimization and static page generation which makes our Pages load faster and generally better for SEO finally Tailwind CSS is a framework that lets me style my web elements directly in HTML or technically the jsx using classes I can add to my elements again I included this purely because I think it actually makes developing the site easier and faster as opposed to using vanilla CSS maybe after this project you'll understand why as well so with that out of the way let's go ahead and get started with our project so I'm going to start now with uh an empty project empty GitHub project inside it's just got the license and read me and in here the first thing we're going to do is create the nexj app project directory so we can do that by going to NEX js. org and just looking at the documentation this is the official website here and then right at the top we have this getting started section so we can run either npx or yarn uh depending on what package manager you have but if you just installed note then you probably will at least have npx so let's give that a try here npx create uh next app and then I'm going to call it uh portfolio site and we're going to do D- typescript as well because we want to use the typescript language so we'll give that a go and once that's done um we have this message here saying that we can uh go into this directory to see our project and we can test it by typing npm run Dev so let's give that a try now so if I go into this directory I see there's a bunch of files created and I can do npm run Dev to start the development server and see a preview of the site so it started the server here and and if I just open that up in my browser we get this landing page that they've created for us as a template uh before we actually get started working on this I want to install Tailwind as well for the styling of the project so I'll go to the Tailwind uh css.com site here and then search for onboarding instructions for nextjs and here we have install tailn CSS with nextjs okay so the first step we've already done this with uh creating the next app so so we're going to go ahead to this one and here we have to install tailwind and a couple of other things and actually initialize Tailwind with this command here so I'll copy that go back to our terminal I'll stop the server uh contrl C and then I'll paste that Tailwind installation code once that's finished installing uh I have to make a change to this folder as well so add all the paths to your template files and Tailwind config so we'll just copy and paste this uh and we actually have to open our folder in here so I'm going to do open this in Visual Studio code which is code dot okay so I'm just going to copy this section into this Tailwind config.js file uh which is here okay and then after that I have to add all of these tail withd directives uh to the style Global CSS file so at this point you don't have to know the layout of the project yet just that we are following the instructions here and I'll just add it at the top and now it says we can uh we can run it so if I run this again then Tailwind should already be installed okay and I can see our site here here to check that to one's working we can try their snippet which is just adding some of these things to uh to a piece of the text so let me go ahead and copy that and I'm going to modify this index page just to verify that the installation has been set up properly so I'll add this hello world text into there and I can see that it's up here and it's bold and it's a little bit bigger which means that this these Tailwind style Direct are working so just to compare if I take all of that out you can see that it just renders as normal text okay so this pretty much is the installation setup we need for now and we can actually get started with the project since this is a beginner level tutorial I'm going to quickly go over the structure of the project and some key things we need to know about react and about how this whole project Works uh but if you already know or have experience with react then feel free to skip this entire section so first of all this is our project as I opened it up in our editor and I'm going to make this a little bit bigger so you can see some of the files here uh this project was created for us by uh the nextjs installer so this just comes out of the box and if I close off everything we can see that we have a couple of directories two of them are ignored so this contains a lot of the dependencies our project needs behind the scenes but uh we don't really need them so if we delete them uh and we build the site again these things will be regenerated so keep that in mind you don't want to commit these to your git repository then we've got three directories here one of them is for the CSS styling uh one of them is for images and other public uh files that we want to upload with the site finally we have this one here which is for the actual Pages themselves so what I'm looking at on this side from our development server this is actually this index file here which will take place in the root URL of our server we also have an API section here but we're not covering that in this tutorial so I'm just going to go ahead and delete that right now we've got a couple of other configurations here as well some of them is for nextjs and then we saw the one for Tailwind earlier and this one is for typescript uh how we want to configure typescript so hopefully when we create this project we don't have to touch any of this stuff and this package.json shows us what dependencies we have in the project at the moment so here we've got next uh we've got react and we've got react Dom so in this project this is a nextjs project and next is built on top of react so we will predominantly be using react technology to write this but NEX does help us do a couple of things better than react does natively and we've also got Tailwind CSS here as well for our styling now if we also go back to our pages over here these will be the things we will edit to create the site so if you can see here in the template it says get started by editing Pages index. TSX so a TSX file is a typescript file that uh it has this funky sort of HTML part in it here so it's kind of like a mix between typescript and U HTML and it's pretty much what we will write to render this kind of thing on the screen so the way this works is the react application or or next on top of it will pick each of these Pages these files we have in this folder and create a page out of that here so for example if I just make a new file here uh I just copy pasted that and I'll call it new page and in here if I just empty this entire thing out and just make it return see something like this I'm just going to delete everything so this is a very simple page here and if I just rename that to new page now I can go to that URL I'm going to see that it renders this line that I've written here so the way you can think of these files is that they map to uh different paths that you can visit in the browser for the server now about the structure of this page itself so this is what we actually call a react component uh pretty much every displayable element or anything that appears on the page is a component of some kind including the entire page we can make smaller things into components as well for example we can make a a little component that's a piece of a menu or just a button or components can be very big things like entire chat boxes or application dashboards we can also put components into other components or create them as part of a loop for example so that's uh that's going to be the building block we use for our sites so this is a component in this case the component itself is just the function that returns an HTML element technically this is actually called jsx so uh it's basically HTML that's kind of embedded in this typescript file uh but we can program it so we can add in variables and stuff like that it's it's kind of like programmable HTML but if you know HTML in CSS you can pretty much write everything uh in here as if it was regular HTML also uh when I'm running this as a development server this is on a hot refresh so if we go back to our terminal we can see that it's recompiling every time our file changes so as I'm editing this uh I can sort of see changes in real time over here this weird notation over here if you're not familiar with typescript this is how we can declare a function as a variable uh we can also create functions uh just like in regular JavaScript like this new page and uh this this would be a valid function as well and we can actually do something like this but doing it this way allows us to actually um treat it like a first class citizen as variable and then return it this way or do other things with it finally each txx module needs a default export which is if we import this file from another file uh which function or which object is the thing that it will reference so here we we basically just export our main component that we declared up here I think we're ready to Dive Right In and get started with this project so I'm just going to go ahead and delete this new page that I created for demonstration I'm also going to delete this entire index page here as well so now we have an empty project I'm also going to delete this CSS style that we have for the home module uh we're not going to use that CU we're going to style it with Tailwind save this is an empty project and then I can delete this home module CSS as well okay so now our project is really empty but that's what we want because we want to write our own stuff I made a quick sketch here for how I want the site to look I'm going to have a name here and then a title uh so this is going to be like a personal site and then some contact details like a mobile number uh text introduction paragraph and maybe a couple of cards for projects for this person like a CV style uh so this could be a list of different projects that you can click on and then a footer element that has some social media buttons as well so this this is kind of like my goal so with that in mind let's get started first let's create some of the content that's going to go here so just to keep things simple I'm going to start by just making everything into it div and then we can change it up later so I've got my my name here a title got this text don't need this okay now that I filled that in I've got some of my text elements here which it still doesn't look or behave like my goal but at least I've got some of the divs in place uh something I like to do when blocking out the sites like this as well is just add a style to the disc so that I can see um some kind of border around it like this what on if I just delete all of this default HTML I'm going to add a new one here and even though this is a CSS file we can use Tailwind directives in here by using this apply command for a div I want to apply a border around each element so in tail when we basically just pick the style we want and write the name of that class so if I search here um and I search for Border I can see that there's a couple of different directives like border color uh and then here are the names I hadn't use to change the Border color or basically there's examples as well so things like this so here I want to border around each div and I want it to be a color that stands out so actually just copy this snippet here and add it to our CSS and see how that looks so back to our site we can see these big borders around our elements now so this this helps me visualize what we're actually building okay so going back to this before I style it I want to actually break this up because if I write the whole site in this one return function it's going to get really big and messy quite fast so I want to break it up into different sections and I can do that with components so let me create a new folder in my project I'm going to call it components and I want that to be at the root of the project and here I can create a footer component maybe a header component and then this introduction and this projects here like that so let's start with the footer going to copy my fotter element from here and then I'm going to go back into this one and use it here so to do that I have to actually import it first and once I've imported I can actually use it as as if it was another jsx element like that so it's got its own tag and it doesn't have any arguments so I could just write it like that and now I have it back here I'll go and do that for the rest of this as well so I'll create a header element and just copy paste that and then I'll copy and paste this stuff from here as well and just like the footer uh I'm going to import it and use it in this index file like this okay so I've even though I've removed content from this page I still have it looking the way I wanted on this screen here next I'm going to take these sections and make them into a profile element as well so one more element okay so now I have these three things as a component which is nice um I'm not going to turn this section itself into a component but I will create a component for this one project thing here which uh I want it to be a button that shows like a snippet of the project and we can click and it'll take us to another page so I'm going to call this component a project preview so let me go ahead and just copy that okay I go back to my index and I should be able to do this I have to import this as well okay so now I've structured my file into something uh where each component I can work on it individually uh so this will make the code cleaner but also it will allow us to reuse each of these things separately uh which is the advantage of doing this rather than Allin one file now what I want to do is improve this placeholder content and style it up a little bit more so we can get a better idea of the site looking the way we want I'll start with this header here so the way the way that Tailwind Works um as we saw earlier is we basically go through the documentation uh and pick a style that we want to apply for example here I want to make the text bigger and maybe bold as well so um I can look for text sizing or here typography font size and I click it and then we get these names these classes we can use in this div and it will apply uh a St style to whatever is inside this div so for example here it applies these kind of styles it changes the size changes the line height and we can see examples of it here in the towin documentation as well so that's essentially how it works we it we I usually just have this on the side and then I'll search for something I want to do whether it's a style or a color or a size uh and then I'll usually get a class name that I can write into the div here and if you search uh the extension Marketplace for Tailwind CSS you also have autocomplete intell a sense for it so as you're typing you'll get recommendations for different style names so let's give that a go now back to our site and change the colors and some of these sizes to make it look better first I'm actually going to make this border a little bit thinner just so it doesn't clut clutter up the whole Space so for the header I want the text to be fairly big big so I'm going to choose 2XL now it's a little bit bigger and that's nice I don't think I want to make this title as big but I want to change the color of the font so uh I can do text Gray uh 500 and this makes it a slightly lighter color so the way this works is again these are color codes that we can specify from Tailwind if I choose color here see text color and there's a bunch of different colors we can choose so the lower the number um the lower the suffix number the brighter it is and the higher the number the darker it is so we can see some of the examples here there's different Grays uh different types of Grays neutral gray stone uh Reds yellows so you can refer to this for the exact color you want also I can change the weight of the font as well but it's not a it's actually under a font bold uh directive instead so if I write this this is the class name so now I have text 2XL with a bold font and then this one here with a gray color looks a little bit better for the profile section I probably want something similar so I want this hello world to be a little bit bigger um maybe this can be bold as well and this one maybe I wanted to give it more of a feature color so um maybe something like purple or or Indigo let's try purple 600 here so we we're trying to Brand the site also um it's good to pick like a strong primary color or secondary color to use as the style and for this part under here I do want to just make it a little bit like I don't using black as font uh color directly here I think just like darker gray will look slightly better in fact instead of doing it one by one here for the colors I don't want to be black I could actually apply uh directive to the entire project and everything else underneath will inherit that unless I overwrite it specifically so if I go to the index here and I just put this on the actual div that holds everything I might be able to change all of the text at once so I'll pick slate 700 which is kind of like a dark gray but it's still a bit lighter than black so I think that looks nicer but our purple and our light gray is still uh unchanged because we apply that and it overwrites this uh this one here that's just how CSS works now this blah blah blah line here even though I don't really care about the content of the text at this point I do need a bigger body of text so I can get a feel for how the site is looking so for that I usually there's a sort of like a Latin placeholder text um I usually type in laurum ipsum and that's the first two lines of this uh paragraph and it's it's basically a bunch of Latin words that uh people like to use this placeholders in designing websites or text typography in general so we're going to use that here if you just type into Google you just basically get a bunch of generators you can just copy it directly I'll do something like that okay so now I've got a paragraph in here and this one we'll get to this this one later I don't think there's much we can do here at this point um and this one as well now I do want it to look good on mobile um so I have this screen quite small on purpose but uh it can also look really ugly if we expand it out and it's sort of all to the left like that so before we do more things with the text I want to just focus on this layout element I also kind of want this to be in the center of the page I'm going to achieve that by actually creating a layout component that wraps um all of these things so it's going to sit inside this all of this stuff is going to sit inside my layout component and I can do it like this just a new component call it layout and the way I can put other elements inside this is that if I accept props as a parameter uh basically all all components are passed in some kind of props which is you can think of them as parameters but the other ones we didn't use any parameters so we can leave it empty for this one we do want to use it and by default most react components will get a children key the props children key is passed onto pretty much every react comp component as far as I can tell and if we access it it basically gives us whatever is in between between these tags so if we use it as a jsx element whatever we we put in between these tags is accessible to this component via props do uh so let's try that out first I've got my layout component here and I am actually going to wrap my whole uh index page in that like this okay so now I can see that it looks the same but it is in fact being wrapped in the layout so now I can change the layout and hopefully get the page looking the way I want it probably don't need two layers of divs in this one so first of all I want to give this a maximum width I don't want it to go beyond a certain size and I want it to be quite small so I'm going to type Max withth small and then you can see here what that actually translates to in terms of CSS so this is fine for me okay so now even on the big screen it is quite narrow which is what I want but I also want it in the center so to do that um I'm going to create another div to wrap this into and I'm going to make this parent div uh full screen height like this big container is the size of the screen as we can tell by a red border here I also need to make this a flex box and now I can Center this by making it have margin Auto okay so now my element is sitting where I wanted to I also probably want to Center some of these elements here like this photo here just cuz I think in this kind of design it looks better if it's centered in the middle rather than aligned left although I think do big body of texes probably look better left aligned still so let's give that a shot yeah we've got a another Tailwind class here text Center which will put our text right in the middle and I think I might actually I think I might actually apply this to my header element as well so let's make this smaller again now that we know it's um well centered and I'll do it up here okay that looks a little bit better now I think all my elements are still a little bit too cramped they're they're sort of all cramped up against each other so I want a little bit of spacing of of gaps between them so I'm going to apply another Flex box on top of this but I'm going to make it a a vertical one um so objects are spaced out from top to bottom and then I can set a gap between each element so let's go back to where we have each of these elements this is what I want to split out and I'm gonna say Flex if I just do that it's going to try to put them in a row which obviously not what we want so we want to do Flex column and this sets the direction back to this vertical column but now we can do Gap uh let's try Gap four so these numbers the bigger the number obviously the bigger the size um four doesn't mean four pixels here it's just like a it's ordinal but it it doesn't actually correspond to anything um for here it actually means 16 pixels so they worked out some of these numbers to you know to be able to design lots of visual visually interesting elements without you having to specify the exact pixel number so if I press Gap four now it looks a little bit more spaced out which is nice um I'm actually going to turn off my div highlighting for now maybe I'll turn it back on later when I need it so now we can see see this is the way it looks I also want these lines as well these lines to separate my element here visually I think it'll look good so let's try to put that in the way I'm going to do it is add one to the header at the bottom and then I'll add one to the footer at the top so here's my header element uh I can do that by typing border which will create a border width of one pixel if I type that now it creates it around the whole to the whole thing so I can specify just Bottom by doing border DB which is just the Border bottom it's a very light color though um we can actually change the Border color uh by typing border Dash and then picking our color for example if I do border black it's quite dark like that but actually I kind of like a lighter color so I'm going to do a slate 300 which is kind of like a grayish color um I also want my elements a little bit more margin from the border so I'm going to do a padding uh maybe I just do General padding padding four and that would look good as well okay so I'm pretty happy with that and I'm going to copy this entire style actually I'm going to apply to the footer do this except I I want this one at the top so I'm going to do border top border T like that okay I think that looks a bit better um going to actually increase the Gap like we still still have a lot of space at the top and the bottom so I think that we increase the Gap it just spaces things out a little bit more and looks nicer and then this one it's I don't want this to distract too much attention the sort of footer note that we have here so I want to also make this a lighter color uh I'll do 400 okay so that works better for me now let's go ahead and add our contact elements to the header as well let's go back here back to this header and I'll just make another div and this could just be a fake mobile number like that but this is a little bit too big uh for that so I'm going to make this actually a small size with the text small okay so I think that looks a little bit better I might want two two elements for this though because I might want an email as well so let me go ahead and copy that and make an email now I'm going to do this so I can put these on the same line I do class name is flex okay so now they're on the same line but uh they're stuck together and this is not centered so we can fix that do justify Center and we can also do Gap uh maybe two okay now this element starts to look pretty good but I'm kind of repeating some of these uh directives here so let's see if I can just actually apply this to the top level and I don't have to keep repeating myself here here as well okay that's pretty good um but it does overwrite my styling for this one so I'll have to be assertive about that again and then I'll do a text slate maybe 800 this stick to 700 yep I can put text small up into this parent element as well so now I just have these two divs and then that's my style for this header for the project element I'm going to create a card with a header and some description and then maybe also have an image so let's give that a shot now and see what that looks like uh first of all because I'm going to have several projects or several project elements here uh I can't hardcode these values what I'm going to have to do is actually make these variables and then use them in here so let's do that so this is how I declare a variable in typescript this is the type this is the name of the variable and this can either be const which means it's a constant and it can't change or it can be let which means it can change but I recommend using const wherever possible because immutable variables are usually better to work with than ones that can change so I'm going to write this uh make up a fake project data analysis app this then I'll write a description tagline as well something like that to use this in jsx we actually we can just use it directly but if I do it like this you see it actually just writes title because it takes this literally as like the the word title and not the variable itself so to use the value of title I have to put it in curly brackets and now it says data and now it says app um okay so that's perfect that's what I want to do and I will also have a description here like this okay so this is my project element now I can style it a little bit uh maybe I'll make this item Bolder and then I'll make it so that it looks like it's clickable uh and then I'll put an image as well so first let's make this one Bolder and the St for that is font bold remember if you want to know what fonts are available um just have tailwood in handy here and then just search for different styles or different things that you want to do and they have great examples so now it looks Bal I probably also want it to be underlined so I can just type in underline like this here okay um it doesn't look like it's clickable though like nothing's happening so I have to actually make this an uh anchor link element so I think I might need a hre as well so for later on when I want uh actual URL I can go to right now it doesn't do anything so it just links back to itself okay so now my cursor changes because I can actually click on it to go somewhere if I click on this though it just goes to the same page which is fine because we just we don't have any other Pages yet um but I do wanted to change color when I highlight it just to make my app feel a little bit more interactive so with tailin we can do that by uh using these modifiers uh like hover and if we add this basically in combination with any other style it applies that style only when hover is true so I can uh let's say I want to make the text purple like this one when I hover I can use that same style so text Indigo 600 and that will only happen when I hover over it so here that's how it looks to add an image uh firstly we have to put the images into this project so for that I used a website called unsplash uh I don't know unsplash.com uh where you can find free open source sort of stock photos um you can download and use to mock up in your site so I've actually used this one and found a couple of images and uh I have them here so I'm just going to copy them into the project and where you want to put the images in a project is in this public folder here so these these will also be published with the site and they will make the images accessible to your site and your uh your customers so I've got a couple of different ones and I'll just pull it into the public folder so now I have them so the images look like this just things that I want to use for the site and I got all of these from unsplashed so please check the with me for the credit for whoever take these beautiful photos and make them free to use and now to use an image we can go back to the next documentation and there is a menu here with a bunch of their features so this is going to this is one of those things that next makes it really easy for me to do um over basic sort of vanilla react uh which is one of the reasons why I really like using it uh is that creating images is really easy they have these FAQ here and then this item this next SL image this image component they give us um we can put our image in here but it also helps us optimize the image as well so that when it the page loads um it's at the right size it doesn't change the layout of the page too much uh cuz that's really annoying when you load a page and then it's like the layout is Shifting CU images are loading in it's a quite a bad experience so the more sort of static your page is when it's loading images uh usually better but first let's just import this and see what it looks like I have to put in this Source property uh which is it can be a statically imported image file which we can import like from here at the top of the file or it can be a path string uh to external URL or to an internal path in here so let's try that just going to put this image here like this and now we need source and I'm just going to put it as our path so I believe we can uh I believe the public path is already the root of this whatever we put here so I think I could just do Dash um let's see coding. jpeg which is this file that I have here and I don't know if that's going to work I try and refresh it okay so if we if we have a path we must also use width and height Properties or layout equals fill I think we could probably do that so if I look back at this uh I can see the different layout options they have and this is the default one um but we can use this we either have to fix it to a certain height and width or we can fill it and it will um grow up to fill a container so I want to do that I want to fill this div container of this image here so let's go back and have a look so it's actually filled up the entire page and if we go back to the documentation it says that the parent element has to have position relative in the stylesheet so I can just do this with Tailwind as well class name and then relative is a kind of a shortcut for me and it will apply this CSS which is what we need so if I do that now and go back to the side again um well it's completely gone because this div itself doesn't really it you know it's tiny it doesn't it doesn't have any width or height either so let me try something different and actually assign a width and a height directly to this so it's a square okay so now it shows up and it's uh contained within this Square so now let's fix the layout a little bit let's have the image as a little thumbnail here on the side and then we'll have these buttons we can click sort of just floating off on the left over here I'm going to do that by creating a flex box firstly for uh for these two elements the image on the left and then this on the right and then I'm going to put these into its own div and I don't know I don't know if I need a flex box for that um so here is where I'm actually going to turn on my grid again because I think it'll be helpful this image is a little bit too big um maybe smaller okay and now I want this um vertically centered because you can see there's a bit of a gap element here so to do that I think I just have to set this margin to Auto uh but I just want the Y AIS centered so I'll do margin y Auto this just does top and bottom okay so now this is centered here but I also want a bit of a gap from the actual image Edge itself uh so I'll do Mar left or you know what I can actually I can probably just do it with the flex box here as well I'll just do Gap Gap four okay I think that looks pretty good so let's actually turn our uh borders back off and see what that looks like again okay I think this looks better so I'm quite happy with the way that's looking um I want my link to actually lead to a different page when I click it here so if I click it uh at the moment it just goes back to the same page so I want to create a new page called Data analysis app uh and I want this to take me to that page when I click it so again nextjs makes this really easy for us and this is probably one of the main advantages I like it over um using react on its own it's actually simpler to use nextjs with react than to use react on its own and I think you'll find a lot of uh similar feedback from other developers as well is that to link to a page all we have to do is create a new page uh under this folder pages and that will automatically become a new page in next already uh but we can link to it very simply by just using this link component that they give us as well so you could already see the example here we just have to wrap our anchor elements with this link and then the um reference there and it will take us to that page so let's give that a try first of all we need to create a new page before we can link to it we actually need this page to exist so this is going to be called Data analysis app page let's go ahead and create that um and now my page is I want it mostly the same um wait hold on let me just change the name of the component first okay I want it mostly to be the same except uh probably don't want these elements and then I want something about my app here okay so let's actually go to this URL and see if it's there okay so now we have a new page uh I'm going to expand this so you can see the URL so my URL is not the root Local Host URL anymore it's this data analysis um page and I have this new page here already but kind of what annoys me is that this whole layout and header and footer thing we've kind of duplicated it so if anything changes like for example with this thing here um it's not going to be great so uh what what nextjs actually does is you might have noticed this underscore app component uh here we can access this directly on the page but it's actually a component that wraps every component that appears here if we want to apply something to components across all components of this website we can do it in here instead so let's do that now I'm going to take this layout and this header and this footer out of the index and out of this data analysis and I'll put it in this app uh this common app file so it will simplify these components for us too so I'm going to like again I'm going to just remove everything I'm just going to turn this into EMP div first like this and then I'm going to remove all of this stuff here okay so now my page is back to just being very basic um but then I'm going to take this entire layout that we wrote up and then wrap what we're returning here with that so uh copy that first and then I'm going to just put this in the middle okay so we have the component and it's going to be wrapped with our header our footer and our layout and we're going to return this entire thing there but uh we have to it's going to break because we have to import these things as well so we'll just import all of these things now refresh that and my layout is back to the way it was and if I go back to the index page I I actually it's going to look pretty funky because I have the layout within the layout so I'll have to delete the version of the layout from the index page itself so I won't need these anymore I just have the profile and the project preview element oh they have to be inside of div okay so now that's looking pretty good I've kind of I lost my little padding my margin uh up here between these two elements because they're not part of that Flex box anymore that we created earlier with the Gap so I'll just have to add that in manually here for now margin top 4 okay now let's apply the link to the other page that we created here so if I go to my project preview um I've got my link here again I want this to eventually be dynamic thing that I pass in because I I want several versions of these so I'm going to create a link I guess URL variable and I'm going to make that uh what do we call it data analysis this one here and now I can use this uh nextjs link component with a hre here to uh route to that location so I have to wrap my anchor element according to this example that's what I have to do that's how the routing will work work I probably can take this but out and make sure that I import it okay so I want this URL uh instead of this thing here that okay let's go back to our site and now it works and I'm probably going to want a back button here as well so I can I can go back to my main site so in my um data analysis page probably also want to have a back button in fact I'm going to actually just copy this entire thing because we're going to we're going to want it to have a link as well so we'll do that then just do this here import the link I don't need this to be a variable because it's just going to go back to the index and then I need to change I'm going to hard code this as well to the word back okay so now this works now I can act go back and forth between my pages do want to give this guy a little bit of space though just so it's a little bit um so we have some more space here obviously writing about the project probably is going to have a bit more of a body as well so I'm going to add that Latin text to this thing too okay so now we're starting to block it out a little bit more I probably also want the uh the main image showing up at the top so I'll go ahead and do that as well so uh I'm going to show you the other way we can import images now we saw before we can do it from a direct link but then we had to add in the fill or the uh size options so that the page would not how to block it out but if the page already had has a copy of this image locally it can do some of that work without having to um for having to us to specify that but we have to import it like an element here so I can write it like this can write Project image from and then basically just my image path so that would be public then uh the one we use was coding. jpeg so if I instead of a um URL link I can just put this object directly and now it'll let me do that without complaining about the size and things like that I'll give this one a little bit of a space as well spacing is very important when you design your website okay so I think this looks pretty good so I've got I've got a little projects demo here and then when I click on it um I get the full page with a bigger image and I can also go back I really like the vs code uh supports typescript and I guess especially react development pretty well uh you can see here by out of the box by default it will gray out for you Imports you don't need so to clean up your project you can look at whatever is grayed out and you could just sort of highlight everything and delete it it should all still be the same I'm pretty happy with the one project we have in our portfolio but uh likely we're probably going to want we're probably going to want several more projects here so how can we do that with this component here uh without having to rewrite this a bunch of times uh we've already taken a step towards that by extracting some of these values that we use as variables outside like this but uh to use it uh for example here at this level we probably need to be able to pass it in as parameters directly from here so I now want to um make my project preview a little bit more generic so that this component can accept parameters and then render several project uh I guess little cards for me depending on the data I pass in we've kind of hardcode this for now so in order to pass in parameters or arguments to a component we have to do it through something called props uh so typically all our components so far we haven't accepted well apart from layouts we haven't accepted any props they've just been empty but for the project preview we're going to put these as part of the props uh the way we do that is typically I'd normally start by creating uh interface for the props it's just kind of like a class or a type for what elements we expect in here so normally it would just be the name of this component with the word interface at the end and this is well actually it's not a constant it's an interface so this is how we declare it and then to use it I can specify by saying that this is a type of react functional component that accepts an interface as the props and then I'll write props in here so this will know that it's uh this thing alternatively I think for this I can also just I can also just do this I can specify the names and the types of variables I want in my interface um by just doing this here so in instead of basically having this as separate variables I would just just copy this sort of name and type into the props and that's how we can specify it and now to use the props uh hold on let me just comment this out now to actually use the props we uh we just type props and then Dot and then we have our elements here and also what's really nice I guess about typescript and using vs code in general is that it it's got this really nice auto complete for us which I'm not sure if it's available in JavaScript as well because JavaScript uh doesn't have compile time checking so sometimes it does a decent enough job but um a lot of the times I found that the typescript experience is much better because of little things like these it's harder to go wrong okay so now my project Pro preview is using props to populate its information instead of this hardcoded stuff so if I delete this and now I save it again it's actually going to give me an error because if I go back to my uh index page we're going to see this is highlighted in red and it says all of these types are missing from our preview so now that we declared it uh we actually need to specified as well so if I just go to my control period here I I can add the missing attributes directly uh from the IDE and it'll just give me blank entries for each of these things I think it lets us run without an error but then we don't have any of our details so let's go ahead and pass that in okay and now we're back to where we were actually I also forgot and we need to pass in this image as a props as well because we we don't want the same picture for everything so I'm going to go ahead and do that too okay so that works now I have my project preview um as a generic component and I've got my data on the outside on this index page here this opens up the possibility for me to create multiple of these components and populate it in into this element here instead so let's go ahead and do that and see what it looks like it's first of all I probably don't want four new variables for each of my projects so I want this under one object and I can do that if I actually import that project preview interface that we created earlier here but we can't access this from this file because we're not exporting it unlike the other ones here that we're exporting uh if I try to import this or try to use this it's going to give me an error so here if I actually try to import it it says uh it doesn't have an exported member called project preview interface and we can fix that by just putting export in front of this interface and so now we've got this object here we do need to fill in all these mandatory Fields now I can use this uh interface as my data object instead of these four variables so I'm just going to copy everything over and I can delete these um each of these variables are red because I don't have them anymore so I need to use this one instead uh I could go I could do something like this here I think this work as well so pretty much root Force um but then it's kind of quite repetitive so what I can do instead is just put in the entire object like this and the reason I need these three dots instead of just I mean like I think if I just put the object itself yeah this this just doesn't work cuz we don't want the actual interface object as the child here but we want each of these fields separately as input to this thing and that's how it works so using the spread operator it's kind of like the um the keyword arguments in Python uh where or the you know asteris in Python which breaks up a list or a dictionary into its separate elements so that's kind of like the same thing that's going on this breaks it up and actually submits these as individual Fields instead of one object containing these fields now actually let's create some data for a couple of different projects and put them in a list so that we can see how to generate a similar list in the interface so first of all I'm going to make uh a variable to hold all of these different metadata so project metadata array that's just going to be an array uh even though this is a constant type variable it's fine we can still add things to the array cuz constant just means that we can't reassign this value but we can actually run operations that this thing is capable of so we can remove and add things uh but we just can't reassign this variable and now I'm going to do project meta data push push is pretty much the same as append in Python um push this object here like this and I'm going to get rid of this one now um but because I don't have this anymore uh what I need to do instead is create a loop to go through this metadata and for each metadata generate this project preview and then put that into a list so let me try to do that here I'll be project preview elements that's also going to be a list that's what I'm actually going to render here instead so let me just copy this out and I'm going to just put it in a comment here and this is what I'm going to decide to render here instead so now I'm going to Loop through each of these and there is a way to write for each Loop in typescript but I'm just going to use the standard notation because I feel like that's probably familiar to most people um so