SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio

Key Takeaways

learn how to build a beautiful and responsive web portfolio with spel kit and Tailwind CSS spel kit is a framework for building web applications with spelt providing tools for serers side rendering routing and more Tailwind CSS is a utility for CSS framework for rapidly building custom user interfaces without writing custom CSS when combined spelt kit and Tailwind CSS offer developers a seamless experience enabling the creation of Highly inter active web applications with a clean responsive design James MacArthur created this course he is a fullstack developer and course creator web portfolios who needs them well actually a lot of people do for example you might be trying to get a tech job or perhaps you want to have an Internet space where you can show all of your portfolio work perhaps even you are looking for a coding project and just want an internet presence to demonstrate your flare and capability all of these are brilliant reason to have your own internet portfolio live and hosted on the internet we're going to be coding the whole thing from scratch in spelit and Tailwind brilliant tutorial step by step and at the very end we will deploy it so it's live on the internet and you can send it to your mom so without further Ado if you enjoyed the video don't forget to like And subscribe thank you so much for watching and let's dive into the code so demo of the web portfolio let's take a look here we have Samuel Oak AKA fake small James and this is our landing page we've got some nice get InTouch buttons we've got a couple little navigation links up the top it's all very catchy as you can see in the background we have this cool particle animation effect which just makes us seem all the more deep and interesting if we scroll down a bit or use these navigation links we get some uh project displays and we can use the go-to buttons to actually click on them if you wanted you could add an a video after that we've got a bit about me it's just uh some information so that they can learn more about you looks super aesthetic finally we've got a table because everyone needs a good table this one weighs up all of the candidates if you're applying for jobs and shows that you are clearly the best candidate in the field finally why not invest and then at the very bottom we have some little contact me uh links in the footer of our document so it just looks uh very neat and tidy not too complicated and obviously the whole thing is also extremely responsive super critical as well so with the demo out of the way let's go ahead and get started with our project so for that we're going to come over to the Tailwind CSS and spel kit and nit project documentation which will be linked in the description down below and we at the same time going to open up a terminal in the directory of our choosing and we are going to start typing in these commands so that's going to be npm create spelt at latest and we're going to give our project name which is going to be amazingly awesome portfolio let's hit enter on that and that is going to start initializing our project for now we're just going to select a skeleton project we are not going to do any type checking we will add es lint for code linting and now we can go ahead and open up my amazing inly awesome portfolio inside of a code editor so I'm using visual studio code but you can use any code editor of your choice and we can scroll down just here and we can uh inside of our Visual Studio code open up another terminal that's just going to be in the directory of our new project going to paste these mpm install commands in once that one's done we're going to do npx tail when CSS and n-p and then we're just going to come over to our spelt doc config and copy this stuff across uh just displace everything that's currently there and likewise with the Tailwind doc config we'll do exactly the same down to the last two steps we're going to have to come into our source directory inside of here we going to create a new file called app. CSS we can go ahead and copy in these base directives and likewise we can come inside of the routes and create a plus layout. spelt where the plus layout is a reserved spelt component name that's going to wrap our entire project and we can just go ahead and import that app.css in here and as I said before this slot is going to render out everything inside of the plus page. spelt which is another reserved spelt component name so finally we're good to boot up our project we can come down here and type impim run div that will open it up on Local Host 5173 we can go there hit enter and here we see our project zoomed out way too much just to test that everything is working I'm going to type class text green 400 we see that update and we know that it is working so that is step one complete we have now configured T and CSS inside of our news felt kit project so just before we dive in let's take a look at the file directory that we are working with the core folders that we're going to be looking at inside of this directory is the source and possibly the static directories everything else here is by majority just configuration files obviously if you wanted you could make a cool little readme.md for the project not going to be touching the node modules either and inside of the source directory here we have a lib folder where we can have some JavaScript if we wanted or anything that we wanted to import not going to be relevant for this particular tutorial routes is is our route-based navigation system so the home route or the base level route route is just going to be this page dovel which gets rendered inside of this layout dovel these two files get rendered within our app. HTML just in this particular uh tag right here and obviously we have our app.css which we may touch later on Just for some custom Styles if you wanted to update the Fab icon just here that would be this particular file and the other thing to know is that in here we obviously have the head tag where we can add some header elements or you can use the Customs felt head tag uh which we may or may not do later on in this video so the first place we're actually going to start is in this app. HTML file right here and that is going to be with some Google fonts and font awesome icons so just initializing and configuring them so we're going to come over to Google font FS nice and easy links for everything will once again be in the description down below and we are going to look for Poppins is the font that we are going to be using in this project and we are going to add all of the non-italicized fonts to our little selection view the font families just here uh so here we have all of the Poppins fonts I guess you could take the italic ones that you want and down here you're going to see a large link tag with a copy at the bottom we're going to copy that directly into our head underneath the the head of our document the head tags underneath the meta one just there paste that in nice and easy and then we're also going to come over to the font awesome CDN page uh Link in the description and we're going to copy this top link tag right here as well paste that just at top the other one and now we have imported our fonts and we have have enabled the use of font awesome icons in our project in addition to that we are going to come into the body tag of our app. HTML just here and we are going to give this a class and this is just going to have a background of slate 950 a text of white and a relative tag as for this div inside the body tag we're going to give this a class as well this is going to be relative and we're going to give this a zed index of a custom amount of one which is why we wrap it inside of the square parentheses save that and we see our Styles update as we would expect them to Easy Breezy Covergirl the next thing we're actually going to do is configure the particle JS that we saw in the background just here to do that we're going to come over to a package called particle JS right here a lightweight JavaScript library and we are going to look for the CD in package just here so we can come over to the particle JS CDN package we're going to copy this Min one and likewise with the other tags we're just going to paste this up the top right here and now we are going to get this up and running inside of our document by creating a div that has a class of absolute Min height screen top of Z left of Zer a width of full a zed index of a custom amount of -1 and finally an opacity of 70 so that it doesn't overwhelm everything inside of this we're going to have a div and this has a class uh of absolute and inser zero and we're going to give this div an ID of particles this has to be spelled correctly particles DJs and this is going to be selected by the particle uh library that we just added so we're going to add a script underneath that div and call particle JS particles js. load and we're going to pass in that ID so particles DJs and we're also going to load in an assets file so that's going to be/ assets SLP particles. Json after that we're going to pass in a call back function so that's going to be a function we're going to open up that function and in here we're just going to say console.log callback particles.js config loaded uh make sure we close that just there so that's going to load and break because we do not have that asset file in there at the moment but that is absolutely fine we can do that in a minute the place that we are going to come across that asset file is if we go back to the original particle JS website here you can create your own custom one so you can you know interact with the background color make it however you want uh but I already have one that's pre-existing you can download it from the GitHub repository that is linked in the description down below and so we're just going to come into our directory here inside of static we're going to create a new folder called assets and that is going to have a particles. Json file paste that all in and now if we refresh the page we would have expected that particle JS file to load however it did not and that's because the script tag that we copied from earlier is not going to cut the mustard so make sure you copy the script tag from the GitHub repository also it's just the one specifically for the particle js on line six and just like that we can see we have our uh particles in the background uh super neat little effect that just makes your portfolios look even Tech here so that pretty much ends our start in the app. HTML file the next one we're going to come over to is the app.css and in here what we are going to do is start off by selecting the HTML of our document and we are going to give this a scroll behavior of smooth after that we're going to select everything in our entire page and give that a font family of Roboto and a backup of sans serif now you might say James we don't have the robot Auto font family and you would be absolutely correct because I forgot to add it so we can quickly resolve that by coming back into Google fonts throwing in all of these Styles above and beyond the ones that we have already added uh from the Poppins Library quickly toss all them in the mix and just copy that link tag once more and replace the prior one that was already inside of our app. HTML just here so just these ones nice and quick and easy and that font will update inside of our document after changing everything to robotto we're going to select the H1 H2 and H3 tags and we're going to give them a font family of you guested Poppins and likewise a backup of sans serif and in addition to selecting the actual tags we're also just going to create a class that's called Poppins which is also going to apply the Poppins font family so that's going to do for this document for now so we can close out a couple of these config files and the next thing we can do is come into our source directory and create a new folder called components and this is going to have the core components of our document which is going to be a footer do spelt we'll have a header do spelt we're going to have a main do spelt and we're also going to have a step dots felt so ensuring that the component name is is capitalized and we have the dots felt at the end of the component with that we can come into the main of our document and we can add a script and we can also just call the main component render that out like we have here and import main from dot do/ components SL main. spelt so it's going to import that component just there we can check that that's working by typing but that is not going to work because this is actually meant to go inside of this uh page component just here so we're going to render out the main component and then in here we can type James that comes up on the screen as we would expect so that component is working nicely so yeah just copying everything that we previously had in main into this page. layout so that's our components working the next one we're going to come into is the layout and this one has a little bit more going on we're going to start off with a div and this is going to have a class of relative Flex Flex column a Max width of 1,400 pixels uh we use square brackets cuz that's a custom amount an MX of Auto a width of full text small uh until we reach the small break point and then the text is going to be the base size and finally Min height of screen as well uh I'm actually going to not do so much of the styling and start off just doing the HTML first and we can come back and do the styling later but other than that we're going to have a div just in here we'll come back and do the class shortly this div is going to contain a button that has an up Arrow so that is going to be an font aw some icon so we can call icon class fa a solid fa Arrow up equally you could look at the font awesome site and just copy that directly now this little icon right here is going to show up in the you can't see the bottom of our screen so there it is this little icon we're going to use that for that effect right there but more on that later after our button we're going to have our header component which is going to get imported up the top then we are going to have our slot in the middle which is going to be everything inside of the page which is the main of our document and then at the bottom we can have our footer component which we will also import and then finally down the bottom of our document we're going to have a special velt component it's going to be spelled window and we're going to bind the scroll y height set that equal to a variable Y which we are going to Define shortly and we're also going to bind the inner height and we're going to bind the inner width super simple and easy now if we come up the top we can say let inner width or inner height equals Zer and we can say let inner height H sorry width equal Z also and while we're up here we we Define a function that is go top uh and this is just going to say document.body do scroll into view and that will scroll us to the top of our page so now that we've done all of the componentry inside of our plus layout we may as well add in the Styles so for this div right here which contains our back to top button we're going to wrap our classes string inside of an object so that we can make it a bit more customized and give it a a position of fixed bottom Z width full duration 200 Flex padding of 10 and a z of a custom number 10 we're going to make sure we leave a space at the end of that string and then add a plus and the circular braces and in here we're going to run a logic check that just says Y is greater than zero this just means that we have scrolled away from from the top of the page and then we're going to say if yes we're going to have a string and if no then we're going to have a different string so this is just a oneline if else check using the question mark this is the true statement this is the false statement if the Y is greater than zero we're going to set the opacity to full we're going to set pointer events to Auto and otherwise we're going to say pointer events none and we're going to set the opacity to zero so if we come into our page we can see that something is severely wrong and that's because down here we have to make sure we close this little spout window uh and just like that it's all working the next component we're going to style is our header component now in here what we're going to do is we're going to say EXP let Y and that all needs to be inside of a script tag don't let me forget to do that so we're going to add the script tag just here we're going to say export let y this is how we pass props between components so this is essentially us receiving the prop if it was just a variable defined inside of this component we wouldn't need the export and inside of our layout we just want to make sure to our header that we actually pass down y so we're going to say Y is equal to Y and while we're actually back in here I forgot to finish one or two other things we're just going to quickly add an onclick event to this button that is inside of our layout uh and that's just going to say go top and finally we're going to add a class to the very same button and just say margin left of Auto which is ml Auto rounded full background slate 900 text Violet 400 padding x 3 until we hit the small break point at which point we set the padding X to four a hover of background slate 800 cursor pointer uh display of grid Place items Center and an aspect Square should do us pretty well so yeah let's go ahead and close that layout component and come back into our header where we have just or just received that prop the y prop after that we're going to define a header component inside of our header we have an H1 tag uh inside of the H1 we're going to have a bold this is going to be your name so I'm going with Samuel and then outside of the Bold we're going to have the secondary name which is going to be Oak after the H1 we're going to have a div that has a class uh that we will Define shortly and in here we're going to map out some items using the spel kit or spel each where we say # tag each inside of the curly parentheses we pass in an array which is tabs and we say each individual item is going to be referred to as Tab and we're also going to take the index inside of here we're going to register out an anchor tag and inside the anchor tag we're going to have a paragraph that just has the tab. name with that we should probably come into our script and just uh Define tabs so that's going to be let tabs equal to the square brackets uh so an array and inside of our array we're going to have a series of objects uh each object will have a name so the first one for example will be projects and then the link is going to be # projects which will be the ID of that section as we Define shortly I'm going to duplicate that three times and just uh set the second one to about uh me and that's just going to have a link of about or an ID of about and then finally we're going to have blog and I'm going to delete this last one uh because it's not entirely necessary if you have a Blog then that is awesome and in here we also have to make sure we actually add a key for that particular value so that that is Happy uh you'll notice in this portfolio just here if you click blog we get which possibly isn't the effect you're looking to have for any prospective employers so if you have a Blog then obviously feel free to add that one in so now we can see each of the items showing up on the screen just there just as we would want we can go ahead and start styling everything in this component we're going to start off with the uh class on the header now like in our previous component we're going to wrap that inside of wrap the string inside of a curly parenthesis cuz it's going to have some Dynamic classes and that's going to be sticky we're going to give it a zed index of 10 a top of zero a duration of 200 a padding X of six Flex items Center justify everything between we're going to give it a border b a border solid and then after all of that we're going to finish that with a space in the end of that string and then we're going to have plus circular parentheses and in here once again we're going to say y greater than Z if it's true we're going to have one class uh appended if not another set so if it is true we're going to say padding y of four background slate 950 and Border Violet 950 and if it's false we're going to say padding y of six background transparent and Border transparent and we'll see what that does shortly but essentially what it means is that as we uh scroll when we scroll away from the header then it's just going to make the background opaque and we're going to get a border bottom showing up so that will look nice after that we have our H1 this is going to have a class of font medium uh the Bold tag is going to have a class of font bold and we're going to set that to Poppins and then after we've styled the H1 we're going to select the div and just say small Flex items Center gap for an otherwise headen so the default dis will be hidden on a small screen and then when we get to a booger screen we're going to have a display of flex uh so we can see that coming in now after that we're going to style the ank tags this is going to have a class of duration 200 hover text Violet 400 and we also have to make sure that we add the href equal to uh tab. link as we defined above so that will work for our navigations we can see if that's working it is indeed very nice and then finally what we're going to have is a another button although this is technically going to be an anchor tag this is going to have a class of blue shadow which we will Define shortly a custom class after that we're going to say relative overflow heading px5 padding y of two group rounded full background white text SL PL 950 inside of here we're going to have a div that has a class of absolute top zero right full width full height full background Violet 400 an opacity of 20 we also going to say group hover uh semicolon and we're going to translate that element X full a z of Z and a duration of 200 after this element we're going to have an H4 this is going to say get in touch and we'll just have to give this one a class of relative and a zed of n for this whole anchor tag we're going to have an hre equal to whatever social media uh platform you want them to get in touch with you so that could be linked in uh copy that link and paste it in there and we're also going to set the target toore blank and now we can see the effect that this has that little pseudo effect it just uh we get that hover which is quite nice so that is our header done the next component is going to be the main component now inside of our main component we're going to start off by opening up a script just as we have here and then after that you guessed it we have a main component or main tag we can go ahead and open that up and uh after that we're going to have a section which we will give an ID equal to intro page and for the main we're going to give this a class of flex Flex column and a flex of one so that it occupies as much space as it can uh and we're also going to give that page a padding of four now for the section we have here essentially we're going to split up each part of the main in sections so the first section second section third section so that would be the blog and the you know projects and about me uh and that's what the ideas are for to scroll us to each individual section as you will see shortly so our first section is going to have a display of grid grid calls one until a large break point at which point we will upgrade to a grid calls 2 we're going to give it a gap of 10 a padding yre of eight and a small padding yre of 14 uh when we go above that small break point following that we're going to have a div that has a class of flex Flex column on a large display or more we're going to justify everything Center we're going to put the text Center until we get to the large display and then we're going to say text left we're going to put a gap of six until we get to a medium screen and then upgrade to a gap of eight and then on the large breakpoint we're going to go to the Gap of 10 inside of here we are going to have an H2 tag this is going to have a class of font semi bold text 4XL uh until we get to the small screen then it's going to be text 5 XL and then on a medium screen it's going to be text 6 XL so nice and large and this is going to say hi I'm uh span tag class Poppins text Violet 400 this is going to be for a pretty uh little Violet section this is going to say Samuel or whatever your name might be after that we can continue Oak going to insert a breakpoint in the text and then we're going to say full stack and then we're going to have that same span once again just there and this is going to say developer and if we save that we can see exactly how those two spans work right there I think that looks pretty nifty after that div we can have a paragraph tag and this is going to have a class of text base small text large uh and medium text extra large so always going up and this can say my uh same span class text Violet 400 favorite tech includes JavaScript uh specifically nextjs or obviously you would make this custom to yourself or spelt kit as you probably noticed tail wind CSS no surprise there nodejs plus Express JS and postgress SQL or Firebase SL fire store exclamation and then we have our neat little text showing up and after that we are going to finish it off with a button it's going to be a very similar button to what we have in our header and that's just going to be the same anchor tag as before we're going to have a class of blue shadow MX Auto large screen or more is going to be Mr Auto so margin right Auto we're going to say text is the base size until we get to the small screen then it's going to be a text of large and then on the medium screen we're going to go for a text extra large we're going to give it the font family Poppins relative display overflow heading padding X of six padding y of three uh we'll add a group rounded full background white and a text slate 950 after that exactly the same as we did in our header we can copy that div that's that little background div in and we can actually also just copy this H4 tag uh once again into just after that div right there and what we can do after this one though is we're going to use the HTML Arrow so that's the Ampersand R A RR Roar and now we get the uh little amband right there and just like that we have a cool link we're also going to have the cursor pointer style added to that and in here just like you did uh in the header we're going to add the hre or the link to your social media profile or wherever you want them to get in touch and a Target equals blank once again so that is 1 half of our grid display done then we're going to have the second half which is going to be a div that has a class of relative Shadow 2XL an extra big Shadow and then a grid and a place items Center now in here we're going to have an image tag and this is going to be an image of you're choosing whatever you like we're going to access this image from images SL profile.png or whatever it is that you saved it as and that should actually be Source equals uh equally we'll have to add the alt which is just going to be uh profile image and finally we're going to add a class which is just object cover a z index of a custom amount of two and we're going to set the maximum height equal to 70% of the view height now this image doesn't currently exist for me but I'm just going to paste it in there going to create the file it's going to be images uh reveal in finder paste that in and now if we open that up that is right there and if I save this we get the image showing up on the screen Happy Days the only thing that is being a bit mischievous here is uh this and that's just because our button should be wrapped inside of the div inside of our header dot spelt uh and that's going to make it match the replica equally you could actually have it outside if you prefer the button to display on the smaller Mobile screen uh that would be totally viable also so you know what maybe we actually do just leave it outside then the get touch just is always there I actually prefer it like that so that is the first uh part of our main component complete on to the second so that's going to require a new section and who can guess what this section is going to have an idea of well it's going to be from the links above it's going to be projects uh so we can go ahead and enter that I'll make some space in here and now we can give this a class of padding y of 20 on a large screen or Burger we can say padding y of 32 Flex Flex column and a gap of 24 inside of this section we have a div that has a class of flex Flex column a gap of to and a text of Center this is going to be the header essentially for this section which is why inside of that we have an H6 that says a few of my creative Endeavors full stop this H6 is going to have a class of text large small screen or larger text extra large and on a medium or bigger screen we're going to say text to extra large uh noting that large should be LG not large large underneath that we're going to have an H3 this is going to be the actual title uh and this is going to say curious to span class Poppins text Violet 400 as we' have seen C after that we can continue with my work question mark the H3 is going to have a class of font semi bold text 3 extra large small text 4 extra large medium text 5 extra large and then underneath that we can have an anchor which is going to have an hre this is going to be the watch the video button or you can just rck roll them like I have the Rick Roll link is actually going to be used in this project so if you want that copy that from the GitHub repo directly we're going to want to make sure that this one has a Target equals unor blank to open up a new tab and this is going to have a class of margin X Auto padding X4 padding Y2 rounded medium border border solid border white a display of flex item Center gap of two minus margin bottom four unless we are on a small screen in which case it's going to be minus bottom um minus margin bottom zero uh and then we're going to set the minus margin top is uh 10 so it's essentially just setting a negative value on Hover we're going to set the border to being a violet 700 color and we're just going to give the whole thing a duration of 200 and in here we're going to have an icon that has uh the class fa a regular uh and then fa a circle dplay once again you can copy these uh code them straight in or copy them from the font awesome page and after the icon we're going to have a paragraph tag that that just says watch the video so we should be able to see this pop up down here there we have our margin top being super weird talk about misbehaving uh and that is because it is supposed to come after the div not be within the div so just fixing that we get our little watch and we can also use our little scroll to the top button uh which is super nice and neat beneath all that but still within the section we're going to open up a dish that has a class of grid grid calls one until we hit a large screen at which point we're going to set it to grid calls 3 so that'll be three columns we're going to have a gap of 12 until we get to the large screen and then we're going to have a gap of 10 downsizing in here we're going to use the step component that we have created and we're going to have three of them so we're going to call step uh and we're going to duplicate it three times but before we do we want to make sure that they have an opening and closing tag because that is going to be important for later and in here we're just going to pass down a prop known as step and we're going to set that equal to steps which is an array that we haven't yet defined with the index which is going to be the number or the uh sequence the ordered sequence of which it is so it's going to be 0 1 2 now as for what goes into step we're going to have to come up to our script and Define uh steps so that's is going to be an array and it's going to be an array of objects where each object is going to have a name field and an icon field uh we're going to have three of these the first one is going to be the small James store or whatever your project is and we're just going to copy in the class name for the icon of your choosing so this is going to be fa cart shopping let's just go ahead and take a look at some of the other icons though so we can come over to font awesome.com links in the description and we can head over to their icons type in banana I don't know if we oh look they have bananas just not in the free package we want to make sure that we're using the free icons as much as we can but you could have just about anything you know here's all the free icons so you could want one for Docker for example and you can just copy the class string not the whole tag so that is all very straightforward our second step is going to be ultimate todos uh this is going to have an icon of fa solid fa list check and then the last one is going to have an icon of fa solid fa diagram project and and a name of Pokedex which if you're not familiar is what Samuel Oak originally came up with he is the Pokémon Professor that sends Ash Ketchum on his mission so here we have the Pokedex now I should also note that these are project tutorials that I'm going to be creating soon so if you want the ultimate portfolio full of projects that are going to get you a job just like these then like and subscribe and stay tuned for those to come anyway now we have the steps we can start on our step component obviously we are passing down the step as a prop so we're going to have to receive it inside of the script tag so we can say export let step that will give us access to the step in this component and then we're going to have an anchor tag it's going to have an H rff equal to curly braces that's going to be the step. the href which is the link to the project we're going to make make sure that anyone who clicks on this is going to get opened up in a new tab so perhaps it takes it uh the user to the GitHub page for the project or all the code or perhaps to a live deployed version of the project and after that we're going to give it a class of padding for uh small breakpoint padding six medium breakpoint padding 8 Flex Flex column gap for rounded large border border solid border Violet 700 text Center group cursor pointer hover border Violet 400 and finally a duration of 200 inside of this we're going to have a div that has a class of background slate 950 grid Place items Center a padding X of four a text of five extra large medium Tex Tex 6 extra large uh we're going to set a negative margin top of 10 on the small breakpoint it's going to be negative margin top of 12 medium breakpoint negative margin top of 14 and large is going to be negative margin top of 16 margin X of Auto and a duration of 200 inside here we're going to have the icon with the class that is the step do icon uh just like that so we can use the curly parenthesis to set that after that div we're going to have an H3 uh that is going to be the step dot name also I should just clarify that this whole class here is to essentially create the effect that we see just here where it blocks out the purple line and creates the space and the negative margin top just drags the whole thing up so it overlaps the the border of the contain container uh but back to the H3 we can set a class of font medium text extra large small text 2 XL and finally medium text 3 XL uh after that we're going to Rend out the slot which is essentially going to be the children components which is anything wrapped within the opening and closing tags of the component rendered out inside the main dos felt and then finally we can have a div that has a class of flex One Flex justify between gap of four and items end and inside of here we can have a div that has a class of margin left Auto cursor pointer on Hover we're going to have a text of slate 950 a duration of 200 relative and then we're going to add in some pseudo effects so we're going to say after we're going to use the after pseudo effect and give that a position of absolute we're going to say after top of zero we're going to say after height of zero after right full after width full after height full after duration 200 uh and then this one's even more complicated it's going to be on the hover we're going to set the after equal to translate X of full finally set the after to a zed index of -1 and an overflow of headen now inside of here we can have a p that has a class of relative and a z of four and this can say go to and then we can have the Ampersand raar for the right arrow and that will show up with a beautiful go-to just like that now one thing that I notice is that the after should also have a background of white so we're just going to add that in after background white I think I forgot that and then we can set the Z to1 again and now we just get this nice little link hover effect as they uh click on it technically they can click anyway but it just makes people feel better and it's more obvious if you actually give them a go-to link so now that we have defined that component we can come back into the main SE of our document and we can just add in the children content to the step components and that is going to be a paragraph tag that says small James store is a merchandising store created with then we're going to throw in a strong tag with a class of text Violet 400 and we're going to have some tech so it's going to be nextjs Commerce JS stripe and nodejs plus expressjs my goodness doesn't that sound like a good text stack you should definitely watch that video when it comes out uh after that we're going to say commerce. JS is a product content management system and stripe is used for all transaction handling so that is our first one we're actually going to copy and paste that inside the rest of them and then we're going to say for the second one ultimate todos is a full stack uh and this is also going to be nextjs uh no JS plus Express uh and Fir store and fire I guess it is Firebase uh crud application application that allows a user to login manage a tidy not tiny and efficacious there's a good word to-do list and persist this information across devices so that's the second one after we've done that we can get rid of all of the content between there and the full stop and now we can do the very last one which is going to just say the PO keex is a we're going to use the strong tag with a class of text Violet 400 and in here it's going to say spelt kit and Tailwind CSS uh then we're going to jump outside of the strong tag uh web application comma hosted on uh and then we'll do another strong tag just as we have before hosted on netlify uh and then we can say that consumes and caches the then we're going to have another strong tag pokeymon API to dis playay all Pokémon information got to catch them all and then we can get rid of all the remaining text just there and that's going to do it for our three uh items just here and that's also going to do it for this section so now we can create the last section that comes above our footer and this one is going to have an ID equal to about so that when we click the about keyword which is up the top it will take us down to this section also note that this should not be in the middle uh but we can fix that very easily just by saying if we come into the header we'll set this to an ml autoflex one let's actually just do ml Auto and we're also going to need a PR of four uh so that's just going to push them over there and keep that button for us anyway back to the main component so we can close that come down here we've got our last section which is the about we're going to give it a class of padding y of 20 but we're going to separately set the padding top to 10 then on a large break point we're going to set the padding top to 16 and additionally on another large break point we're going to set the padding y 23 2 we're going to give it a flex Flex column and a gap of 16 until the small break point where we'll have a gap of 20 and then the medium break point where we're going to have a gap of 24 and finally a position of relative inside of here we're going to have a div this one is going to have a largish class so bear with me this one is going to be a flex Flex column a gap of two text Center relative uh we're going to say before so we're going to use the pseudo before element we're going to give the pseudo before a position of relative we're going to go before top of zero before left of zero before is going to have a width of 2/3 before is going to have a height of 1.5 before is going to have a background of violet 700 uh and if we save that we can see we get this line here so that's perfect and now what we're going to do is we're going to copy all the before Styles uh so we'll copy them and then we'll paste them just afterwards and we're also going to select all the pasted befores and we're going to change them to Afters so we're going to have two separate pseudo elements and we're also going to have to change the left for a right and a top for a bottom and then we're going to change the well actually that's pretty much it so now we can just come in here and we can add the actual elements so this is going to have an H6 that says want to know more question mark tant izing I'm sure they absolutely do we're going to give this a class of text large until we get to the small break point where it's going to be text extra large and then the medium is going to be text two extra large uh so we'll save that there's our want to know more for some reason our bottom one isn't moving over so our before is left zero our after should be right of zero not sure what is causing that but we can come back and fix that in a minute after that we're going to have an H3 and this is going to say uh a bit then we're going to have our classic span that has a class of Poppins text 3XL sorry that's actually just text Violet 400 and inside of here we're going to say about cuz this is the about section and then we can finish that off with a me dot so there we have a bit about me this h H3 is going to need some Styles so that's going to have a font semi bold text 3XL until the small break point where we're going to bump it up to a text 4 extra 4 extra large and then finally on the medium a text 5 XL so now we have that header and for some reason we have that misbehaving div so what I'm going to do is I figured out exactly what it is this after right here and this before both need to have a position of absolute uh so that fixes that perfectly I am just a muppet but the one thing we're going to have to add is a padding y of four and then now we have the desired effect not that you can even see it but there it is just there so that's that section looking nice and tidy underneath this div we're going to have a paragraph that has a class of MX Auto Poppins font semi bold text large small text extra large medium text 2 XL and this is going to say I am dot dot dot with spaces between the dots and then under here we're going to have a div that has a class of flex Flex call Gap of 20 with full MX Auto and a maximum width of a custom amount so we use the square brackets that's going to be 800 pixels in here we're going to use the each which is going to map over all of our benefits and we can extract each individual benefit as a benefit and we're also going to take the index and then we can close the each and in here we're going to have a div that has a class of flex gap of six until we get to small and then we're going to have a gap of eight now for for this we're actually going to need to Define some benefits so we're going to come up to the top to our script and say let benefits equal to an array where each index is going to be an uh object and so in here we're going to have a name field and we're going to have a description field uh so let's just duplicate that three times and for the first one I'm going to say a self-taught developer uh for the second one I'm going to say a product design and ux fanatic and then for the last one I'm going to say an excellent Communicator can't neglect the soft skills and then I'm quickly going to fill out the descriptions I'm actually just going to copy and paste them uh I'd recommend writing stuff that you personally resonate with but if you want to use this as a template then the code is in the GitHub if you just want to copy and paste that across so there are our benefits added uh it looks like somewhere in here we have to escape uh an exclamation point but that's all good and so now back down to this div we can open that up and in here we are going to start off with a paragraph tag that has a class of Poppins text 4 extra large small breakpoint text 5 extra large medium breakpoint text six extra large uh it's going to be a text slate 500 so it's not very uh stand itish and we're going to give it a font of semi bold and this is actually going to have the index + one so we're going to use the curly parentheses to render out a JavaScript uh value and if we save that here we can see we get the 1 two 3 showing up and then after this paragraph we're going to have a div that has a class of uh that should say div not ID div that has a class of flex Flex column uh a gap of six until we get to the small breakpoint then we're going to have a gap of eight so all the gaps are equivalent and in here we can have an H3 that has a class of text 2 extra large small breakpoint text three extra large probably getting the vibe for this until I say on a medium we're going to go text 5 XL so we're going to jump up one that's going to have the uh the benefit. name and then underneath that we're going to have a paragraph tag that has the benefit. description and that's just going to be as you would expect and so now we have the uh section showing up looks like you're seeing some artwork in a museum looks very nice and tidy and so if we take a look at the actual website we can scroll down to the bottom and see that after that we just have this uh header here we've got the table and then we've got our footer so not much left to go uh and so that's going to start off after the div above the closing section we're going to have an H5 and this is going to say the and then we're going to have a span that has a class of text Violet 500 uh 400 sorry uh complete and then we're going to have space package because we are the complete package and then under that H5 we're going to have a div that has a class of flex Flex column overlow X of scroll a gap of 10 a maximum width of a custom amount of 800 pixels so we use the square brackets an MX of order and a width of full and then within this div we are going to have our table uh so this is going to have a class of background white a text of slate 700 we're going to say rounded and text Center then we can open that up and now inside of here we're going to have the table head which is going to have a class of Border bottom uh border solid border slate 200 uh and then we're going to have a TR with a class that's just empty and this is going to contain a th tag that's empty then we're going to have a th with a class of wh space- no wrap our padding of Two and a padding X of four and this is going to say candidate number one and we're going to duplicate this uh a couple of times so we're going to have a candidate two a candidate three and then the last one is going to say me except this one is going to have a background of violet 700 and a text of white uh and we're also going to give this one a padding of four and a padding X of eight so if we scroll down we can see that showing up down there uh that is all hunky dory underneath the TR well actually the T head we're going to have the table body and this is going to have a TR that has a class of Border B border solid oh that needs to say class A Class of Border B border solid border slate 200 close that inside of here we're going to have a TD that has a class of border right border solid border white padding left of four padding right of eight padding y of four a font of semi bold and a text of small and this is going to say dedication and then we're just going to have a uh another TD that contains an icon with a class of fa solid FX Mark which is a tick mark and that's going to say text slate 500 uh now we're going to duplicate this four times and we're going to change the last one to be a green 500 so if we save that now we can see that show up so here we have the dedication row uh and the last one instead of being a cross should actually be a check so that it shows a green tick where the rest of them show X's so now what we're going to do is we're going to just basically duplicate this TR uh I think it's four times 1 2 three so we get four in total the second one is going to say critical thought it's good to be a a critical thinker then we're going to have interpersonal skills uh if you don't have these then I'd aim for a remote worker environment like myself and then we're going to have a programming ability after for the last one now we're also going to oh actually we have a problem Houston we have a problem uh if I noticed that we our little uh scroll up icon is just looking a bit funny so that's going to be in the uh layout component if we just come up here we want to make sure sure that on our button here we have a rounded full but we also have an aspect of square so that's just going to make that circular you can't see it down the bottom but it is there uh so just o