Build and Deploy animated Portfolio Website with Next.js and Framer Motion

hello and in this video you'll learn to create this awesome space themed portfolio website which uses frame em motion for animations 3GS for the star background typescript has a lot of features and is fully mobile responsive without further Ado let's begin all right we can begin by going to our desktop and creating a new folder I'll call it space portfolio you can call whatever you like but don't use any capital letters as nextjs 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 and terminal and then we'll need to paste in a command for this we can go to the official nextjs website copy this command paste it into our terminal and add slash here you'll either be asked to install nextjs 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 mpm install D- save DD just in case and say framer Das motion three react D intersection Das Observer at react D3 SLR and add react D3 SL fiber once that is done we can run mpm runev to see if the app is working and and in a few seconds this should appear and we can control click on this link here we should see a basic nextjs app and yes here it is a basic template that's 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. CSS in 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 global. 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 all right 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 dyamic so we keep the insert. class name and say m-3000 14 overflow-y Das scroll overflow dx- 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. CSX which will be quite fast and then start working on components in this main we can have a class name of h- full and w- full and here we can have a div this div will contain all of the components so class name flex flex-all and GAP D20 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 her 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 but will also sub components which go into these main components so in this main folder we can create a hero. TSX and run our EFC 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 a relative Flex flex-all h- full and w- 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 D 180 absolute top-- 340 pixels left- Z z-1 w- full h- full and object Dash cover let's remove this Dash and continue all right next thing we can do is add a source which will be a self-closing component this Source will have a source of Slash blackhole do webm and it will have a type of video slash webon but Che actually use this black hole video we'll need some Assets in our public folder for this you can go to description below and download all the assets once that is done you can close the public folder go to page. CSX 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 and next part look at this container it says that this video and this whole container has an H of full and a 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 comp 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. 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. 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 oflex fx- row items Das Center justify Das Center having X of 20 margin top of 40 a w of full and a z of 20 in here we can create an ordinary div this will be container for all the text this going have a class name of h-f w-f flex flex-all Gap D5 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 have a custom class welcome dashbox a padding y of 15 pixels a pattern X of four pixels a border a border with a color this color will be quite complex 7024 or rather 42 f88 B and an opacity of 0.9 next thing we need to do is add some variance 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 slideing from right and slide in from Top as you can see slideing 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 control 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 mpm install at hero icons SL 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 BF F 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 five and W of five under here we can an H1 which will say full stack developer portfolio this H1 can as always have a class name of welcome- text and text -13 pixels now as you can see this is custom class so to see it we can go to global. 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 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 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 client 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 fix 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 sliding from left has this delay parameter which is used over here we can continue by also giving this a class name of flex flex-all Gap -6 margin top-6 text -6 XL text- bold text- white Max dw- 600 pixels w- Auto and h- Auto in here we can say providing and add a span this span will say the best this P will also have a class name of text- transparent text itself will be invisible next we can say vg- clip Das text so basically the background will follow the outline of the text and say BG D gradient -2- R from Das purple -500 to- c-500 a cool trick but a very useful one under the span we can say project and experience and go under this motion. div here we can create a motion. p this motion doy will first of all have a variance which will also be slid in from left but this time we will have a delay of 0.8 it will also have a class name of text- LG text- gray d400 modum y5 and Max dw- 600s inside of 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 variance this will be once again slide in 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 two button Dash primary another custom class name text- Center text- White cursor Das pointer and rounded dlg and we can also say Max dw-200 pixels and it can say learn more finally we can go under this div and create another and final motion. div this div will have some variance of slide in from right with 0.8 next we can have a class name of w- full h- full Flex Flex dentor items Das sensor rather this should be justify not flex and inside of here we can say image which will come from next SL image first of all this image will have a source The Source will be slash main icons dark do SVG and 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 only happens on Local Host and will not happen once you deploy at the website now let's fix any issues we have with this code let's start from this this seems a little smooshed together so we can go up here this padding X and say 7 into the four pixels next with this part we need to be in two lines not three for this we can cover this entire thing in an another span and also over here I said text dasb instead of font dasb 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 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. TSX and run our efce 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 use State use ref and suspense from react also we can import canvas and use frame from at react3 SL fiber next we can import points Point material and preload from once again at react D3 but SL Dre this time and finally we can import this as random from math SL random slist SL maath D random. esm and I believe we're done with the Imports by the way if you get this there 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 uh 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 a type of any inside say const ref with a type of any equals use ref next we can say const sphere equals use state so quite a strange use State we have over here and this will return random dot ins sphere new below 302 array of 5,000 and we have a radius of 1.2 next we can say use frame which will be State and Delta and this will return ref do current do rotation x minus equals Delta / 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 0 0 math. Pi / by 4 inside of here we're can to 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 # FFF next we will size of of 0.02 next ex size attenuation of true and a depth right of false unlike our usual file B 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 stores 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 have a position which will be 0 0 1 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 are 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 Navar and here we can do is go to components Main and create a new file called navb bar. TSX and then here run our AFC now let's remove this text and and style the raer div for this we can say class name w- full h-65 pixels fixed top- Z shadow dlg shadow Das and this will be 2 a0 e61 / 50 B- slate D300 over 30 BG Dash 030 1417 backrop so backrop Dash blur - MD next z- 50 and padding X of 10 to be honest this BG Das 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 nav bar Under the Stars canvas so nav bar and let's say about it if we go to the app as you can see the nav bar 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 over 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 nav bar and add another div this div will have a CL last name of w- full h- full Flex fx- row items Das 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 HF of hash about- me and we'll have a class name of h- Auto w- auto Flex fx- row items D Center in here we can add an image this image will come from next SL image it will have a source first of all which will be slnv logo.png it will also have an ALT of logo a width of 70 a height of 70 and a class name of cursor Das pointer and on Hover animate animate Das slow spin under here we can add a span this span will say in my case webchain Dev we can also have a class name of font Das bold margin left -10 pixels hidden on medium device and higher block which means show and text- gr-300 under this a tag we can add another div this div can have a class name of w- 500 pixels h- full Flex fx- row items Das Center justify Das 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 oflex items D Center justify Das Center border border dashh 704 2f 861 next a background of hash 030 1 4 5 e next a mar right of 15 pixels imp pading X of 20 pixels a padding y of 10 pixels also rounded D full and text- gr-200 now in here we can add an a tag with an hre of hash about- me and a class name of cursor Das pointer actually we can also make this justify Das Center justify Das between so this will say about me we can copy this two more times 1 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 project projects yes for the next part we 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 seemly some static information that we'll be using throughout our app so you don't have to manually write all this yourself but simply some arrays with objects so we can go back to the nav bar and go to div under the A and add another div this div can say class name Flex Flex D row and GAP D5 in here we can map through the socials so socials map social and make an instant return this will return an xjs image tag first of all we will have a source The Source will be social do Source the alt will be social do name next the key will be social dotame 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 rapper 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 nav bar 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 Pro 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 afce in here we can actually turn this into a section so select this make it a section and give the section A Class name it'll be Flex flex-all items Das Center and justify Das Center we also have a gap of three and H of four a 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 have another div this can have a class name of flex Flex D row justify Dash around flex-wrap mod top-4 gap of five and also items Das 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 fce now let's make the Imports first all we can say import motion from framer Das motion next we can say import use in view but not from frame motion but from react D intersection D Observer also as we're using motion we can make this a client component so use client next we can is add all the props so we can go in here add this object and say Source width 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 rather is of a type string width will be of a type number height will be of a type of number and index will also be of a type number next step 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 and here we can say motion. div and go into 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 SL 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 front end skill which will come from constants do 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. image as a map it also needs a key which will equal to index we also need a width which will be image do width a height which will be image do height and finally an index which will equal to index we'll also need to change this image to Capital image and let's see how this looks for this we can go into page. CSX 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 backend skill once again let's select all this and say full stack yeah this 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 -30 absolute Flex items - Center and justify justify Dash censor and BG Das cover and this Z can have a self closing video tag this tag will first of all have a class name of w- full and h-auto next it will have a preload of false plays in line next Loop muted autop play and finally it will have a source this Source will be SLC cards DV video. webon and we only have the text left for this we can go into sub and create new component called skill text. TSX and run our efce first we can style the rapper div and this will have a class name which will be w- full h- auto Flex fx- call items D Center and justify Das 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 prier motion also we can import sliding from top and sparkles icon next we can also change this text to think better with next gs13 and go under this div to make another one we can say motion. div say variance this will be slide in from left with a delay of 0.5 and a class name this will be text D30 pixels text- white font Das medium Mar top- 10 pixels and text- Center we can also say margin bottom-5 pixels and give it some text which will be making apps with modern Technologies and let's move on next we can another motion. div this will first of all have some variance so variance equals slide in from right with lay of 0.5 next a class name of cursive this is a custom class text- 20 pixels text- gr-200 margin bottom-10 margin top-10 pixels and the 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 icon 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 our efce 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 framer motion next we can remove the this text and add a class name to this da this will say Flex Flex D row relative items Das sensor justify Das sensor w- full and h- full next we can create a div inside of here which will have a class name of Absolute w- Auto and h- auto a top of zero and the Z index of five in here we can create a motion. div this motion. div first of all we have some variance so let's say variance and slide in from Top next you will have a class name of text- 40 pixels font D medium text- Center and text- gr-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-all items D Center justify Das Center translate dy- -50 pixels 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 another div which will have a class name of flex flex-all items D Center group cursor D pointer w- Auto and h- Auto in here we can nextjs image tag this tag will first of all have a source The Source equals lock top.png next in alt of lock top a width of 50 and height of 50 next we can the class name of translate D y-5 transition Das all duration -200 group- hover translate to translate dy-1 and we can copy and paste this change this to 70 70 make this lock main lock main remove all of the class names and say z-10 and we can now go under these two Dives and add a video background we can say class name w- 80% Flex items D start and justify Das 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 autop play plays in line and it will also have a preload of false and a class name of w- full and h- auto now let's see how this looks in the actual app by I go into page. CSX 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 80% and this video also needs to have a source of Slash encryption webm 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 18 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 all right so under the div containing the images we can add another div which will have a class name of welcome- box adding x-5 pixels adding y of four pixels next we can say z-20 border mod y-20 pixels border Das # 7042 f88 B and we can also say opacity -0.9 in here we can H1 which will say encryption and it will have a class name of Welcome Das text text- 12 pixels next under this div and this div we can add another div which will have a class last name of cursive text D20 pixels font D medium text- censor text- gr-200 or rather 300 would be better here and that is all and here we can say secure your data with end -2- 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-20 bottom -1 pixels and padding x-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 dh- screen and now everything is in the right position and everything is working perfectly now let's move on to the project section so the next thing we can do is go to main create a new file called projects. TSS T and run our EFC we can also go to sub and create a project card. CSX and also run our afce 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 capsu p this 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 a string all right next thing we can do is remove this text and give this div a class name of relative over flow Das hidden rounded - LG Shadow dlg Water B Dash # 2 a0 e61 in here we can have a nextjs image tag this tag will have a source of source an ALT of title a width of 1,000 and a height of a th000 it will also have a class name of w- full object D contain under here we can have a div this div will have a class name of relative and p-4 in here we can say H2 this will say title and let's give some classes to this H1 text- 2XL font d semi bold and text- white next we can have a P tag this P tag a class name of modern top-2 text- gr-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-all items Das Center justify d Center and padding y of 20 next we can have another div which will say class name h- full w- full Flex flex-all MD Flex D row gap-10 adding X of 10 above this we can have an H1 this H1 will have a class name of text- 40 pixels font Das semi bold text- transparent BG dclip D text vg- gradient to R from Das purple -500 to- s-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 of these by hand now let's add this to the app by going to page. TSX go on 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 part of our project and that is the footer now to make this we can go to main create a new file called footer. TSX and run our efce I'll also paste in the import straight away as it's just a bunch of logos and let's actually install this package but running mpm install react Dash 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 B- transparent text- gr-200 Shadow dlg p-15 pixels and that's it let's continue on to the next div for this one we can say div class name w- full Flex fx- call items Das Center justify Das Center and m- auto next we can create another div which will have a class name of w- full and h- full Flex Flex D row items d Center justify Dash around so justify Dash around and flex-wrap in here we can create another div this div can have a class name of Min dw-200 pixels h- Auto Flex flex-all items Das Center and justify Dash start inside of this div we can have another div which will say class name font Das bold and text uh text- 16 pixels and this will say community under here we can another div which will have a class name of flex Flex D row items D Center modum y Das 15 pixels and a cursor of pointer in here we can first of all have a P tag or rather we could actually make this itself A P tag and first of all say fa YouTube as a simple components and add a span which will say YouTube this span will have a class name of text- 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 our Rex 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 Linkedin and in here we can say become sponsor uh then learning about me and finally we can add some email so we can say my webchain gmail.com next we can actually remove all of the logos in the third one and continue where you can go when there's two Dives left and say another div this can have a class name of margin bottom-2 pixels text- 15 pixels and text- Center in here we can say at copy actually not at there should be and to make a special symbol and say webchain Dev 2023 Inc do 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 nav bar and the logos now if we scroll down we get all of our available logos and skills if we scroll down even more we will 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 if we go at as full screen mode we can also see that this is fully mobile responsive and that everything works on mobile now let's do the final part 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 our terminal into a project we can run get in it next we can say get add dot next we can say get commit DM first commit next we can brunch 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 the repository and as you can see everything is here next we can go to velcom 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 you can click continue to dashboard and click visit let's see if this works yes as you can see we have this animation we have this star background I mean it's deployed and there's zero l this animation also works perfectly also the nav bar 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

Channel: WebChain Dev

Views: 65,545

Keywords: portfolio website, web developer portfolio, web development, how to make a portfolio website, personal portfolio website, portfolio website design, nextjs, react, tailwind css, framer motion, threejs, animation, web dev, webchain dev, web developpment, responsive design, next 13, nextjs 13, tailwind css portfolio, tailwind css portfolio website, framer motion animation

Id: 0siQoaXMmzk

Length: 62min 21sec (3741 seconds)

Published: Thu Oct 26 2023