Creating a Space-Themed Portfolio Website

Hello, and in this video you'll learn to create this awesome space-themed portfolio website, which uses Frame Emotion for animations, 3GS for the star background, TypeScript, has a lot of features, and is fully mobile responsive. Without further ado, let's begin. Alright, we can begin by going to our desktop and creating a new folder. I'll call it space portfolio. You can call it whatever you like, but don't use any capital letters as Next.js won't work. And let's drag it into our Visual Studio Code. Next, let's expand our Visual Studio Code and begin creating our website. For this, we can go to View End Terminal, and then we'll need to paste in a command. For this, we can go to the official Next.js website, copy this command, paste it into our terminal, and add a.slash. Here, you'll either be asked to install Next.js and if you already have you'll get these options. First of all, yes we would like to use TypeScript, yes, yes, no, yes, and no. So simply pressing enter a bunch of times and this will create our app. Next we need to install all the packages. For this we can run npm install dash dash save dash dev just in case and say framer dash motion three react dash intersection dash observer at react dash three slash dray and at react dash three slash fiber once that is done we can run npm run dev to see if the app is working And in a few seconds, this should appear. And we can control click on this link. Here we should see a basic Next.js app. And yes, here is a basic template. That's what we're going to remove shortly. Next, we can close terminal and remove everything unnecessary. First of all, we can go to app and page.tsx. And here we have the starter page. And we can essentially remove. everything in the return statement. So we can select all this and remove it, return a main, which will say space portfolio. Next, we can go to globals.css and remove everything but these three lines on the top. These three lines allow us to use Tailwind CSS. Let's see how this looks in the app. And yes, here we have a completely empty screen, which says space portfolio. exactly what we want. Alright, next thing we can do is go into our layout, remove this title, say space portfolio, change the description to this is my portfolio. Next thing we can do is go into this body. This body essentially encompasses our entire app. First of all, we can make this a template string and make this dynamic. So we keep the interdoc class name. and say bg dash hash 30014 overflow dash y dash scroll overflow dash x dash hidden we can actually add another zero over here before this three and let's see how this looks as you can see we have this dark purple background which is exactly what we want and let's do the final part is work on the page dot t s x, which will be quite fast and then start working on our components. In this main we can have a class name of h dash full and w dash full. And here we can have a div. This div will contain all the components. So class name, flex, flex dash call, and gap dash 20. And all we need to do now is add all the components inside of this div. Now we can begin by creating our first component and that is our hero section. For this we can go into the root of our directory and create a new components folder. Here we'll create a main folder. These will be our main components that will go over here. There will also be sub components which go into these main components. So in this main folder we can create a hero.tsx and run refc inside of it. As always, if you can't do that, you can go into extensions. and download this extension. So in here we can do is remove this hero text, go in here and give this a class name of relative flex flex dash call h dash full and w dash full. Inside of here we can have a video. This video will have multiple attributes. First of all autoplay, next muted, and also loop so it never stops. We also have a class name so rotate dash 180 absolute top dash minus 340 pixels left dash zero z dash one w dash full h dash full and object dash cover. Let's remove this dash and continue. Alright, next thing we can do is add a source, which will be a self closing component. This source will have a source of slash black hole dot webm. And it will have a type of video slash weapon. But to actually use this black hole video, we'll need some assets in our public folder. For this you can go to the description down below and download all the assets. Once that is done, you can close the public folder, go to page.tsx and over here add the hero component. Don't forget to import it from components. And let's look at the result. Now, if we go ahead and look at this video, the video is not there. So, let's see why it is. First of all, I spelled webm wrong. Next part, look at this container. It says this video and this whole container has an H of full and W of full of its parent container. However, its parent container does not have a height or width. So if we simply say H-850 pixels, this will fully resolve the issue. As you can see, now we can see the black hole. This is only necessary for now as we don't have any proper components. Once we change that we'll be able to remove this height. Next thing we can do is create all the content for the hero section. For this we can go into components and not main and create a sub folder. This folder will contain a hero content dot tsx and we can run our afc in this file. In here we can start off by importing motion from framer motion. And inside of here, we can turn this div into motion dot div. And begin working on it. First of all, we can say initial equals hidden. Animate equals visible. Next, let's give this a class name of flex, flex dash row items. dash center justify dash center adding x of 20 margin top of 40 a w of full and a z of 20. in here we can create an ordinary div and this will be container for all the text this can have a class name of h-fall w-fall flex flex dash call gap dash five justify dash center, m of auto, and the text of start. Next thing we can do is create a motion.div. This motion.div will have two attributes. First of all, a variance and a class name. We'll start with a class name. We'll have a custom class of welcome dash box, a padding y of 15 pixels, a padding x of 4 pixels, a border, a border with a color, this color will be quite complex, 7024 or rather 42, F88B and an opacity of 0.9. Next thing we want to do is add some variants. For this we can say slide in from top. Obviously we haven't created this yet. For this we can go into the root of our directory, create a new folder called utils. This folder will have a motion.ts. In here we can paste this. I'll leave this in the description down below. Essentially here are some functions sliding from left, sliding from right, and sliding from top. As you can see sliding from left and sliding from right have a delay property, which means that we can have a different delay for different elements, which you'll see later on. And so we can go back here, select this, press ctrl space, and import it from utils. For the next part we need to make another installation which I forgot before. So for this we have to npm install at hero icons slash react. Once that is done we can close the terminal. Say sparkles icon which will come from the 24 part. And give this a class name. First of all it will have a text of hash b49. BFF. Text in this case simply means the color of the icon. Next we can give it a margin right of 10 pixels, an H of 5 and W of 5. Under here we can H1 which will say full stack developer portfolio. This H1 can as always have a class name of welcome dash text. and text-13px. Now, as you can see, this is custom class. So to see it, we can go to globals.css, and here it is. Essentially, what this does is adds this gradient to the text, essentially by making the text transparent and then adding the gradient over it. As you can see, it is easier to simply make this a CSS class in the background than having a bunch of classes over here. Now let's see how this looks in our actual app. For this we can go to our hero section and import hero content. And let's see how this looks. As you can see, we instantly get an error, which I already knew. The reason being is because in our hero content component, we are using frame of motion, which well, we can't actually see it, but it uses react hooks, which can only be used in client components. So on the top, we can say use clients. and this should resolve the issue. In a few seconds we should stop getting this error, and actually while we're doing that we can go over here and pick this from 15 pixels to 8 pixels. And yeah, let's see how this looks. We get the animation, and we get a proper size for this card. So let's continue. Now if we go back under this motion.div we can create another motion.div. This will contain the large text. First of all we can give it some variance which will be slide in from left and 0.5. 0.5 is the delay so if we go to motion.ts as you can see slide in from left has this delay parameter which is used over here. We can continue by also giving this a class name. of Lex, Lex dash call gap dash six margin top dash six text dash six XL text dash bold text dash white max dash w dash 600 pixels w dash auto and h dash auto in here we can say providing and add a span This pen will say the best. This pen will also have a class name of text-transparent. Text itself will be invisible. Next we can say bg-clip-text. So basically the background will follow the outline of the text. Then say bg-gradient-2-r. from dash purple dash 500 to dash cyan dash 500. A cool trick but a very useful one. Under this pan we can say project experience and go under this motion.div. Here we can create a motion.p. This motion.p will first of all have a variance which will also be sliding from left but this time we will have a delay of 0.8. We also have a class name of text-lg, text-gray-400, margin-y del 5, and max-w-600. In title here we can have a small text describing who the person is. Let's continue. Next we can create a motion.a. This motion.a can have some variants. This will be once again sliding from left, but this time it's going to be one. So this will be the longest of all of them. We also have a class name as always with a padding y of 2. Button-primary. another custom class name text dash center, text dash white cursor dash pointer and rounded dash LG and we could also say max dash w dash 200 pixels. And it can say learn more. Finally, we can go under this div and create another and final motion dots div. This div will have some variants. of slideIn from right with 0.8. Next we can have a class name of w-full, h-full, flex, flex-center, items-center. Rather this should be justify not flex. And inside of here we can say image which will come from next slash image. First of all this image will have a source. The source will be slash main icons dark dot svg. An alt of work icons, a height of 650 and a width of 650. Now let's see how this website looks. If we reload this we'll get all these smooth animations. By the way, if you go into the website and you don't get the elements or animations, simply reload it again. This is an issue that only happens on localhost and will not happen once you deploy the website. Now let's fix any issues we have with this code. Let's start from this. This seems a little smushed together. So we can go up here, this padding x and say 7 instead of 4 pixels. Next, with this part. We need to be in two lines, not three. For this we can cover this entire thing in another span. And also over here I set text-bold instead of font-bold. Now we almost get what we want. But there are no spaces. And for this what we can do is move all of this onto one line. And simply manually add spaces over here. And over here. And as you can see, now we have exactly what we want and we're done with this section. Now we can continue onto the star canvas. For this we can go back, go into our components, into main and create a new star background dot tsx and run refce. Now let's make all of the imports. First of all we can go above here and make this a client component. Next we can import useState, useRef and suspense from React. Also we can import canvas and useFrame from at React-3 slash fiber. Next we can import point, point material and preload. from once again at react dash three but slash dre this time and finally we can import this as random from math slash random slash dist slash math dash random dot esm And I believe we're done with the imports. By the way, if you get this error, you can try this command in the terminal. If that doesn't work, what you can do is go under here and paste in this line. This will make TypeScript ignore the error. As it's simply a small type error, and it doesn't actually affect our app, we can do this, and this won't affect our functionality. Next, in here, we can say props with the type of any. Inside, say const ref with the type of any. equals use ref. Next we can say const sphere. equals useState. So quite a strange useState we have over here. And this will return random.insphere new load32array of 5000 and it will have a radius of 1.2. Next we can say useFrame which will be state. and delta and this will return ref dot current dot rotation dot x minus equals delta divided by 10 and we can actually copy all of this and paste it over here change this to y and change this to 15. now we can move into the return statement this will return a group which will have a rotation. So rotation, and this will return an array of zero, zero, math.pi, divided by four. Inside of here, we're gonna have some points. These points will have first of all a ref. So ref is ref. Positions of sphere. Next is stride. so stride of three next we have this property and we can also destructure the props and finally inside of here we can have a point material which will be self-closing first of all it will be transparent next it will have a color equals to hash fff next it will size of 0.0 0, 2. Next, a size attenuation of true and a depth right of false. Unlike our usual fileable new one component, this will have two components. So we can say const stars canvas equals and make an instant return. And we can actually replace the store background with stars canvas. As we won't actually be exporting all of this, we'll simply be using it inside of stars canvas. Inside of here we can have a div. This div will have a class name of w-full, h-auto, fixed, inset-0, and z-20. Inside of here we can have a canvas. This canvas will have a camera, which will have a position. which will be 001. Inside of here we can have a suspense, this suspense will have a fallback of null. And finally here we can render the star background. And I believe if there are no errors, we're done with this component. So now we can go into the layout. And over here say stars canvas. Now let's go to the website and see how this looks. And this looks amazing, just as we intended. By the way, if you're enjoying the video so far, please consider liking and subscribing, thank you. And now we can move on to the navbar. In here what we can do is go to components, main and create a new file called navbar.tsx. And in here run rafce. Now let's remove this text and style the wrapper div. For this we can say class name w-full h-65px fixed top-0 shadow-lg shadow-hash and this will be 2a 0e 61 divided by 50 bg-slate-300 over 30 bg-hash 0300 1417, back, drop, so back, drop, dash blur, dash md, next z dash 50, and padding x of 10. To be honest, this bg-slate isn't really necessary, so we can actually remove it. And let's see how this looks in the actual app. For this, we can go to layout and add the navbar under the stars canvas. So navbar. and let's see what it is If we go to the app, as you can see the navbar is there and working properly. However, the black hole isn't in the correct position. For this, we can go back to our app, to page.tsx and remove this height of 850 pixels. This was only necessary when we didn't have a section. Now that we have one, we can have the black hole and it's working perfectly. Now we can go back to the navbar and add another div. This div will have a class name of w dash full, h dash full, flex, flex dash row, items dash center, justify dash between, m of auto, and a padding x of 10 pixels. In here we can add an a tag. This a tag will have an href, of hash about dash me and we'll have a class name of h dash auto w dash auto flex flex dash row items dash center in here we can add an image this image will come from next slash image it will have a source first of all which will be slash nav logo dot png it will have an alt of logo, a width of 70, a height of 70, and a class name of cursor dash pointer. And on hover, animate, animate dash slow spin. Under here we can add a span. This span will say in my case WebchainDev. We can also have a class name of font-bold, margin-left-10px, hidden, on-medium-divice-higher block, which means show, and text-gray-300. Under this a tag we can add another div. This div can have a class name of w-500px, h-full, flex. flex dash row items dash center justify dash between and on medium devices a margin right of 20. all right next thing we can do is add a div over here this div can have a class name of flex items dash center justify dash center border border dash hash 704 2f 861. Next a background of hash 0300145e. Next a margin right of 15 pixels, padding x of 20 pixels, a padding y of 10 pixels. Also rounded dash full and text dash gray dash 200. Now in here we can add an a tag with an href of hash about dash me and a class name of cursor dash pointer. Actually we can also make this justify dash center justify dash between. So this will say about me. We can copy this two more times. One two. This will say skills and this will say projects and we can also change these things this can say skills and this part can say projects projects yes for the next part we'll also need to go to the root of our directory and create a new constants folder this folder will have an index.ts and we can paste all of this inside This seems to be some static information that we'll be using throughout our app. So you don't have to manually write all this yourself. So simply some arrays with objects. So we can go back to the navbar and go to divs under the edge and add another div. This div can say class name flex, flex-row and gap-5. In here we can map through the socials. So socials.map and make an instant return. This will return an XJS image tag. First of all, it will have a source. The source will be social.source. The alt will be social.name. Next, the key will be social.name. Next, we can have a width of 40 and a height of 40. Now, let's fix up a few small errors. First of all, I made a mistake over here. It should be between, not between. Next, this should be 24 and 24 instead of 40, 24. And in this div over here, the wrapper div for the links, I forgot to add w-full and h-auto. So now let's check the app. And here it is. The navbar is there. We have this logo. We have this text. We have multiple links. They currently don't lead anywhere because we haven't created the skills and project parts yet. Otherwise, everything is working perfectly. Oh, and I just noticed there's an extra E in experience over here. So we can go back to the app, go to hero, go to hero content, and we'll find where this is. And yes, remove this E. So now this actually is correct. Next thing we can do is create the skill section. For this, we can go to components, main, new file, and skills.tsx. and run our FCE. In here, we can actually turn this into a section. So select this, make it a section and give the section a class name will be flex, flex dash call items dash center and justify dash center. We'll set a gap of three and H of full position of relative overflow dash hidden and a padding y of 20. We can also expand this like this. First of all give it an id of skills and also under here say style so use normal css and say transform with a scale of 0.9 so making it slightly smaller and in here we can add another div. This div can have a class name of flex flex dash row justify dash around flex dash wrap modern top dash four gap of five and also items dash center in these kind of divs we'll be rendering all of our icons but for this we need a separate component so we can go to sub create a new file called skill data provider.tsx and run our FC. Now let's make the imports. First of all, we can say import motion from framer dash motion. Next we can say import use in view, but not from frame emotion, but from react dash intersection dash observer. Also, as we're using motion, we can make this a client component to use client. Next we can do is add all the props. So we can go in here. add this object and say source with height and index, this will all be of a type of props, props will be an interface, we can say interface, props and say source is equal to string or other is of a type string with be of a type number height will be of a type of number and index will also be of a type number. Next thing we can do is go under here and say const ref and in view equals use in view and trigger once of true. This will mean that when the person sees this component he will see the animation but he will only see it once. Under here we can say const image variance equals hidden opacity of zero and on visible the opacity will be one next under here we can say const animation delay equals 0.3 next we can go into the return statement in here we can say motion.div and go inside of here to get some attributes. First of all ref equals ref. initial equals hidden variance equals image variance, animate equals in view, visible, and in here say hidden, we can also say custom is index, and finally say transition. which will have a delay of index times animation delay. So basically, what this does is it makes all the images appear one after the other because they all have different indexes. And inside this dip, we can add an image which will come from next slash image. In here, we can say source is equal to source width is equal to width height is equal to height. and alt is equal to skill image and we're done with this component. Now we can go back to the skills part and here we can say frontend skill which will come from constants dot map and say image and index and make an instant return. This will return our skill data provider which will first of all have a source, which will equal to image dot image. As it's a map, it also needs a key, which will equal to index. We also need a width, which will be image dot width, a height, which will be image dot height. And finally, an index which will equal to index. We'll also need to change this image to a capital image. And let's see how this looks. For this, we can go into page.tsx and add skills over here. Don't forget to import it. And here we are in our app. And let's scroll down. And as you can see, we do have these logos that appear. Now what we need to do is add some text over here and add some more rows of logos. Now we can go back to skills. and copy this entire div three more times, we can change this to let's select all this and say back end skill. Once again, let's select all this and say full stack. Yeah, this is simply full stack. And over here, we can say other skill. Next we can go under this div and create another div for the video. This can have a class name of w-full, h-full and absolute. In this div we can have another div. This div can have a class name of also w-full and h-full, z-minus 10. Next. opacity dash 30 absolute flex items dash center and justify justify dash center and bg dash cover and this div can have a self-closing video tag this tag will first of all have a class name of w-full and h-auto next we'll have a preload of false plays in line next loop muted autoplay and finally it will have a source this source will be slash cards dash video dot weapon and we only have the text left For this we can go into sub and create a new component called skill text dot TSX and run our EFCE. First we can style the wrapper div and this will have a class name which will be w dash full h dash auto flex flex dash call items dash center and justify dash center. Part of this will be similar to the hero section. So we can go to hero content, find this div at the top, copy it and paste it in here. Next we can make all the imports for it. So first of all, we can say use client as we'll be using motion. Next import motion from frame and motion. Also we can import sliding from top and sparkles icon. Next we can also change this text to think better with next.js 13 and go under this div to make another one. We can say motion.div, say variance. This will be sliding from left with a delay of 0.5 and a class name. This will be text dash 30 pixels, text dash white, font dash medium, margin top dash 10 pixels, and text dash center. We can also say margin bottom dash 15 pixels and give it some text, which will be making apps with modern technologies. And let's move on. Next, we can add another motion.div. This will first of all have some variance. So variance equals slideInFromRight with lay of 0.5. Next, a class name of cursive. This is a custom class. Text-20px, text-gray-200, margin-bottom-10, margin-top-10px, and text-center. In here we can say never miss a task, deadline or idea. And finally we can go into skills and add in here skill text. So now let's see how this looks in the app. Let's scroll down. As you can see we have the animation for all the icons. We have this video background, we have this text and And everything is working perfectly. Now let's move on to the encryption. And actually before we move on to the encryption we will in fact add another row so we can copy this, paste this under skill text, and over here say skill data, like this. And now we should be finally done with the skills part. And now let's check this out, let's scroll down, and yes this does in fact look much better with this extra line on top. Now we can go back to our code, go to main, create a new file called encryption.tsx and in this file run refce. First thing we'll do is go above here and make this a client component so use client and we'll also import motion from framework motion. Next, we can remove this text and add a class name to this div. This will say flex, flex dash row relative items, dash center, justify dash center, w dash full and h dash full. Next, we can create a div inside of here, which will have a class name of absolute. W dash auto, and H dash auto, a top of zero and the z index of five. In here we can create a motion dot div. This motion dot div first of all we have some variants. So let's say variants and slide in from top. Next we'll have a class name of text dash 40 pixels font dash medium. text dash center and text dash gray dash 200. next what we can do is go to hero content copy this part without the extra span paste it in here and change it first of all performance next instead of best we'll simply have and and finally here security Under this div we can create another div. This div can have a class name of flex, flex-call, items-center, justify-center, translate, y-50px, next absolute, z-20, w-auto, and h-auto. and let's check the spelling over here this will be absolute next in here we can add another div which will have a class name of flex, flex dash call items dash center group cursor dash pointer, w dash auto and h dash auto. In here can next js image tag. This tag will first of all have a source. The source equals lock top dot png next and out of lock top and width of 50. and the height of 50. Next, we can the class name of translate dash y dash five transition dash all duration dash 200 group dash hover translate to translate dash y dash 11. And we can copy and paste this change this to 7070. Make this lock main block main, remove all of the class names, and say z dash 10. And we can now go under these two divs and add a video background, we can say class name w dash 80% flex items dash starts and justify dash center. And we can also say absolute. Inside of here, we can have a self closing video component. First of all, it will be loop muted, autoplay, plays in line, and it will also have a preload of false and a class name of w dash full and h dash auto. Now let's see how this looks in the actual app. by going to page.tsx and under skills adding encryption also before that we'll need to fix some issues first of all i made a mistake over here this should be hover next these two images should have a slash before them also this should be full instead of eighty percent and this video also needs to have a source of slash encryption dot weapon And now I believe we are actually done with this part. And though this does look good on the actual page, this isn't correct as we do have overlapping with this section. For this we can go into skills and over here add a padding bottom of 80. This should currently fix the issue. I'm not fully sure why this text is appearing here and not up there but I believe once we add the other text the problem should be fixed. Alright so under the div containing the images we can add another div which will have a class name of welcome dash box adding x dash 15 pixels adding y of 4 pixels next we can say z dash 20 border margin y dash 20 pixels border dash hash 7 0. or 2f88b. And we can also say opacity dash 0.9. In here we can h1, which will say encryption, and it will have a class name of welcome dash text, text dash 12 pixels. Next, under this div and this div, we can add another div which will have a class name of cursive text dash 20 pixels font dash medium text dash center text dash gray dash 200 or rather 300 would be better here and that is all in here we can say secure your data with end dash to dash end encryption and let's see how this turned out actually we can add another div above this one so we can say div close it over here and let it position itself so we can say class name equals absolute z dash 20 bottom dash 10 pixels and padding x dash 5 pixels Now, if we look at this component, everything seems done. I mean, all the parts are actually done. But, all the positionings are wrong. There's a simple way to fix this issue. We can go back to Visual Studio Code, go back to encryption, and in here say min-h-screen. And now everything is in the right position and everything is working perfectly. Now let's move on to the projects section. So the next thing we can do is go to main, create a new file called projects.tsx and run refce. We can also go to sub and create a project card dot tsx and also run rafce. This time we'll actually start working on the project card first. For this we can first of all make some props. This will be source, title and description, which will be of a type props with a capital P. This props will be an interface and let's define all of the types. First of all, source will equal to string, title will be string and the description will also be string. Alright, so next thing we can do is remove this text and give this div a class name of relative overflow dash hidden rounded dash lg shadow dash LG border border dash hash to a zero e 61. In here we can have an XGS image tag. This tag will have a source of source and alt of title, a width of 1000 and a height of 1000. it will also have a class name of w dash full object dash contain. Under here we can have a div this div will have a class name of relative and p dash four in here we can say h2 this will say title and let's give some classes to this h1 text dash to excel font dash semi bold and text dash white. Next we can have a p tag. This p tag can have a class name of margin top dash two, text dash gray dash 300 and it will give the description. Now we can go into projects, remove this text and give a class name to this div. This will be flex, flex dash call, items dash center, justify dash center. and padding y of 20. Next we can have another div which will say class name each dash full w dash full flex flex dash call md flex dash row gap dash 10 padding x of 10. Above this we can have an h1 this each one will have a class name of text dash 40 pixels font dash semi bold text dash transparent bg dash clip dash text bg dash gradient to r from dash purple dash 500 to dash cyan dash 500 and padding y of 20. Now this h1 can say my projects and now we can move on to this part. I'll actually just paste all this in and import the project card. So as you can see this is simply a project card with some images and some titles. Nothing complicated, I didn't want to waste time writing all these by hand. Now let's add this to the app by going to page.tsx, go under encryption and say projects. And let's see how this looks. And here we are. And this looks amazing. Now let's continue to the final parts of our project. And that is the footer. Now to make this we can go to main, create a new file called footer dot TSX and run our FCE. Also paste in the import straightaway as it's just a bunch of logos. And let's actually install this package by running npm install. react-icons Once that is done, we can close the terminal, go over here, remove this, and style this div. We can say class name, w-full, h-full, bg-transparent, text-gray-200, shadow-lg, e-15px. And that's it. Let's continue on to the next div. For this we can say div class name w dash full, flex, flex dash call items dash center, justify dash center and m dash auto. Next we can create another div, which will have a class name of w dash full and h dash all flex, flex dash row items dash center. justify dash around, justify dash around and flex dash wrap. In here we can create another div. This div can have a class name of min dash w dash 200 pixels, h dash auto, flex flex dash call, items dash center and justify dash start. Inside of this div, we can have another div, which say class name font dash bold, and text, text dash 16 pixels. And so say community. Under here we can another div, which will have a class name of flex flex dash row items dash center, modern y dash 15 pixels, and a cursor of pointer. In here, we can first of all have a p tag, or rather we can actually make this itself a p tag. And first we'll say fa YouTube as a simple component and add a span, which will say YouTube. This span will have a class name of x dash 15 pixels, and a margin left of six pixels. we can copy this two more times. This will say GitHub. And this will say Discord. This will say RX GitHub logo. And this will say RX Discord logo. Now what we can do is we can copy this div two more times. This will say social media. And this will say about next this can say instagram twitter and link it in and in here we can say become sponsor uh then learning about me and finally we can add some email so we can say mythwebchain at gmail.com. Next, we can actually remove all of the logos in the third one and continue. We can go when there's two divs left and say another div. This can have a class name of margin-bottom-20px, text-15px, and text-center. In here, we can say add copy actually not at this should be and to make a special symbol and say webchain dev 2023 inc dot all rights reserved finally what we can do is go to page.tsx or better even layout go under children and add the footer And if I'm correct, we are done. So now let's look at the complete website. Here we have the landing page with the navbar and the logos. Now if we scroll down, we get all of our available logos and skills. If we scroll down even more, we get this cool video background with encryption. And if we scroll down even more, we can see all of our projects. And finally, we can also see our footer. If we go into full screen mode, we can also see that this fully mobile responsive and that everything works on mobile. Now let's do the final parts and deploy this project. To deploy this website, we can go to github.com create new new repository. And let's give this repository a name of space dash portfolio. And we can create this repository. Once it's created, we can copy this command and go into a terminal into a project, we can run git init. Next, we can say git add dot. Next, we can say git commit dash m first commit. Next, we can branch this repository, we can add a remote origin. And finally, we can push everything to the repository. Once that's done, we can go to repository. And as you can see, everything is here. Next, we can go to Vercel.com, we can reload this. And we can say add new project, you can connect to GitHub, mine is already connected. And you can choose our space portfolio, GitHub repository. and click import. We can give this the project name of space portfolio and click deploy. And now it's deployed. Then click continue to dashboard and click visit. Let's see if this works. Yes, we as you can see, we have this animation, we have the star background. I mean it's deployed and there is zero lag. This animation also works perfectly. Also the navbar is actually working so we can scroll and although with a slight delay which is a little weird, we have all the images for the projects and the footer is also there. So yeah, we have completely finished the website. If you enjoyed the video please like and subscribe. Thank you.

You can call it whatever you like, but don't use any capital letters as Next.js won't work. And let's drag it into our Visual Studio Code. Next, let's expand our Visual Studio Code and begin creating our website. For this, we can go to View End Terminal, and then we'll need to paste in a command. For this, we can go to the official Next.js website, copy this command, paste it into our terminal, and add a.slash.

Here, you'll either be asked to install Next.js and if you already have you'll get these options. First of all, yes we would like to use TypeScript, yes, yes, no, yes, and no. So simply pressing enter a bunch of times and this will create our app.

Next we need to install all the packages. For this we can run npm install dash dash save dash dev just in case and say framer dash motion three react dash intersection dash observer at react dash three slash dray and at react dash three slash fiber once that is done we can run npm run dev to see if the app is working And in a few seconds, this should appear. And we can control click on this link.

Here we should see a basic Next.js app. And yes, here is a basic template. That's what we're going to remove shortly. Next, we can close terminal and remove everything unnecessary.

First of all, we can go to app and page.tsx. And here we have the starter page. And we can essentially remove.

everything in the return statement. So we can select all this and remove it, return a main, which will say space portfolio. Next, we can go to globals.css and remove everything but these three lines on the top. These three lines allow us to use Tailwind CSS. Let's see how this looks in the app.

And yes, here we have a completely empty screen, which says space portfolio. exactly what we want. Alright, next thing we can do is go into our layout, remove this title, say space portfolio, change the description to this is my portfolio. Next thing we can do is go into this body. This body essentially encompasses our entire app.

First of all, we can make this a template string and make this dynamic. So we keep the interdoc class name. and say bg dash hash 30014 overflow dash y dash scroll overflow dash x dash hidden we can actually add another zero over here before this three and let's see how this looks as you can see we have this dark purple background which is exactly what we want and let's do the final part is work on the page dot t s x, which will be quite fast and then start working on our components.

In this main we can have a class name of h dash full and w dash full. And here we can have a div. This div will contain all the components. So class name, flex, flex dash call, and gap dash 20. And all we need to do now is add all the components inside of this div. Now we can begin by creating our first component and that is our hero section.

For this we can go into the root of our directory and create a new components folder. Here we'll create a main folder. These will be our main components that will go over here.

There will also be sub components which go into these main components. So in this main folder we can create a hero.tsx and run refc inside of it. As always, if you can't do that, you can go into extensions. and download this extension.

So in here we can do is remove this hero text, go in here and give this a class name of relative flex flex dash call h dash full and w dash full. Inside of here we can have a video. This video will have multiple attributes. First of all autoplay, next muted, and also loop so it never stops.

We also have a class name so rotate dash 180 absolute top dash minus 340 pixels left dash zero z dash one w dash full h dash full and object dash cover. Let's remove this dash and continue. Alright, next thing we can do is add a source, which will be a self closing component. This source will have a source of slash black hole dot webm. And it will have a type of video slash weapon.

But to actually use this black hole video, we'll need some assets in our public folder. For this you can go to the description down below and download all the assets. Once that is done, you can close the public folder, go to page.tsx and over here add the hero component.

Don't forget to import it from components. And let's look at the result. Now, if we go ahead and look at this video, the video is not there. So, let's see why it is. First of all, I spelled webm wrong.

Next part, look at this container. It says this video and this whole container has an H of full and W of full of its parent container. However, its parent container does not have a height or width.

So if we simply say H-850 pixels, this will fully resolve the issue. As you can see, now we can see the black hole. This is only necessary for now as we don't have any proper components. Once we change that we'll be able to remove this height. Next thing we can do is create all the content for the hero section.

For this we can go into components and not main and create a sub folder. This folder will contain a hero content dot tsx and we can run our afc in this file. In here we can start off by importing motion from framer motion.

And inside of here, we can turn this div into motion dot div. And begin working on it. First of all, we can say initial equals hidden. Animate equals visible.

Next, let's give this a class name of flex, flex dash row items. dash center justify dash center adding x of 20 margin top of 40 a w of full and a z of 20. in here we can create an ordinary div and this will be container for all the text this can have a class name of h-fall w-fall flex flex dash call gap dash five justify dash center, m of auto, and the text of start. Next thing we can do is create a motion.div. This motion.div will have two attributes. First of all, a variance and a class name.

We'll start with a class name. We'll have a custom class of welcome dash box, a padding y of 15 pixels, a padding x of 4 pixels, a border, a border with a color, this color will be quite complex, 7024 or rather 42, F88B and an opacity of 0.9. Next thing we want to do is add some variants.

For this we can say slide in from top. Obviously we haven't created this yet. For this we can go into the root of our directory, create a new folder called utils.

This folder will have a motion.ts. In here we can paste this. I'll leave this in the description down below. Essentially here are some functions sliding from left, sliding from right, and sliding from top.

As you can see sliding from left and sliding from right have a delay property, which means that we can have a different delay for different elements, which you'll see later on. And so we can go back here, select this, press ctrl space, and import it from utils. For the next part we need to make another installation which I forgot before. So for this we have to npm install at hero icons slash react. Once that is done we can close the terminal.

Say sparkles icon which will come from the 24 part. And give this a class name. First of all it will have a text of hash b49. BFF. Text in this case simply means the color of the icon.

Next we can give it a margin right of 10 pixels, an H of 5 and W of 5. Under here we can H1 which will say full stack developer portfolio. This H1 can as always have a class name of welcome dash text. and text-13px. Now, as you can see, this is custom class.

So to see it, we can go to globals.css, and here it is. Essentially, what this does is adds this gradient to the text, essentially by making the text transparent and then adding the gradient over it. As you can see, it is easier to simply make this a CSS class in the background than having a bunch of classes over here.

Now let's see how this looks in our actual app. For this we can go to our hero section and import hero content. And let's see how this looks.

As you can see, we instantly get an error, which I already knew. The reason being is because in our hero content component, we are using frame of motion, which well, we can't actually see it, but it uses react hooks, which can only be used in client components. So on the top, we can say use clients. and this should resolve the issue.

In a few seconds we should stop getting this error, and actually while we're doing that we can go over here and pick this from 15 pixels to 8 pixels. And yeah, let's see how this looks. We get the animation, and we get a proper size for this card. So let's continue.

Now if we go back under this motion.div we can create another motion.div. This will contain the large text. First of all we can give it some variance which will be slide in from left and 0.5. 0.5 is the delay so if we go to motion.ts as you can see slide in from left has this delay parameter which is used over here. We can continue by also giving this a class name.

of Lex, Lex dash call gap dash six margin top dash six text dash six XL text dash bold text dash white max dash w dash 600 pixels w dash auto and h dash auto in here we can say providing and add a span This pen will say the best. This pen will also have a class name of text-transparent. Text itself will be invisible. Next we can say bg-clip-text. So basically the background will follow the outline of the text.

Then say bg-gradient-2-r. from dash purple dash 500 to dash cyan dash 500. A cool trick but a very useful one. Under this pan we can say project experience and go under this motion.div. Here we can create a motion.p. This motion.p will first of all have a variance which will also be sliding from left but this time we will have a delay of 0.8.

We also have a class name of text-lg, text-gray-400, margin-y del 5, and max-w-600. In title here we can have a small text describing who the person is. Let's continue. Next we can create a motion.a. This motion.a can have some variants.

This will be once again sliding from left, but this time it's going to be one. So this will be the longest of all of them. We also have a class name as always with a padding y of 2. Button-primary. another custom class name text dash center, text dash white cursor dash pointer and rounded dash LG and we could also say max dash w dash 200 pixels.

And it can say learn more. Finally, we can go under this div and create another and final motion dots div. This div will have some variants.

of slideIn from right with 0.8. Next we can have a class name of w-full, h-full, flex, flex-center, items-center. Rather this should be justify not flex. And inside of here we can say image which will come from next slash image. First of all this image will have a source.

The source will be slash main icons dark dot svg. An alt of work icons, a height of 650 and a width of 650. Now let's see how this website looks. If we reload this we'll get all these smooth animations. By the way, if you go into the website and you don't get the elements or animations, simply reload it again. This is an issue that only happens on localhost and will not happen once you deploy the website.

Now let's fix any issues we have with this code. Let's start from this. This seems a little smushed together.

So we can go up here, this padding x and say 7 instead of 4 pixels. Next, with this part. We need to be in two lines, not three. For this we can cover this entire thing in another span.

And also over here I set text-bold instead of font-bold. Now we almost get what we want. But there are no spaces. And for this what we can do is move all of this onto one line.

And simply manually add spaces over here. And over here. And as you can see, now we have exactly what we want and we're done with this section. Now we can continue onto the star canvas.

For this we can go back, go into our components, into main and create a new star background dot tsx and run refce. Now let's make all of the imports. First of all we can go above here and make this a client component.

Next we can import useState, useRef and suspense from React. Also we can import canvas and useFrame from at React-3 slash fiber. Next we can import point, point material and preload. from once again at react dash three but slash dre this time and finally we can import this as random from math slash random slash dist slash math dash random dot esm And I believe we're done with the imports.

By the way, if you get this error, you can try this command in the terminal. If that doesn't work, what you can do is go under here and paste in this line. This will make TypeScript ignore the error.

As it's simply a small type error, and it doesn't actually affect our app, we can do this, and this won't affect our functionality. Next, in here, we can say props with the type of any. Inside, say const ref with the type of any. equals use ref.

Next we can say const sphere. equals useState. So quite a strange useState we have over here. And this will return random.insphere new load32array of 5000 and it will have a radius of 1.2. Next we can say useFrame which will be state.

and delta and this will return ref dot current dot rotation dot x minus equals delta divided by 10 and we can actually copy all of this and paste it over here change this to y and change this to 15. now we can move into the return statement this will return a group which will have a rotation. So rotation, and this will return an array of zero, zero, math.pi, divided by four. Inside of here, we're gonna have some points.

These points will have first of all a ref. So ref is ref. Positions of sphere. Next is stride.

so stride of three next we have this property and we can also destructure the props and finally inside of here we can have a point material which will be self-closing first of all it will be transparent next it will have a color equals to hash fff next it will size of 0.0 0, 2. Next, a size attenuation of true and a depth right of false. Unlike our usual fileable new one component, this will have two components. So we can say const stars canvas equals and make an instant return. And we can actually replace the store background with stars canvas. As we won't actually be exporting all of this, we'll simply be using it inside of stars canvas.

Inside of here we can have a div. This div will have a class name of w-full, h-auto, fixed, inset-0, and z-20. Inside of here we can have a canvas.

This canvas will have a camera, which will have a position. which will be 001. Inside of here we can have a suspense, this suspense will have a fallback of null. And finally here we can render the star background.

And I believe if there are no errors, we're done with this component. So now we can go into the layout. And over here say stars canvas. Now let's go to the website and see how this looks.

And this looks amazing, just as we intended. By the way, if you're enjoying the video so far, please consider liking and subscribing, thank you. And now we can move on to the navbar.

In here what we can do is go to components, main and create a new file called navbar.tsx. And in here run rafce. Now let's remove this text and style the wrapper div.

For this we can say class name w-full h-65px fixed top-0 shadow-lg shadow-hash and this will be 2a 0e 61 divided by 50 bg-slate-300 over 30 bg-hash 0300 1417, back, drop, so back, drop, dash blur, dash md, next z dash 50, and padding x of 10. To be honest, this bg-slate isn't really necessary, so we can actually remove it. And let's see how this looks in the actual app. For this, we can go to layout and add the navbar under the stars canvas. So navbar. and let's see what it is If we go to the app, as you can see the navbar is there and working properly.

However, the black hole isn't in the correct position. For this, we can go back to our app, to page.tsx and remove this height of 850 pixels. This was only necessary when we didn't have a section. Now that we have one, we can have the black hole and it's working perfectly.

Now we can go back to the navbar and add another div. This div will have a class name of w dash full, h dash full, flex, flex dash row, items dash center, justify dash between, m of auto, and a padding x of 10 pixels. In here we can add an a tag. This a tag will have an href, of hash about dash me and we'll have a class name of h dash auto w dash auto flex flex dash row items dash center in here we can add an image this image will come from next slash image it will have a source first of all which will be slash nav logo dot png it will have an alt of logo, a width of 70, a height of 70, and a class name of cursor dash pointer.

And on hover, animate, animate dash slow spin. Under here we can add a span. This span will say in my case WebchainDev.

We can also have a class name of font-bold, margin-left-10px, hidden, on-medium-divice-higher block, which means show, and text-gray-300. Under this a tag we can add another div. This div can have a class name of w-500px, h-full, flex.

flex dash row items dash center justify dash between and on medium devices a margin right of 20. all right next thing we can do is add a div over here this div can have a class name of flex items dash center justify dash center border border dash hash 704 2f 861. Next a background of hash 0300145e. Next a margin right of 15 pixels, padding x of 20 pixels, a padding y of 10 pixels. Also rounded dash full and text dash gray dash 200. Now in here we can add an a tag with an href of hash about dash me and a class name of cursor dash pointer.

Actually we can also make this justify dash center justify dash between. So this will say about me. We can copy this two more times.

One two. This will say skills and this will say projects and we can also change these things this can say skills and this part can say projects projects yes for the next part we'll also need to go to the root of our directory and create a new constants folder this folder will have an index.ts and we can paste all of this inside This seems to be some static information that we'll be using throughout our app. So you don't have to manually write all this yourself.

So simply some arrays with objects. So we can go back to the navbar and go to divs under the edge and add another div. This div can say class name flex, flex-row and gap-5. In here we can map through the socials.

So socials.map and make an instant return. This will return an XJS image tag. First of all, it will have a source.

The source will be social.source. The alt will be social.name. Next, the key will be social.name.

Next, we can have a width of 40 and a height of 40. Now, let's fix up a few small errors. First of all, I made a mistake over here. It should be between, not between. Next, this should be 24 and 24 instead of 40, 24. And in this div over here, the wrapper div for the links, I forgot to add w-full and h-auto.

So now let's check the app. And here it is. The navbar is there.

We have this logo. We have this text. We have multiple links.

They currently don't lead anywhere because we haven't created the skills and project parts yet. Otherwise, everything is working perfectly. Oh, and I just noticed there's an extra E in experience over here.

So we can go back to the app, go to hero, go to hero content, and we'll find where this is. And yes, remove this E. So now this actually is correct. Next thing we can do is create the skill section.

For this, we can go to components, main, new file, and skills.tsx. and run our FCE. In here, we can actually turn this into a section. So select this, make it a section and give the section a class name will be flex, flex dash call items dash center and justify dash center. We'll set a gap of three and H of full position of relative overflow dash hidden and a padding y of 20. We can also expand this like this.

First of all give it an id of skills and also under here say style so use normal css and say transform with a scale of 0.9 so making it slightly smaller and in here we can add another div. This div can have a class name of flex flex dash row justify dash around flex dash wrap modern top dash four gap of five and also items dash center in these kind of divs we'll be rendering all of our icons but for this we need a separate component so we can go to sub create a new file called skill data provider.tsx and run our FC. Now let's make the imports.

First of all, we can say import motion from framer dash motion. Next we can say import use in view, but not from frame emotion, but from react dash intersection dash observer. Also, as we're using motion, we can make this a client component to use client.

Next we can do is add all the props. So we can go in here. add this object and say source with height and index, this will all be of a type of props, props will be an interface, we can say interface, props and say source is equal to string or other is of a type string with be of a type number height will be of a type of number and index will also be of a type number.

Next thing we can do is go under here and say const ref and in view equals use in view and trigger once of true. This will mean that when the person sees this component he will see the animation but he will only see it once. Under here we can say const image variance equals hidden opacity of zero and on visible the opacity will be one next under here we can say const animation delay equals 0.3 next we can go into the return statement in here we can say motion.div and go inside of here to get some attributes.

First of all ref equals ref. initial equals hidden variance equals image variance, animate equals in view, visible, and in here say hidden, we can also say custom is index, and finally say transition. which will have a delay of index times animation delay. So basically, what this does is it makes all the images appear one after the other because they all have different indexes. And inside this dip, we can add an image which will come from next slash image.

In here, we can say source is equal to source width is equal to width height is equal to height. and alt is equal to skill image and we're done with this component. Now we can go back to the skills part and here we can say frontend skill which will come from constants dot map and say image and index and make an instant return. This will return our skill data provider which will first of all have a source, which will equal to image dot image. As it's a map, it also needs a key, which will equal to index.

We also need a width, which will be image dot width, a height, which will be image dot height. And finally, an index which will equal to index. We'll also need to change this image to a capital image.

And let's see how this looks. For this, we can go into page.tsx and add skills over here. Don't forget to import it.

And here we are in our app. And let's scroll down. And as you can see, we do have these logos that appear.

Now what we need to do is add some text over here and add some more rows of logos. Now we can go back to skills. and copy this entire div three more times, we can change this to let's select all this and say back end skill.

Once again, let's select all this and say full stack. Yeah, this is simply full stack. And over here, we can say other skill.

Next we can go under this div and create another div for the video. This can have a class name of w-full, h-full and absolute. In this div we can have another div. This div can have a class name of also w-full and h-full, z-minus 10. Next. opacity dash 30 absolute flex items dash center and justify justify dash center and bg dash cover and this div can have a self-closing video tag this tag will first of all have a class name of w-full and h-auto next we'll have a preload of false plays in line next loop muted autoplay and finally it will have a source this source will be slash cards dash video dot weapon and we only have the text left For this we can go into sub and create a new component called skill text dot TSX and run our EFCE.

First we can style the wrapper div and this will have a class name which will be w dash full h dash auto flex flex dash call items dash center and justify dash center. Part of this will be similar to the hero section. So we can go to hero content, find this div at the top, copy it and paste it in here.

Next we can make all the imports for it. So first of all, we can say use client as we'll be using motion. Next import motion from frame and motion. Also we can import sliding from top and sparkles icon. Next we can also change this text to think better with next.js 13 and go under this div to make another one.

We can say motion.div, say variance. This will be sliding from left with a delay of 0.5 and a class name. This will be text dash 30 pixels, text dash white, font dash medium, margin top dash 10 pixels, and text dash center. We can also say margin bottom dash 15 pixels and give it some text, which will be making apps with modern technologies.

And let's move on. Next, we can add another motion.div. This will first of all have some variance.

So variance equals slideInFromRight with lay of 0.5. Next, a class name of cursive. This is a custom class.

Text-20px, text-gray-200, margin-bottom-10, margin-top-10px, and text-center. In here we can say never miss a task, deadline or idea. And finally we can go into skills and add in here skill text. So now let's see how this looks in the app.

Let's scroll down. As you can see we have the animation for all the icons. We have this video background, we have this text and And everything is working perfectly. Now let's move on to the encryption. And actually before we move on to the encryption we will in fact add another row so we can copy this, paste this under skill text, and over here say skill data, like this.

And now we should be finally done with the skills part. And now let's check this out, let's scroll down, and yes this does in fact look much better with this extra line on top. Now we can go back to our code, go to main, create a new file called encryption.tsx and in this file run refce.

First thing we'll do is go above here and make this a client component so use client and we'll also import motion from framework motion. Next, we can remove this text and add a class name to this div. This will say flex, flex dash row relative items, dash center, justify dash center, w dash full and h dash full.

Next, we can create a div inside of here, which will have a class name of absolute. W dash auto, and H dash auto, a top of zero and the z index of five. In here we can create a motion dot div.

This motion dot div first of all we have some variants. So let's say variants and slide in from top. Next we'll have a class name of text dash 40 pixels font dash medium. text dash center and text dash gray dash 200. next what we can do is go to hero content copy this part without the extra span paste it in here and change it first of all performance next instead of best we'll simply have and and finally here security Under this div we can create another div. This div can have a class name of flex, flex-call, items-center, justify-center, translate, y-50px, next absolute, z-20, w-auto, and h-auto.

and let's check the spelling over here this will be absolute next in here we can add another div which will have a class name of flex, flex dash call items dash center group cursor dash pointer, w dash auto and h dash auto. In here can next js image tag. This tag will first of all have a source. The source equals lock top dot png next and out of lock top and width of 50. and the height of 50. Next, we can the class name of translate dash y dash five transition dash all duration dash 200 group dash hover translate to translate dash y dash 11. And we can copy and paste this change this to 7070. Make this lock main block main, remove all of the class names, and say z dash 10. And we can now go under these two divs and add a video background, we can say class name w dash 80% flex items dash starts and justify dash center. And we can also say absolute.

Inside of here, we can have a self closing video component. First of all, it will be loop muted, autoplay, plays in line, and it will also have a preload of false and a class name of w dash full and h dash auto. Now let's see how this looks in the actual app. by going to page.tsx and under skills adding encryption also before that we'll need to fix some issues first of all i made a mistake over here this should be hover next these two images should have a slash before them also this should be full instead of eighty percent and this video also needs to have a source of slash encryption dot weapon And now I believe we are actually done with this part. And though this does look good on the actual page, this isn't correct as we do have overlapping with this section.

For this we can go into skills and over here add a padding bottom of 80. This should currently fix the issue. I'm not fully sure why this text is appearing here and not up there but I believe once we add the other text the problem should be fixed. Alright so under the div containing the images we can add another div which will have a class name of welcome dash box adding x dash 15 pixels adding y of 4 pixels next we can say z dash 20 border margin y dash 20 pixels border dash hash 7 0. or 2f88b.

And we can also say opacity dash 0.9. In here we can h1, which will say encryption, and it will have a class name of welcome dash text, text dash 12 pixels. Next, under this div and this div, we can add another div which will have a class name of cursive text dash 20 pixels font dash medium text dash center text dash gray dash 200 or rather 300 would be better here and that is all in here we can say secure your data with end dash to dash end encryption and let's see how this turned out actually we can add another div above this one so we can say div close it over here and let it position itself so we can say class name equals absolute z dash 20 bottom dash 10 pixels and padding x dash 5 pixels Now, if we look at this component, everything seems done.

I mean, all the parts are actually done. But, all the positionings are wrong. There's a simple way to fix this issue.

We can go back to Visual Studio Code, go back to encryption, and in here say min-h-screen. And now everything is in the right position and everything is working perfectly. Now let's move on to the projects section. So the next thing we can do is go to main, create a new file called projects.tsx and run refce. We can also go to sub and create a project card dot tsx and also run rafce.

This time we'll actually start working on the project card first. For this we can first of all make some props. This will be source, title and description, which will be of a type props with a capital P.

This props will be an interface and let's define all of the types. First of all, source will equal to string, title will be string and the description will also be string. Alright, so next thing we can do is remove this text and give this div a class name of relative overflow dash hidden rounded dash lg shadow dash LG border border dash hash to a zero e 61. In here we can have an XGS image tag. This tag will have a source of source and alt of title, a width of 1000 and a height of 1000. it will also have a class name of w dash full object dash contain. Under here we can have a div this div will have a class name of relative and p dash four in here we can say h2 this will say title and let's give some classes to this h1 text dash to excel font dash semi bold and text dash white.

Next we can have a p tag. This p tag can have a class name of margin top dash two, text dash gray dash 300 and it will give the description. Now we can go into projects, remove this text and give a class name to this div.

This will be flex, flex dash call, items dash center, justify dash center. and padding y of 20. Next we can have another div which will say class name each dash full w dash full flex flex dash call md flex dash row gap dash 10 padding x of 10. Above this we can have an h1 this each one will have a class name of text dash 40 pixels font dash semi bold text dash transparent bg dash clip dash text bg dash gradient to r from dash purple dash 500 to dash cyan dash 500 and padding y of 20. Now this h1 can say my projects and now we can move on to this part. I'll actually just paste all this in and import the project card.

So as you can see this is simply a project card with some images and some titles. Nothing complicated, I didn't want to waste time writing all these by hand. Now let's add this to the app by going to page.tsx, go under encryption and say projects.

And let's see how this looks. And here we are. And this looks amazing. Now let's continue to the final parts of our project. And that is the footer.

Now to make this we can go to main, create a new file called footer dot TSX and run our FCE. Also paste in the import straightaway as it's just a bunch of logos. And let's actually install this package by running npm install.

react-icons Once that is done, we can close the terminal, go over here, remove this, and style this div. We can say class name, w-full, h-full, bg-transparent, text-gray-200, shadow-lg, e-15px. And that's it.

Let's continue on to the next div. For this we can say div class name w dash full, flex, flex dash call items dash center, justify dash center and m dash auto. Next we can create another div, which will have a class name of w dash full and h dash all flex, flex dash row items dash center.

justify dash around, justify dash around and flex dash wrap. In here we can create another div. This div can have a class name of min dash w dash 200 pixels, h dash auto, flex flex dash call, items dash center and justify dash start.

Inside of this div, we can have another div, which say class name font dash bold, and text, text dash 16 pixels. And so say community. Under here we can another div, which will have a class name of flex flex dash row items dash center, modern y dash 15 pixels, and a cursor of pointer. In here, we can first of all have a p tag, or rather we can actually make this itself a p tag.

And first we'll say fa YouTube as a simple component and add a span, which will say YouTube. This span will have a class name of x dash 15 pixels, and a margin left of six pixels. we can copy this two more times. This will say GitHub. And this will say Discord.

This will say RX GitHub logo. And this will say RX Discord logo. Now what we can do is we can copy this div two more times. This will say social media.

And this will say about next this can say instagram twitter and link it in and in here we can say become sponsor uh then learning about me and finally we can add some email so we can say mythwebchain at gmail.com. Next, we can actually remove all of the logos in the third one and continue. We can go when there's two divs left and say another div. This can have a class name of margin-bottom-20px, text-15px, and text-center. In here, we can say add copy actually not at this should be and to make a special symbol and say webchain dev 2023 inc dot all rights reserved finally what we can do is go to page.tsx or better even layout go under children and add the footer And if I'm correct, we are done.

So now let's look at the complete website. Here we have the landing page with the navbar and the logos. Now if we scroll down, we get all of our available logos and skills. If we scroll down even more, we get this cool video background with encryption.

And if we scroll down even more, we can see all of our projects. And finally, we can also see our footer. If we go into full screen mode, we can also see that this fully mobile responsive and that everything works on mobile.

Now let's do the final parts and deploy this project. To deploy this website, we can go to github.com create new new repository. And let's give this repository a name of space dash portfolio. And we can create this repository.

Once it's created, we can copy this command and go into a terminal into a project, we can run git init. Next, we can say git add dot. Next, we can say git commit dash m first commit. Next, we can branch this repository, we can add a remote origin.

And finally, we can push everything to the repository. Once that's done, we can go to repository. And as you can see, everything is here. Next, we can go to Vercel.com, we can reload this. And we can say add new project, you can connect to GitHub, mine is already connected.

And you can choose our space portfolio, GitHub repository. and click import. We can give this the project name of space portfolio and click deploy.

And now it's deployed. Then click continue to dashboard and click visit. Let's see if this works. Yes, we as you can see, we have this animation, we have the star background.

I mean it's deployed and there is zero lag. This animation also works perfectly. Also the navbar is actually working so we can scroll and although with a slight delay which is a little weird, we have all the images for the projects and the footer is also there.

So yeah, we have completely finished the website. If you enjoyed the video please like and subscribe. Thank you.

Transcript for:Creating a Space-Themed Portfolio Website

Transcript for:
Creating a Space-Themed Portfolio Website