Build and Deploy an Amazing Developer Portfolio with Next JS and Framer Motion

ever scrolled through a website and been blown away by its seamless animations and Sleek design what if that website was your portfolio leaving every visitor impressed and eager to see more of your work sounds cool right welcome to a new video where you'll build and deploy a minimalistic yet modern developer portfolio with Sleek animations using none other than nextjs with a modern hero section with spotlights and text animations latest Bento grid design here we went a step further and animated some parts into this grid for example this globe is a real 3D Globe which you can move around then we have our text stack right here some more information about yourself even some code blocks and then this nicely animated bottom part that allows your users to copy your email moving below we have a small selection of recent projects and what's cool about this and the previous section as well is that we're not only using Tailwind we're also using exterity UI which gives us a lot of these outof the-box frameware motion animations and that makes it look different from anything I've seen so far testimonials and companies you've worked with also a section about your previous work experiences about being a front-end engineering intern mobile appdev freelance project and so much more and don't forget if you scroll up you have this nice bar that pops up that allows you to scroll to different sections moving forward we have my Approach which tells employers how you work starting from planning and strategy to the development and progress updates to development and launch so you're not just doing development you're doing so much more than that and a short but sweet footer section and while you're building this portfolio you'll learn nextjs with server and client side rendering routing and layouts for better performance and SEO Tailwind CSS for a modern completely mobile responsive UI a Stern UI for sick animations using frame or motion and entry monitoring how many people have visited your portfolio now with even better teaching methods where you'll get a free open- source codebase you can look at if you get stuck and a custom figma design so you know exactly what your building yep that's it simple yet stylish so are you ready to make this your new portfolio alongside this portfolio project I've also prepared a comprehensive guide on making sure your portfolio has all the sections that it needs and that it stands out and for the first time ever there's now a dedicated Discord Forum where you can get help if you get stuck building this portfolio the links are in the description and it's all completely free now a developer portfolio is not like any other project it is a career asset designed to Showcase everything you're capable of making you an attractive candidate for any job and that's why a I'll teach you how to go a step further see hosting your portfolio on a personalized domain makes you more professional memorable and improves your credibility and search engine visibility so before we dive into coding let's get that domain name I highly recommend hostinger for hosting your modern portfolio and right now they're offering a great deal which you don't want to miss when it comes to hosting This Modern portfolio I personally go for the Premium plan and here's why it's perfect for this and many other projects you can host a 100 websites with the same account you get a free domain name which gives you a professional touch you get a free SSL for https security which creates trust with anyone visiting your portfolio this deal won't last forever and because I've partnered with hostinger you get an even bigger discount once you click the link in the description click claim deal and add to card here we'll have to choose the period of our hosting with a crazy discount going on right now I'll definitely choose 48 months to save the most money down below you can choose your payment method and enter your JavaScript Mastery coupon code which will give you an even bigger discount on your hosting package and once you buy it we are ready to set everything up and get started with building out our portfolio let's start with hostinger guided setup we are building a new website so we can choose create and we're building a completely custom website so we can choose skip at the bottom next next we need to choose our domain as you can see I use hostinger for my Js mastery. proo platform so here you can type out your domain name I would recommend something like your first name and last name.com something like john.com and if you purchase the hosting for more than one year you'll get the domain completely for free choose it and click next the domain is registering and while that is happening I quickly want to point your attention to our improved Discord server where where now we have dedicated forums for each video so if you're building this portfolio and you get stuck you just go to the Forum and ask a question this is the best way to get help now already we are the next step where you can choose where your audience is located at and you can see there's a lot of options click next and the setup will initialize while that is happening just another quick note and that is that the full code base of the video you're about to build is live on GitHub so you can check it out right here and if you don't mind give it a star with that in mind we are redirected to the dashboard of our hosting project so finally let's code it out and we'll deploy it at the end of the course to get started building our minimal yet modern nextjs developer portfolio we'll start as we always do from bare Beginnings by opening up an empty Visual Studio code window and creating a new folder on our desktop and then simply drag and drop it into your visual Studio code once we're there we can initialize our project now before we begin let me show you which software we'll use to develop it of course we'll use react the library for web and Native user interfaces that allows us to use jsx syntax which merges JavaScript with Styles and HTML directly on top of react we'll also use the official react framework for the web next GS used by the world's largest companies enables you to create highquality web applications with the power of react components so here we'll get the Speed and Performance while still writing very similar reactjs code to Styler application will use Tailwind CSS a utility first CSS framework packed with classes that will speed up our styling process but then we'll power it up with framer motion a production ready animation library for react which allows us to play with a lot of different animations but we won't be using frame or motion natively creating all of these gestures variants and more on our own we'll use aity UI to make her websites look 10 times more modern they allow us to copy and paste the most trending components and use them directly in our websites without having to worry about styling and animations it's completely free and open source and in today's video we'll be using many of their most popular components almost our entire website will be powered by exterity components everything from Scrolls to this globe you're seeing right here animations and so much more after that we'll have to monitor our application and check for brakes so we can fix them faster we'll do that using Sentry and finally we'll use hostinger to get our domain name and and very fast servers so we can deploy our application and share it with everyone with that in mind let's initialize our project to initialize it we'll use next js's starter so simply go to NEX js. org and copy this starting command back in our Visual Studio code paste it and add slash at the end which will make sure to initialize it in the current repos the we're in press enter and we'll have to go through a couple of questions we would like to to use typescript in this case and if you have never used it no worries I'm going to show you how it works we will use eslint to make sure our codebase is clean tailin CSS that's a big yes no Source directory it's not needed app router yes no need to customize things and in a matter of seconds our base file and folder structure will be set up let's run our application by running mpm runev hold control or command and press this Local Host 3000 URL it will open up this starting nextjs template and I put it right here side by side with my code editor so we can see the changes that we make live and also I will open up a new terminal as that way we can easily install additional packages later on for now let's quickly explore the code base we have the app folder which is where we'll spend most of our time here we have our favicon which we can delete as we'll add a new one later on and we have our globals where we import some base components and utilities we also have some predefined nextjs Styles which we can completely clear for the time being after that we can quickly check the layout and the layout is responsible for our font in this case we'll be using inter and here we can add our title and description of the application I'll say Adrian's portfolio you can say of course your name and I will say something like a modern and minimalist JS Mastery portfolio feel free to put whatever you want here these changes should be visible in your browser tab for this website immediately after we can head to the page. DSX and delete everything within the return of this page so let's scroll all the way down and instead let's return an HTML file live semantic main tag which is similar to the div give it a div within it and for now say something like H1 that will say hello portfolio if we save that you should be able to see it on the screen and let's also give it a couple of class names to check whether our Tailwind CSS is working let's give it a class name equal to relative and by the way as I'm typing you'll be able to see which CSS properties are being applied given a specific Tailwind CSS class name you can also get access to that by simply hovering over it and this will only work if you install a Tailwind CSS intellisense extension so simply search for it install it and it should work it will also show you some things like classes like if you do BG black 100 or BG black it will show you the exact color you're using as well as all of the CSS properties getting applied later on we'll also use es7 plus react redax react native Snippets we'll use this to quickly spin up our components so make sure to install it as well now in this course I'll also show you how we can customize our Tailwind CSS config and we'll do that by referring to our complete figma design at all times from here we'll be able to extract colors fonts paddings and spacing and more you can download this entire design for free the link is in the description with that said let me show you how to add our first custom color we can go to Tailwind doc config.txt our existing theme we can remove this background image for now and we'll extend colors specifically we'll extend the black color by modifying the default color like this to Hash 0000 so this is a complete Black and then we can add different variants of that black color such as black 100 and we can make it hash 0000 319 this value of course we can extract from the figma design now what this allows us to do is go to page. TSX or any other page for that matter and refer to BG black 100 which will now give us that color that way we don't have to repeat 0000 319 every time and do that for all the other colors we can just declare it once and then use it like this every other time let's also give it a flex justify Dash Center to center it horizontally items Dash Center to center it vertically we'll switch the orientation by saying Flex Dash call as in column and we'll make it overflow hidden so we don't have those scroll bars margin X will be set to Auto so this will allow us to give some space to the middle part of the screen and then we can also use Tailwinds builtin sizing functionalities for mobile responsiveness such as SM which stands for small and give it a padding X of 10 so this will apply a padding left and right meaning X because it's on the horizontal axis only if the media minwidth is 640 pixels so this means 640 and up and we can also give it a padding X of five on all other screen sizes let's also style this div inside it by giving it a class name of Max dw- 7xl this is for Max width and w-o and within here we can add our content so what do you say that we start with our first section of the day the hero section with this top title primary title another subtitle and a call to action button to show our work we can start by creating a new folder in the root of our directory called components and within components we can create a new file called hero. TSX hero typically stands for the primary section that you see above the fold once you first visit the page and here we can use that extension if you type rafc which will allow us to quickly create a react Arrow function with an export that's coming from that extension es7 Plus react redex Snippets if we do that we can go back here and we can easily import it by saying hero coming from components hero it auto imported it right here so let's give this div a class name equal to padding bottom of 20 and padding top of 36 and let's create a div which will act as a wrapper for our first components coming from eternity if you take a look at our final design maybe it's not so obvious on the mobile mode but in her design at the top you should be able to see these Spotlight effects which are beams of light shining to the middle of the screen it has a very nice visual effect so let's figure out how to use it you can navigate over to exterity and they have this pretty cool CT which now you can find across many websites where if you press command K it will open up a search no matter where on the page you are and this is a huge Pro tip as a matter of fact this is so important that I will expand my screen and show to you how I use this feature on a day-to-day basis like in this case I want to go here search for Spotlight press enter and here I am but it's not only for UI like if we go back to the official nextjs documentation press command or control K and search for something like server actions and immediately here you are and then I would use command F to find something on the screen like use server so this matters a lot using your keystroke like controller command F and controller command K to quickly Traverse the docs and find exactly what you're looking for so going back to exterity let's look into Spotlight a spotlight effect with Tailwind CSS good for drawing attention to a particular element on the page here we can see how it looks like and right below we can see the installation I believe most of these have already gotten installed when we installed Tailwind but just to be safe and because I know we have to install frameware motion let's copy it go to our terminal and paste mpm install frame or motion and all of these other packages then we need to add a util file which I believe was already added for us by TN CSS but we can quickly check it out it should be in utils cn. DS so if we go here and search for utils no I cannot seem to find it so let's create a new folder called lib as in library and within it let's create a new u. DS inside of which which we can paste what we just copied this is just a helper function to make everything work together with Tailwind after that the next step is to copy the source code they don't even need us to expand it we can just simply press copy right here and let's see where it needs to go it's uis spotlight. DSX so let's create a new folder within components called UI and this is where all of our exterity or shatan components would go so simply create a new file called spotlight. TSX and paste what you just copied you don't necessarily need to understand everything that's happening here but if you need to change something you can we will actually modify a couple of these components later on and immediately I can notice how it's trying to find utils CN but I called it lib utils so it might be better to follow along and do exactly what they say by creating a utils folder and then cnts inside of it so let's do that instead of lib I will call it utils and then instead of utils thats I will call it cnts that way our Spotlight will no longer complain and now we can use it within the hero section so let's use our first Spotlight component by importing it from /ui and this is kind of the beauty of shaten and exterity and that is that that you have full control over the components you use not like in material UI or some other UI kits where you have to install the entire Library here you only import the code you actually want to use and another benefit is that to all of the components from shaten or exterity you can pass native Tailwind CSS classes so we can position it exactly how we want let's give it a class name of minus top-40 minus left d10 and we can then also further position it on medium devices minus left 32 on medium devices again minus stop D20 and then full height by saying h- screen we're just making sure it looks good on all different devices and we can give it a fill equal to White now it might be a bit hard to see it on mobile devices but before we expand it let's duplicate it two more times and let's also change it up a bit so we have multiple spotlights for the second one we will say top dash 10 left- full and then we don't need any other medium properties rather I'm going to give it h- 80 VH so this is 80% of the vertical height of the screen and w- 50 vertical width of the screen and fill purple to have a bit of a different color finally for the last one I'm going to give it a top of 28 not minus top and I will give it a left of 80 to just position all of them a bit differently and I will also remove all of the previous Styles and give it h-8 VH and w- 50 vertical width and a fill of blue that should give us enough variety now even if you expand this you won't be able to see anything right here we can even try to maybe inspect elemented but yeah basically nothing is there so why is that well if we go back to exterity documentation and scroll down you'll notice that we forgot to copy the highlighted Spotlight animation into the Tailwind do config.js file so let's copy this entire config go to our Tailwind config and paste it right here of course this way we have lost our colors but we'll bring it back later on don't worry about that also if you press command K and go to add utilities you'll notice that we also need this flatten color palette we need to add that to the Tailwind config as well and now we would have to copy this once again and then override our Tailwind config and we would have to continue adding new stuff every time that we choose a new component and for that reason I've already prepared some code in this completely open- Source repo so we can get started more easily so if you scroll down to the read me section you'll be able to go to code to copy and here you'll see that we have this twin. config.sys and also it includes some more colors that I have extracted from the design other than that we also have the global. CSS which will make our styling just a bit easier so let's copy it and paste it to our global. CSS within the app and later on we'll come back for the data as well as the assets we'll use throughout the project now as soon as you have updated these files you'll notice that we have to install some of these additional packages such as mini SVG data URI so copy its name and run mpm install mini SVG data URI we'll also need Tailwind CSS animate so let's get that one as well mpm install tailin CSS animate and just like that we are back in action and I'm not sure if you can see it on the screen but I can see a light beam coming from top left moving to bottom right and on full screen it's even more visible it is subtle but it is there and it'll be much more visible once we expand our hero section to the full height of the screen and right below the div containing these pot lights we want to create another div and that one will act as a UI grid and for that one we'll use a component called grid and Dot backgrounds in this case we want to use this grid background so let's switch over to code right here and let's copy these two divs with a P tag in between let's properly open it up and let's also indent it if we save that you should be able to see a grid appear right here so let's quickly modify a couple of classes by making it h- screen so he takes the full height of the screen W full on dark BG black 100 that is our specific variant of black typically BG white on dark mode we have this BG let's switch this over to 0.3 I found that to work better with our grid and right here in this inner div we can also change BG black to BG black 100 and then we don't need anything in it we just want to use the background so we can just make this self closing now obviously this is not what we initially antici anticipated right we can see that it actually has a white background instead of a dark one and that's because exterity supports both white and dark mode but our entire application will be dark so let's use a theme provider to switch it to dark to achieve that we'll be using a package called Next themes and if we scroll down you can see that it has half a million weekly downloads and I'll show you how to use it first let's install it by running mpmi next themes and then if you just Google next themes you should be able to find a shaten dark mode and you can see that that's exactly what they do right here so we want to follow the setup first thing we have to do after installation is create a theme provider so let's copy this code go to app and create a new provider. TSX file and then simply paste it right here after that you want to wrap your root layout so copy this theme provider layout go to the layout file and simply wrap your children with it so we can do it right here within the body we can of course indent it properly and import theme Provider from that SL provider next if you want to you can add a toggle that will then allow you to switch between a dark and a light mode but in this case we can set the default theme to dark and save now if we go back you'll see that our grid turns dark so now let's go back to the hero section and below it let's create a div that will wrap our heading make sure to do it below this div containing our grid and let's give it a class name equal to flex justify Dash Center and before we continue adding some other classes to it let's first add an inner div that will have a class name of Max DW d 89 VW I found this value to work the best and then right within it we can render an H1 that will say something like Dynamic web magic with next.js and let's make this H2 because this will be a subheading so if we save this you can see it right here at the bottom so let's go ahead and make it a bit bigger by giving it a class name and say uppercase give it a tracking Das yist this will make it span out give it a text- EXs text- Center text- Blue 100 and Max DW of 80 now let's also style our first div that's wrapping all of this by giving it a relative a margin y of 20 a zindex of 10 and now we can style this inner div by giving it a medium device Max dw-2 XL on large devices Max DW of 60 VW Flex flex-all items Das Center and justify Das Center there we go here it is now we want this text to appear over our grid not below it which means that we have to make her grid container a position of absolute so right here at the end we can say absolute top- 0 left d0 and we can remove the relative as we're making it absolute right of the bat that will make it appear on top and let's also make this wi grid a bit less noticeable by giving it a03 color of course you can play with the values and find one that works best for you now if we scroll down we want to render our primary text to make it look exactly like it does in the design and it's not just about adding the text it's giving it its animation so for that reason we can go back to exterity and we can search for text generate effect and you can see how that will look like so let's copy the source code and add it over to components UI text generate effect. DSX paste it here and now we can use it right below the H2 by saying text generate effect and to it we need to pass two props and you can even see the props we can pass here the first one is the class name and the second one is words this is a pretty simple and straightforward way to say hey what you want to render here so we can say something like transforming Concepts into seamless experiences and no this was not written for me by chat GPT there we go let's also style it by giving it a class name of text- Center text- 40 pixels that's for the size on medium devices text- 5 XEL and on large devices even bigger text off six Xcel and now if you reload you can immediately notice how nicely it flows in right below this one let's render a P tag that will have a class name equal to text- Center and here we can say something like hi I'm Adrien and you can use your name here let's also use this apostrophe sign instead of just using apostrophe here and we can say something like a nextjs developer based in Croatia let's also give it some Styles such as on medium devices tracking Das wider margin bottom off four to divide it a bit text- small on medium devices text- large and on large devices text- 2XL now let's enter into the text generate effect this code that we copied and let me show you how we can modify it directly let's first scroll down and here where we have a motion span we can make this class name Dynamic just like so and we can say if index is greater than three of course that has to be within a dollar sign in curly braces for it to be dynamic so if that is the case then we want to give it a text purple and else we can give it the rest of the Styles dark text white and typically text black so we can paste that right here and in all cases opacity zero this will now turn the experiences into purple let's also scroll a bit down and instead of margin top four let's give it a margin y4 which will divide it from the bottom part two and let's remove the text 2 Exel from here this will make it bigger so now you know that you can make modifications even to the code that you copy finally in our final application we also have this phenomenal looking button with this nice effect so let's implement it too if you can guess this will be yet another exterity component so going to exterity Let's search for a button go to tailin CSS buttons and we can pick one that we like this one has lit up borders and this one has border magic so let's just copy it and create a new component within UI called Magic button. TSX and here you can paste the code or rather it will copy just the return value of this button so we first have to copy it back and create a new react error function component and now we can paste that button right within it and indent it properly now if we go here we can call that button right below our P tag by wrapping it in an anchor tag with an hre pointing to forward slab and we can render a magic button coming from that/ Magic button we can pass it a title equal to show my work and if you do that immediately you'll be able to see this border magic button so let's go into it and let's make it a bit more Dynamic first let's make it accept some props such as a title an icon a position a handle click so what will happen once we click it and some other classes which we might want to pass and then since we're using typescript we can now Define all of those here title of a type string icon of a type react. node or react node I think it is position of a type string handle click which is going to be optional and it will be of a type function that doesn't return anything so void and other classes which will also be optional and it will be of a type string if we do decide to pass it so immediately we already are passing the title so we can accept it right here show my work great let's also style it a bit better we can give it a value of w- full for full width and change the roundness to rounded LG which will make it a bit more rectangular and then we can remove those Focus rings so going all the way here after Focus outline we can remove those other focuses I don't think we'll be needing them we can style it a bit further though by giving it a medium devices width of 60 on medium devices margin top of 10 and I think that'll do it for now and we can also style this inner span right here by changing this to round LG instead of rounded full now it's rectangular we can change the padding to something like seven to give it a bit more padding padding y I don't think we'll need in this case and here we can render some of the other classes if we are passing them but for that to work we'll have to turn this into a dynamic template string and then if we are passing any icons we can render it either on the left side or on the right side so if the position is triple equal to left then we will render the icon right here else if the position is triple equal to right we will render it right here now we're not passing any so we cannot see it but this is it for our button and now to this button we can pass an icon by saying icon is equal to and now you could use a regular PNG or SVG here but I'll show you a better way there is a great package called react icons which features icons from all of the different most popular packages so you can simply install it by running mpm install react icons and after that you can use it by simply importing an icon so let's import it I'm going to use an fa location Arrow which is coming from fa6 and we can also declare its position let's do right in this case so now we have this great looking icon but we do need to provide a bit of spacing here so let's go into this button and let's add a gap of two right here which will create some spacing this is looking great and with that our hero section is done so check this out it looks even better on desktop I'll reload it and notice how the text slowly comes in and we can also see some spotlights appear although I can mostly see just one this blue one coming from top left and if we compare it with the final version you'll be able to see well first of all that I forgot to add user experiences which we can do right here seamless user experiences but besides that you can see that here we also have this great looking navigation bar I'm not even sure if we can call it a bar as it hides when you don't want it to be there and it shows up when you want to scroll so it's a pretty cool take on a regular navigation bar let's go ahead and implement it back in exterity we can search for floating Navar and we can copy the code add a new UI component floating na. TSX and paste it right here this one is a bit longer as it contains some navigation logic so let's let's go back to page this time and let's import it right here floating nav to it we'll want to pass one prop though and that is nav items and you can see that clearly right here the navigation items you want to render in the nav bar and this shows you how important it is to read the docs and typically all components you use have some kind of props you want to pass to them of course we're using tab script here so it's very useful to just get an alert that something's not right right Within your Visual Studio code and here you can also see the type it will be an object with a name link and an icon so let's try to pass one nav items is equal to an array of these different items for now let's simply say home with a link of forward slash and a react node of something like fa home if we save this go back and reload we cannot see anything yet and I wouldn't worry too much about that for the time being as we technically cannot even scroll anywhere and the way that the floating nav works is that it only appears when you scroll down and then move up a bit so it allows you to navigate faster to where you want to go so we'll be coming back to styling this nav further and passing it the right nav items a bit later on once we add one of the coolest sections of this course so let's create a new component in the components folder called grid. TSX and here you can run rce and we can import that grid right below the hero once it's there we can navigate to it and we can use another exterity component this one it will be a Bento grid a skewed grid layout with title description and header components you can go to it by searching command k and then searching for bento grid on desktop devices it has this very cool layout where elements in different rows can take different widths so let's install it by copying the code and creating a new UI component called Bento grid. TSX and we can paste it right here and this component actually exports two components a Bento grid and a Bento grid item so let's let's import them within our own grid component by turning this div into a section giving it an ID of about section so we can easily scroll through it and then immediately importing a Bento grid component inside of which we can render an array of objects with some kind of a title let's say Title One and also a description which can be description one and now we can map over that array where we get each individual item and also an index of that item and for each one we automatically return by automatically I mean within parentheses not opening another function block here a Bento grid item that is that second component which we have imported from exterity now this Bento grid item does accept a couple of props to it and we can see that to prop there we go title header icon and more so let's give it first an ID since we're mapping over it all item. ID let's give it a key equal to item. ID as well so we don't need an index at all in that case we can also pass it a title equal to item. tile and we can pass it a description equal to item. description and we also need to actually give it an ID right here let's do ID of one now we cannot seem to see what's happening now there is nothing there so let's get into this Bento grid item and see if we can modify the code to make it work with our design the only thing I want to do for now is give it a border of two and border of red 500 oh I think it already had a border applied so we don't need this border of two and this red 500 will ensure that we can see it once it appears on the screen but right now there seems to be an issue with the ID it says that we're not accepting it within a benog grid item so let's accept it we can say ID and Define the type of that ID equal to number so we know we'll pass a number and we can also make it something to one right here so now it's better but that on its own will not make it work so to fix it let's modify it Styles directly by changing the rapper div class names instead of rounded Excel we can make it a bit more rounded give it a position of relative and immediately you should be able to see the card appear right here and that's good right now because we know that at least we are rendering whatever is in here but now where are we actually going to keep this data we won't really create different objects right here that directly within this file that wouldn't look good would it something like this where we would have multiple of these cards right here within our code with different titles descriptions and more especially considering that there's going to be a lot of text within each one of these cards some will even contain special elements within it so for that reason what I often like to do is create a separate folder within the root of our directory called Data within that data we can create a new index.ts and then within it we can declare those types of data arrays such as this one so let's declare it by saying export const grid items is equal to an array of these elements so now we can go back here and just import grid items save it and immediately the same cards appear but now our code is looking much cleaner while the data is extracted here so even a non-technical person can come here and edit something if they really want to without messing with your code of course unless they do something like this which means they're going to break it anyway but jokes aside our project will contain a lot of data like text elements for I'm very flexible with time zone Communications I prioritize client collaboration and data for all of these project cards testimonials work experience and more so to save us some time under the read me of this project code to copy we'll have this data index.ts which you can simply copy and paste right here it will contain all of the data for this project allowing you to very simply come here and modify something like if you have your project cards these are right here there we go if you haven't built a 3D solar system but rather something else you can just change the title description image and it will show up whenever we render it within the code and within a lot of these we'll also be using some kind of images so to ensure that you have access to all of these images needed to build this project properly the last final thing will get from this read me are the assets so you can click here and download it once you download it unzip it delete the existing public folder and then simply drag and drop the new one to the root of our directory and don't press add folder to workspace rather just copy folder which will bring it right here and you'll have all the assets with that said we can close our index file and back within our grid you'll notice that now we have a series of different title elements such as I prioritize client collaboration my text stack with I constantly try to improve and other aspects now to each one of these Bento grid items we can also o pass some more stuff to customize it further and to get to that truly extraordinary Bento grid that you saw in the design this is the one I'm talking about so here we'll have different Technologies we'll have a Macbook mockup we'll have a button to copy your email address and even some code blocks so let's pass some additional props and then dive into the Bento grid and customize it to our needs alongside the title in the description I want to also pass a class name which will come from item. class name so how this works is if you go to grid items you'll notice that I created some of the additional class names that will apply to each one of these grid items uh primarily it's giving them different columns and rows pans so they take different amounts of space and you can see immediately this created a very nice Bento like grid after that we also want to give it an image in case there is one by saying item. image and you can notice that we're repeating this item do something many times so what we can do instead is destructure those values out of the grid items by using the destructuring syntax and then saying ID title description class name IMG we'll also have image class name title class name and also spare image in case there is one and all of this should be autocorrected for you by typescript because it knows exactly which properties we have and if we try to destructure something that we don't have immediately it will say test does not exist on this grid item type great so now instead of saying item do something every time we can remove that item and just pass it this below image we'll also pass the IMG class name name equal to IMG class name and we can also pass a title class name equal to title class name and finally we can pass the spare image equal to spare image or IMG now you'll notice that it's complaining about this image and some other properties which were not accepting on the benog grid item so let's go ahead and accept them nicely so we can put them to use we'll need a class Name ID title description um we don't need this icon we don't need the header what we do need is the IMG the IMG class name the title class name and the spare IMG and of course we need to Define the types of these properties so we can basically copy them here and now we can Define the type for each one most or basically all in this case will simply be a string and all of them will be optional because we don't necessarily need to have them on every one of these cards and in typescript you indicate that by adding a question mark at the end and this is not a comma it's a semicolon also we can properly end this thing right here we don't need a double close there we go so now we have those properties which we can use and also we have some things to remove like the head better icon and so much more so let's get started with properly styling our Bento grid and modifying it to suit our needs right now as you can see it is broken so first things first let's remove this border red 500 that we added before and let's also add an additional style property right here this will be a dynamic style you can also do this using the CN property in this case I'm just going to write it like this and give it a background of r GB 4729 I found this value to work the best here and I also want to give it a background color which will be a gradient now we need to get this gradient from somewhere but before we go ahead and get it let's simply remove this header an icon as right now they're not really doing a lot so we can just remove them if we save that we should be able to see some cards but now let's give each want a gradient for that you can head over to cssg gradient. and you can generate any kind of gradient that you want so you can go to something that matches our theme something like this and you can even change this blue one to something a bit darker it's completely up to you and then you'll get the background and the gradient which you can then copy to clipboard and paste it right here as the styles of course you'll have to turn these into Strings and remove the semicolon and turn it into a comma instead also it will be background and background color if we do that you should be able to see some kind of a background appear and in my case I'll use some of the values I created before that look the best to me I will also add this to the read me down below so you can copy it and have the same gradient as I have immediately within this div right here we want to create a new div that will look something like this div that will have a class name and here we want to make it a bid Dynamic saying that it's a template string where if the ID is equal to six then we will apply a style of flex and justify Center so only for the sixth item and typically it's going to have an h- full for all other items so that would look like this just a bit different for the last one and we can also give it an inner div with a class name equal to w-o h- full and absolute we want to put an image right here so if an image exists then we want to render an IMG tag that will have a source equal to IMG an ALT tag equal to IMG as well and it will have a class name equal to CN IMG class name so these are the class names we're passing from props as well as some basic ones like object Das cover and object Das Center and we do get a warning that using the basic IMG tag could result in some slower speeds but we need to do this to have a proper and easy deployment later on and we'll still ensure the images are optimized so if you do this you'll notice that the card one and card six got this nice looking image we can also go down below this div containing the image just below the inner one and create a new one for the secondary image to this one we can give a class name equal to let's make it Dynamic and we're going to make it absolute wr-0 minus bottom-5 and only if ID is five so only for the fifth one we also want to give it a w- full as well as opacity of 80 and now within here if there is a spare or secondary image only then do we want to render it by saying image and it'll be basically the the same as above so let's copy the properties but instead of source image it will be spare image alt will be spare image and we don't need this CN right here we're just going to make it like this object cover object Center and to this one we'll also give W full and h- full and if we do this you'll also notice that this image will appear right here but right now you cannot see the beauty of it because these cards are not yet full fully done so they don't have the necessary Dimensions to properly show it but as we continue building it it will make more sense finally we can go below this div and create another div but only if we're on the sixth item so if ID is triple equal to 6 only then do we want to render and of course we'll use this animation from exterity UI only then do we want to render an animation and of course we'll use an animation from exterity UI you can see this is the one we're going for and we're going to use it right here in our sixth card so let's uh copy the file we don't have to copy this stuff in Tailwind config we already have that but we do need a source code for the background animation so let's copy it and back within our code we can create a new UI component called gradient bg. TSX and simply paste it right here and now we can use it within here so let's call it background gradient animation and within it we can render a self-closing div with the following class names class name is equal to Absolute Z -50 so it appears on top Flex items Das Center justify Das Center text- White font Das bold and this should be enough for us to already see it so if we go back it looks like we'll have to properly import the lib utils so let me put this to the side and go to our background gradient animation and import CN from I think it's coming from add slash utils and then forward slcn there we go that's the correct one and now if you go back you can see this gradient that we have right here so let's continue with this div so we can make it look a bit better and more similar to what we want to achieve and this should be justify Center spelled properly and for now we're going to leave it this big we can definitely come later on to make it look like an actual card right here and not take full window we'll do that later on as we have to continue styling the other parts of this card so let's scroll below this id6 and create a new div this div will have a class name equal to CN where we first render the title class name so this will let us know that we're creating a title within it and we can also give it some additional properties like group- hover so when we hover over that card for/ Bento translate X2 so we want to move the text within it by two pixels we want to give it some kind of a transition as well as a duration of 200 for that transition we'll make it a position of relative and also on medium devices we'll give it a full height typically Min age of 40 flex and flex coal so the elements appear one below another padding X of five typically padding of five and on large devices padding of 10 you can see that now the title will appear a bit differently if we save that not a lot happens but now we can render another div within it within which we'll render the description so now we have the inside SCP I constantly try to improve and all of that other stuff as well let's style that description by giving it a class name equal to and I actually think we're already using this title in description below as as you can see here so we can essentially copy the class names for this description and then delete it from here there we go it should look something like this font Sans instead of font normal it's going to be extra light text Dash I found this color to work the best C1 C2 D3 it's a gray color text smm instead of XS we can remove this dark on medium devices that text XS on large devices text- base and Z index of 10 so it appears on top so now our description looks like this right below the description we can render our title so let's copy this div containing the title and let's place it right here below the description and if you're wondering what this group hover Beno translate is it was already coming from an exterity component so you don't have to worry about that great so now we have this title as well let's style it a bit font Sans font bold we'll also give it text- LG to make it larger we don't need to provide it any kind of colors I think that should be done by default we can remove the margin bottom and margin top and instead we can give it this on large devices text- 3XL to make it very large Max DW of 96 and Z of 10 so it appears on top of other elements so you can see how this looks like right now looks great even on mobile even though the Bento grid is designed to be viewed on larger devices now some of these cards have some images and gradients and some exciting stuff happening but some don't have anything and the goal is for all of them to have something unique so for this one for the second one for for example we want to show this globe okay and for the third one we want to show the text stack so now let's start by adding these special elements for each one of the cards starting with the 3D Globe which you can actually move around right it doesn't just move on its own you can actually hover over it select it and move it around believe it or not this will be another eity UI component so simply search for GitHub Globe you can see it right here and let's scroll down to the source code this one globe. TSX copy it and create a new UI component called grid globe. TSX where you'll simply paste that data you'll see there's some red stuff right here and primarily it wants a couple of imports to three Globe react 3 fiber 3js and even this globe Json okay so for this globe they actually provide Ed a globe. Json file which you can simply click here and then copy which will provide some information about the data of this globe after you do that you'll have to add it to data folder so if we go to data you can create a new globe. Json and then simply paste this data right here looks like it didn't copy the file for me so let me do it one more time here oh this is display I need to display the source blob it took some time to load as it's a long one and then we want to go to the raw file and now we can copy it and paste it here it has a lot of lines this is just geometry and data to display the globe so that is done but now we need to install additional dependencies as you can see it's three three Globe react 3 fiber and more so let's copy it and let's simply install all of them here and in a couple of seconds our Visual Studio code should stop complaining because it will get all of the necessary packages there we go it's looking good and now we can simply use that Globe right here if we go below id6 and below the title and description let's indent it properly we can now create another Dynamic part if ID is two then we want to display a grid Globe looking like this and we'll have to import it properly to where we added it it let's see where did I put it grid Globe components UI oh here it is not sure why I didn't allow me to automatically import it let's see export function Globe okay so if I say Globe will that find it yep Globe coming from grid globe and you can automatically import it it does say that it's missing some props so let's go into it and it wants a globe config in this case so let's see if we have that glob Globe config somewhere well it seems like we only have the type for it and we have to create it ourselves let's see if they provide information on how to do that Globe config prompts they do give us something but they don't give us the entire Globe config oh but if we go to code right here in this globe demo there is a globe config there so let me see maybe I copy the wrong one or are they really different yeah we copy this export function globe which is coming from here and this one doesn't have it but this one on top code has it so let's copy this one right here and this is the usage of this grid Globe we have created so what might make more sense is to call this one just a globe so this is the actual Globe component and now we want to create a new file called grid globe TSX which will be the representation of the globe component within the grid and here we can paste what we just copied which contains this grid config that they have or Globe config and now we can import the Globe coming from UI or coming from just SL globe and now we should have everything so going back to our Bento grid we want to import the grid Globe looks like it doesn't want want to Auto Import it but we know that it should look something like this import grid Globe coming from SLG grid Globe oh and looks like it's a named export so here instead of saying grid Globe like default we have to put it in parenthesis and we have to be specific it's called Globe demo so we can call Globe demo and use it right here now if we do that and go back you should be able to see we sell soap the globe is interactive okay so this is coming from their example but we want to go into the globe demo and remove some of the stuff that they have said here about soap we don't really care about that so in this outer div let's clean it up a bit and say Flex items Dash Center justify Dash Center absolute minus left D5 top 36 this is just for positioning it on medium devices top 40 w- full and h- full for full width and height and immediately this looks a bit closer to what we want to achieve from the second one we can remove the H full as well as medium h40 we don't need that and then we can remove all of these text divs containing H2 P Tags and More that's going to make it look like this and here we want to remove this minus B bottom 20 since we removed the height from this container we have to add it a bit of a different height something like h-96 which is going to give it about 400 pixels of height going to make it look like this and that gives us access to this full globe and now that we can see it we can go back to the Beno grid and we can fix the styles of our container to make it not jump out of the card which matters a lot for this image at the top for the gradient but even for this globe right here which right now is floating above the card and we want it to be within so let's go to our primary container div and let's check the class names row span one that's good relative we want to give it an overflow of hidden and save and already this makes it look so much better we can still move across it but now it fits nicely within a card great now the next thing we want to focus on is the ID3 which will be the text stack list div that will look something like this react Express typescript or you'll be able to type any of the Technologies you are proficient in so let's say if ID is triple equal to 3 then we want to render a Dev which will act as the container so it will start with something like this and it will have a class name equal to Flex gap of one on large devices a bit of a bigger gap of five w- fit absolute minus R-3 and on large devices minus wr-2 within it we can render the text stack list by creating a div with a class name equal to flex Flex Dash call as they will appear one below another G gap of three and on large devices a gap of eight right within here we want to render our left list first so we can say left list and this left list is simply an array of Technologies which you want to put on the left list so you can do an array of something like react.js we can also do something like next.js and maybe something like typescript and now we can map over those by saying that map where we get each individual item and we can simply return something like a span for each one of these like this so if you scroll down you should be able to see reactjs and then the others are cut off but they're here we can also give this span a key equal to item and we can give it a class name that class name will have a padding y of two but on large devices padding y of four and on large devices padding X of three typically we also want to have a padding X of three we also are going to give it a text XS like this on large devices text- Bas opacity -50 on large devices opacity Das 100 rounded - LG text Dash Center and a BG of hash 10132 e so even if you go back to full screen right now you can see that the first card looks quite good the globe card looks great as well but here the Technologies are still out of the picture so I noticed that I accidentally closed this div too soon this div right here is not just for the title it's for the whole card so let's copy this ending tag below the div title and let's move it over all the way until the end that way we're properly closing all the divs and now our cards will appear properly and you'll be able to see the Tex on the left side great with that said we can go below this left side mapping and we can create just a single self-closing span this one will have a class name equal to this one will have a padding y of 4 and padding X of three rounded dlg text- Center and a BG of hh11 32e if we save it you should be able to see a new container appear and now we're going to go below this div right here and essentially duplicate this entire div containing this list so let's copy it and paste it below but this time we can use different Technologies so let's say something like this is going to depend on you of course but maybe we can do vuejs if that's what you're into we can also do something like AWS or maybe mongodb if we save it you can see those appear right here but it's not as close to what our final design looks like you can see we have this empty span here and on the right side the empty span is is on top to create this Dynamic looking effect so going back here I'm going to take this span on the right side which before was on the bottom and I'm going to put it right here above the map so now you can see how it moved it to the right side great now also I noticed we can make some additional fixes to this primary class name such as removing this P4 we don't need it here as cards already have enough padding we can remove this dark BG black and dark borders and BG white all of this is already accounted for Byer theme we also don't need the border border transparent and we can keep justify between Flex Flex Co and space y4 but we can add a tiny border by saying border and then border D white SL 0.1 so this will provide a very very lightish board just so we can see it here and now these cards look even more uniform we have this great looking layout and the first three cards are more or less done this is looking great now let's continue working on the rest if I scroll down to where we close this ID3 we're going to keep creating some additional stuff for the one with an ID of six so if ID is six and this is the one with the gradient if I remember correct where we'll allow people to copy our email so let me just show you how that looks like do you want to start a project together copy my email email is copied and then even some confetti on desktop so here we can create a div with a class name equal to margin top of five and relative we want to create an additional div within it with a class name equal to it will be dynamic absolute minus bottom-5 right -0 and let's fix this bottom of five right within it we want to render a l animation and we can do that by installing a package called react Das l l provides a lot of react icons and animations we can use and we also need its types so we need to say mpm install D- save-dev at types SL react DL this will make it no exactly what we need to import and now here we can render L like this and give it options equal to an object of loop now it's going to Loop only when we copy it so we need to have access to the state of copied so why don't we create a state right here in the Beno grid item I will create a new use State snippet call it copied and set copied at the start set to false and we of course need to import use state from react now let's also properly close it right here just so it's not complaining and we're going to say Loop only when we copy it so when copied then Loop autoplay when copied once again so auto play animation data will be equal to animation data and this will be another Json object with what you can add to your data folder so let's go to data and create a new confetti. Json and you can find this Json file within the read me of this project simply paste it here and it's going to look something like this it has all the confetti data so now we can import it right at the top by saying import animation data coming from add SL data SLC confetti. Json and we can now use this animation data right here at the bottom great finally there is one property which we need to provide that's going to make it look better and that is renderer settings which is an object where we can add a special property of preserve aspect ratio and we can say x mid y mid and then slice I found this to work the best for this sort of Animation we have to import L from react L of course and now if we go back we'll also have to make this a use client component because we have used a use state so here we can say use client and this will make it work now we can scroll down go below this div wrapping the animation because how will we trigger animation if we don't have a button to trigger it so let's render a magic button which we have already created before and to it we can pass some props such as a title which if we have copied it'll be something like email copied else it's going to say copy my email icon will be IO copy outline coming from react icons Position will be set to left and of course this iio copy outline has to actually be a self-closing component we can pass some other classes to make it look better such as important BG so we're overwriting the BG right here 161 a31 and we can give it a handle click equal to handle copy so this is a function which we can create to manage the copying of the email so we can add it at the top by saying const handle copy is equal to and here you can Define your email by saying Navigator do clipboard. write text and here you can paste your email contact JS mastery. Pro for me for you it might be something else and then we want to set copied to true there we go so now if you scroll down you can see this do you want to start a project together copy my email but it's not doing anything at the moment and also it's not appearing within a gradient which is what we want so let's go into the magic button and let's style it a bit further specifically we're going to give it a handle click right here equal to handle click which we're passing from props or rather it's going to be an onclick to this element so now if we reload the page you can see that if you click copy my email you will get the confetti an and it will say email copied now the last thing we have to figure out is how to put it within this gradient so let's do that next we can scroll up to where we specified a ID of six first and where we're using this background graded animation we can dive into it and then scroll down to this outside wrapper div which is this one here instead of H screen we're going to make it h full and instead of w screen we'll make make it w full and this will make it take the full width and height of the container instead of the screen also instead of relative we can make it absolute which will actually show the elements within it now we can go back to the Beno grid and we can check out if we're properly aligning it in the middle because right now it seems to be aligned to the left side so if we check this out oh looks like I have a mistake here just if I Center this should be with within this curly brace like this so that way we have the ID is six and flex and justify Center so we have to properly close it here and then typically H full and this will Center it in the middle so now this is looking great and we can actually copy it let's reload and we do get the animation again great so now if we expand this into full screen we can see all of these sections in their full Glory we have I prioritize client collaboration fostering op and communication and if you want to change any of these text elements you can do so very easily just copy it search it remove an empty space at the end to find it properly and you should be able to find it within the data object where you can completely change any kind of text you want then I constantly try to improve my text stack very flexible Tech Enthusiast with a passion for development inside scoop building a animation library and then we have a copy email right here this is looking amazing so with that we have our hero section and we also have our benog grid telling people what we do the next section on our list will be what our portfolio is all about which is displaying the recent projects we worked on using this very engaging card that folds back and allows you to visit the live website that you're seeing on the screen here I very much like this effect so let's go ahead and implement it together I'll collapse this right here go back to the current version of the project exit all of our currently open files oh and I just noticed we don't need this div right here which we were adding before so you can simply comment it out within the background animation exit the files and just create a new section the next section will be called the recent projects so under components create a new recent projects. TSX run RFC import it right here as recent projects imported and you should be able to see a text that says recent projects which means that we are ready to start developing it great work so far to get started with our recent projects we can remove this text and give this a class name of padding y of 20 to divide it a bit from top and bottom immediately after we can create our first H1 that will have a class name equal to heading and right within it we can say a small selection of and then we can provide a space like this and then create a span that will say recent projects now if we save it you can see it like this but we can also give this pan a class name name equal to text- purple just to provide some visual interest right below this H1 we can create a div inside of which we'll show our project cards so let's give it a class name equal to flex flex-wrap items Das Center justify Das Center padding of four gap of 16 between the Cards and margin top of 10 to divide it from the ti tool and right within here we can map over our projects by saying projects importing it from at/ dat. map where we get each individual project and we can automatically return something for each project such as a div within which we can return a project. tile let's save it and you can see the titles for four of my projects now let's dive into the projects by commanding and clicking it to see what each project has it's the ID title desk for description IMG icons and a link and now I would invite you to go ah to go ahead and change titles descriptions and images for your own projects to truly make this your own portfolio or we can keep building it out together and then you can modify it at the end with that in mind let's destructure all of these properties from the projects such as the ID title description image icon list and Link we can copy that and then we can automatically destructure them right here so we don't have to say projects every time I'm going to add commas at the end of each one of these like this and I will put them in the same line so that will look something like this we get the ID title Des image icon list and a link and we close it and then present a div with a key of ID for each one and we no longer have to say project. tile or project. ID now it is just title great so now let's give this div a card-like appearance by giving it a class name equal to on large devices m-h of 32.5 remm I found this precise value to work the best we can also give it a typical height of 25 REM Flex items Dash Center so we Center them justify Dash Center so we Center them horizontally on small devices W of 96 and typically W of 90 VW so 90% of the screen and now we have space for all of these projects and right within here we want to render another exterity UI component this time it will be the 3D pin why a pin pin because it will pin on this card like this and you'll be able to click it to go to the desired website this card or this design is absolutely perfect for portfolio projects because it basically screams okay here I have some data and I can enter into that website to learn a bit more about it okay it even points to the URL of where it will take you a very engaging design so let's copy the code by clicking here and let's create a new PIN container right here under UI pin container. TSX inside of which we can paste what we just copied and it looks like it's using some kind of a pin container coming from UI 3D pin so let's see what that is about oh it says we need to copy this component UI 3D pin so let's do that by adding a new component to the UI section called 3D daspin . TSX where we can paste this and now if we go back we can just import it from sl3d pin and if we go back into projects we should be able to use it by simply wrapping everything in here we can just say pin container coming from UI 3D pin and we can wrap it like this and in here let's render the title for now if I do that and scroll down you'll be able to see that it kind of immediately works but each one of these is in its own kind of space we just want to have a simple card right here so let's enter this spin container and let's scroll down a bit here we here we want to remove this BG black as we already have a background we want to continue Down and Under pin perspective we want to change w96 to W full and then I just noticed we don't even need this first pin container we have created as this is just an example of how you can use it so you kind of wrap it with something and then you put some stuff within it so for now I will delete this pin container and we'll use just the 3D pin so now within this pin container let's provide more content let's first give it a title and this is where it will point to so I think for now let's make it a title of our project and let's also give it an hre and this hre will be where it will point to so that will be the link of your project okay let's see if it accepts that title href title href it does seem like it accepts both so why is it complaining oh property children is missing of course so let's add the children I'll create a div right within it within that div we'll create another div and that will be the wrapper for the image so here we can render the image with a source SL bg.png with an Al tag of BG IMG so if I save this so if I save this you cannot see anything yet but let's also add another image right below this div and this one will be the image of the project so source and it will be equal to IMG with an Al tag of cover or it can also be the AL tag the actual title of the project and a class name of Z10 absolute and bottom zero great let's save it and even if you reload there appears to be nothing there let's see why that is if I go into pin container it wants children right here and where is it using that children it seems like it's trying to render it here so why is it not showing up where we need it let's look into that soon just after we add the classes to this div within the pin container we can give it a class name equal to relative Flex items Das Center justify Dash Center on small devices w- 96 typically W of 80 VW overflow Dash hidden so there's no scroll h of 20 VH for the height of the card and there we go so it was actually missing the height to be able to see the content inside of it and now we have four of these great project images of course you'll be able to use your own later on we can also give it on large devices a bit of more height like h-30 VH and margin bottom of 10 now within this in div we can give it a class name equal to relative w- fo h- fo overflow Das hidden and en large devices rounded -3 XL and then we can give it a BG off # 131 62d so now it's going to look like a card it's hard to notice it now but we'll be able to notice it later finally let's add a title right below this div containing the images it will be an H1 that will say title as simple as that now let's style it as a title by giving it a class name equal to font Dash bold on large devices text- 2XL on medium devices text- xcl typically text- base and line clamp one so it means that it will not go into two lines even if it needs to expand below that age one we can render a P tag that will render a des a description and we can give it a class name equal to on large devices text Excel let's fix this class name first on large devices font dormal font Das light text- smm typically and line clamp of two so you can extend to two lines there we go so this is is now looking very nice and uniform and finally let's create the bottom part of this card which should look something like this where we have these Technologies and also check the live side button we can do that by creating a new div below this P tag that will have a class name equal to flex items Das Center justify Dash between because we want to have content on both left and the right side margin top of seven and margin bottom of three within it another div with a class name equal to flex and items Dash Center and finally within here we can map over our icons or Technologies for that project so we can say something like icon lists which we're destructuring from each one of these projects map or we get an icon and then for each icon we return a div the they'll have a key equal to Icon because each one is unique a class name equal to border border Das white over in square brackets 0.2 and right within it we can display an image IMG that will have a source equal to icon with an ALT tag of Icon and a class name of [Music] p-2 so if now we save this you can see all of these Technologies typically these should be circles right so let's give it a rounded - full property that's good bg-- black on large devices W of 10 for the width on large devices h of 10 and on smaller devices W8 and H of 8 and this should be enough for all of them to become circles we can also give it a flex justify Center and items Center which will Center it vertically and horizontally within those circles let's also give it a special style property which will say dynamically translate x minus 5 * index time 2 and then outside of that p x and then we get the index right here so this will move each one by some multiple of the index let's properly spell index here and let's save it it looks like I didn't properly close it so inside of style I am missing a transform property that we then give that we then assign to translate and if I save this if we reload there're appearing one on top of another which gives for a very cool visual effect like they're all together within this project very cool finally right outside of this div containing all the icon list we can create another div which will say check out live site so let's create a p immediately check live site and below it we can render a fa location Arrow import it and give it a class name of Ms for margin inline start of three and we can give it a color of hash CBA cf9 that's going to look something like this check Liv site we're using the same purplish color we're using right here and now we can style this div with a class name of flex justify Dash Center and items Dash Center there we go finally let's style the P tag by giving it a a class name of flex on large devices text- XL on medium devices text- XL and typically text- smm and also text- purple for the color this will make it a bit smaller and it will look good now you can notice that when I hover over the project there seems to be quite a long title right here appearing so instead of the title maybe we show the URL right here in the pin container so the link can also be the title which kind of makes more sense in this use case because it tells you where we're going after we click on this card which is pretty cool I think that's how it should be used and believe it or not with that we're done with what you could argue is the most important section of our portfolio the project section so if I open it up on full screen this is how it looks like and this is how it looks like on the final design it is a big difference right here the projects are much larger and here they're kind of more neatly packed together so let's quickly fix that here we have this div which is containing everything and within it we have the div containing only the projects so to fix it let's first look into this outer div below the H1 this one here it's wrapping everything it has the padding but we can just give it a bit of a different horizont zontal Gap rather than a vertical Gap so Gap X of 24 we can have more space but Gap y of just eight so a bit lower like this this will change the Gap Dynamics and now we can also modify this div within the project by giving it a small property of H of 41 REM and typically h of 32 REM so we can override our previous 25 to give it a bit more space Also on small devices we can give it a width of 570 pixels so a bit more than before and this will make it more spread out across the screen but of course now we have to fill that space somehow so we can also modify this card within the pin container by giving it on small devices a width of 57 7 pixels this will make them much bigger and much more powerful typically with off 0v VW on small devices we can give it a height of 40 VH and typically a height of 30 VH on large devices we can remove this one right here and keep it margin bottom of 10 great so now they're looking much more similar as they do on the final website so now that we have a couple of sections ready and this is maybe the most important one uh we can also implement the floating Navar or at least the links so we can actually scroll down to the project section to do that we can go back to the original homepage and you can see the structure for our links the only thing we have to do now is remove this array and use the constants nav items coming from at/ dat this one includes links to about projects testimonial and contact so let's save it and as soon as you do if you scroll down and then up you should be able to see different parts we can remove the login at the End by heading into the floating nav and then scrolling down and removing this login button there we go and we'll also have to make some small modifications as now it looks a bit narrow so let's go to the top of the jsx and to the class names let's change rounded Dash full to rounded LG let's remove this dark border as well as the dark background and BG white we don't need that and we can change padding right to padding X of 10 we can also remove these and add a padding y of five so now it has a bit more space but it doesn't have any background or a border so let's let's add a border white over 0.2 inside of square brackets this will give it a nice tiny border and we can remove this border transparent as well let's give it BG of something like black 100 okay that's good and if you want to you can make this rounded full it's really a personal preference depending on whe whether you want to have a pill likee shape or a rectangular like shape I think this is good now let's see if all our links are pointing to right things if I click about it points to about which is great if I click projects it doesn't point to projects so let's go back to the recent projects and let's give this div an ID equal to projects if we do that and now scroll to projects you can see that it works great and this is a pretty cool nav bar because it only shows when you actually need it like if you're scrolling down means you want to see more more but if you go back up it means you want to see something specific so we're going to make it work for testimonials and contact later on as well great with that said we have now completed the most important sections of your portfolio the damic homepage that has animations the about section which is incredibly unique I mean I haven't seen something like this in a long time and also a small selection of your recent projects where people can click them and check out their Liv sight and with this many features completed on your developer portfolio it's important to ensure a smooth user experience optimized performance and just in general showcasing that you're using all the best practices of developing applications for that reason we'll use Sentry an Enterprise level application monitoring software that allows you to fix your portfolio very quickly if it breaks and specifically in this case we'll also enable your users to share when they experience something unexpected with the site we'll integrate this model that will allow them to provide you direct feedback and this matters a lot because you're showing to whoever is looking at your portfolio that you know how to implement best practices to your apps so let's get started with integrating Sentry click the link in the description so you can follow along and see exactly what I'm seeing and then either sign in or get started sign up using your preferred method and if you've used it before you should be able to see the issues happening on your other projects so you can fix it and check out the projects you've done but if you haven't you should be able to see the onboarding and there's a trick to get to the onboarding even if you've Ed Sentry before just copy your current URL and instead of projects say onboarding that'll show you this welcome to senty integration guide click install Sentry choose your framework in this case nextjs and configure the SDK we can follow the commands and install the Sentry wizard by pasting this command in the terminal it will ask us whether we want to proceed to which we can say yes and now it's going to ask us a series of questions this wizard will create and update files okay that's good to know so let's continue we'll use the Sentry SAS vers version we do have a Sentry account it'll try to automatically log Us in we can select our Sentry project and it will install all the necessary dependencies this is a pretty cool feature that allows you to avoid add blockers if you want to use it that's okay but for now we're just going to press no and proceed with the default options we'll use yes for this one yes for cicd tools and then you'll be given the century on token which you need to copy and let's immediately store it somewhere for later on for example in the env. local file and we can paste it right here Sentry o token and then we can continue and the project has been successfully set up that means that Sentry has set up everything for us everything from their client configuration guides to this instrumentation file and even a global error example which allows us to trigger an error to see if everything works so now let's click the next button right here and it looks like I connected this cental instance to one of my previous projects but that's okay I don't mind it in your case most likely you have a new clean project right here as a matter of fact it's even better that I have all of these previous issues events and all the data right here loaded as typically it can take about 15 minutes for all the data to show up so for you it might take some time so right now I can guide you through everything that I already have here and then you can get back to this page later on and see it for yourself as well one thing we need to do is we need to go to this page that was created for us Sentry example page I think is the URL yes so if you go to your portfolio and navigate over to Sentry example page you should be able to see a page that looks like this and you can click throw error and you can see the error was thrown senty example front end error this now means that we should be able to catch that error under our issues and if I reload here it is senty example front end error you should be able to see just this one if you have a new clean project now what centry allows you to do is to track the operating system the browser the device and a lot more information about the error that was thrown such as the entire session replay of what the user was seeing when the error happened this is incredibly useful because when your users are browsing your portfolio in production it's hard to know what's going to happen on their side but with this you can very easily see the error and debug it because you're also getting the complete breadcrumbs of the event and all of the information coming from the console some of the other things we have here are queries where you can see what your users are doing also requests they're making web vitals which matters a lot for a portfolio so here you can track how much time it takes for the website to load replays that we have discussed so far where you can see if people are clicking something that is not working or if they're clicking something many times which is considered a rage click that's not good means that your user experience is not as it should be and in the dashboard you can also see a lot about what they're doing what kind of experience they're having which Pages lad the slowest people from which countries are visiting your portfolio and much more but what I want to explore further right now is this user feedback feature which allows you to create bug reports so that users can let you know about sneaky issues right away and every report will automatically include include related replays tags and errors so let's set it up I believe we have already installed this and we have to add a special integration called century. feedback integration so copy this and let's search for this century. init within our code so if I go here and search for senty do init you can see it in three places client Edge and server in this case they give us an alert saying that it must be added to client config so let's go to the client and I believe we can just add Integrations if we don't already have any oh we do have a replay integration so now we can just add a feedback integration and the color scheme can be dark now if we go back to our portfolio and go to Local Host 3000 would you look at that there is a report a bug button which matches our color scheme very well where people can leave their name email description of the bug for example let's see if we can find a bug on our current website I mean this is technically not a bug as somebody only needs to copy your email once but let's say they copy it and they forgot they copied it and they want to click this again no more confetti again right again not a bug but you can Implement a refresh after every couple of seconds so let's say this user doesn't like that and we can say email copy button doesn't work and we're going to leave many exclamation marks like an angry user we can also add a screenshot but I believe it's not necessary let's see how that works oh very cool so I can just select it from my screen immediately and it will Target this part of the page okay and we can send a bug report oh that's it thank you for your report let's see how much time it takes for us to get the user feedback I reload and here it is email copy button doesn't work let's click it you can see the screen they were seeing when they gave that their URL and also the entire replay of course the numbers and letters are hidden here for privacy but you can see exactly what the user was seeing on the screen when the error happened as well as their browser name extension version and more I mean this is amazing typically you would have to go back and forth with the user asking them what their browser was what their operating system was and more and here you just get this error in this case I'm not going to mark it as Pam but I will mark it as resol as as I said it's not really a bug but with that said Sentry is amazing I reloaded the page I can move up and down and Sentry is tracking some of the events right here that's a pretty cool thing so if you want to track how many people clicked show my work or click contact you can do that as well all of the events will be shown under replays and requests but with that said let's continue building out our phenomenal portfolio next on our list kind words from satisfied clients to start developing it I'll scroll down navigate over to the homepage and create a new section under components called clients. TSX where we can run our afce and then we can simply use that component right here clients and we can import it go into it and start developing it our client section will start in the same way that our project section started so we can quickly go to recent projects and just copy the first div H1 and even the opening tag of the div below and then paste it right here and properly close all the divs that is one and I believe we need one more there we go so now let's indent it properly and let's save it instead of saying a small selection of recent projects we can say something like kind words from and then we can say something like satisfied clients and also we can add a space right here I believe there we go that's good right below we have Flex we don't have to wrap it here because we don't have any elements within it but we will make it Flex Das CO as we want to show elements below items Das Center and then we don't need anything else in this case and within this div we can start showing those cards of course these are the ones I'm talking about and if you can guess it correctly they're coming from eity so let's go here and let's search for infinite moving cards this is what we need and we can copy their code base infinite moving cards so copy or let's see it right here yeah this is the card so we can create a new component under UI called infinite moving cards. TSX and paste it right here at the top we need to fix this to SL utils slcn and now we can use it right here here within this div by creating a new infinite moving cards close it it is a self-closing component and it accepts a couple of props such as items which need a quote a name and a title a direction and speed and some optional parameters so let's say items is equal to testimonials coming from data direction is equal to right and speed is equal to slow let's save it and if we go back right off the bat you can see some cards moving right here this is the default styling coming from exterity UI we can wrap it within an additional div right here so let's put it inside and let's give it a couple more properties such as a class name equal to h-50 VH like this on medium devices h-30 REM rounded Das MD that'll make it look like this Flex Flex Das coal so they appear one below another anti- alast this will help with the way that they move items Das Center relative and overflow Dash hidden and now with that we can move into the infinite moving cards and we can style them to our liking so let's go to the jsx part of things right here and let's scroll down to this UL right here and change the Gap to 16 to give it a bit more space then we can go into each individual list item and let's change the medium width from 450 to about 60 VW so 60 vertical height this will give it a bit more space Also we can change the general width to about 90 VW much more than before we can also make this border slate 800 so a bit darker and we can modify the padding x 8 to just padding of five and on medium devices padding of 16 so it's styled a bit differently now as before we can generate a specific linear gradient okay um and in our case a bit of a darker color might work better so I believe we have already used this linear gradient somewhere so if I search for linear gradient Let's see we used it in the Beno grid yep so we can copy this same one we have used before and we can paste it right here under background and save and with that background color we also just had a background so let's copy that as well make a new property of background and make it this and then this is going to be a background color if we save it you can see now it kind of matches our design a bit more and by default if you hover over it it stops that's great and in this case we can change the key to idx because sometimes our names are repeating of these testimonials okay let's modify the text a bit this span element right here let's change the color to text white and also text LG to make it a bit larger here we go let's also add a new div right here above the name above the span of name for the profile photo so that will be a div with a class name equal to me so this is margin inline end of three with an image so IMG of source is SL profile. SVG of course you can make this Dynamic for each of the users and we can give it an ALT tag of profile we can change the text color to text white one more time and instead of font normal it can be font bold and also let's make it text XL so extra large finally we can change the text of the item title to text- wh-200 you can see that now it looks completely different you can see this profile photo right here you can see the name of the person but it looks like it's jumping out a bit so it looks like not everything fits on the screen whereas on the finished website this is how it looks like so let's play with that a bit we can go to the topmost div this one right here and we're going to change the max W7 XL to w- screen which will make it expand over the entire screen there we go that's much better so now we can see that a lot of this actually fits but still it looks like this bottom part is jumping out of the card whereas on the finished one it fits and it has much more width so let's scroll down I think it should be either in the UI or the LI right here the LI has a w of 90 VW which seems good and a Max W full so yeah this looks good to me but if we scroll down here we have two separate spans and we want to add them together so I'll create another span which will wrap those two which is the name and the title and this one will have a class name equal to flex flex-all and a gap of one and now that I think about it this pan should have been a div so let's just make it a div not a David just a div and it looks like you have to reload every time for this testimonial section to see the changes so if I do that now it's looking better but still not not quite there yet it's possible that our text is just a bit too large so right here on item. quotes span we can give it a text- SM and then on medum devices text- LG I think this will make more sense there we go and now we have a card which is much more similar if not exactly the same as on our finished website this is great it looks like we just need some more spacing between this section and the bottom section as well so if I go back this is looking great and we can go back to our infinite moving cards and I believe we don't even need this div that's wrapping the infinite moving cards because we already have it within it so we can remove it here and let's make sure we don't have an extra div save it reload and let's see how it looks like that's good looks the same as before right here on Max LG devices we can also give it a margin top of 10 that's good and now we can start crafting a section right below it which will be within this same div so let's do it right here a div within which we want to wrap over our companies so we can do that by saying companies. map and make sure to import it from the data object where we get each individual company with its ID image name as well as name image and I think that's it right within here we can create a div and it looks like I didn't properly open or close this function block so let's do that right away and let's give this div a key equal to ID and a class name of flex on medium devices Max dw- 60 typically Max DW of 32 and a gap app of two between the elements and this section you would use if you have worked with some companies before so we can add an image and add a source equal to IMG with an ALT equal to name and a class name equal to on medium devices W of 10 otherwise W5 and if we save that you should be able to see some company logos appear but we can also duplicate that image and show their whole name IMG so companies typically have a shorter logo and then a larger name of that company and we can make it a bit larger such as on medium devices W of 24 and typically W of 20 so now you can see what I meant and we can also style this outside div to make it look better by giving it a class name equal to flex that's going to make them show in a row Flex Dash wrap so they show in multiple rows if necessary items Dash Center to Center them vertically justify Dash Center to Center them horizontally a gap of four to create some spacing on medium devices a gap of 16 so even larger and on Max LG margin top of 10 so this means it will show on smaller devices to divide it from the testimonials and if you haven't worked with any company so far you can leave this section off or you can maybe put the logos or names of your applications you have developed be creative but as a last resort you can just remove it with that in mind we have concluded our client section so let's check it out on full screen there we go I think I need to reload for the speed to take effect there we go so it's much slower and if you want to read it you can just hover over it to stop it and of course here you would put your own testimonials you've received from other people that have either worked with you or you worked for that's always a great idea whenever you're working on a project collect testimonials from people that you work with it gives other people a sense that you know what you're doing and that people actually liked working with you which matters a lot so yeah now we have the satisfied client section and we should be able to easily scroll through it well we cannot right now but if we give this client section an ID of not projects but rather testimonials and now if we select it right here you can see how nicely it Scrolls to it this is great the next section on your list is my work experience with these cards that have a moving light appearing on them and you notice how this section didn't take too much time to develop that's because we are reusing just one single component and then moving through it same situation happens right here so let's go ahead and let's get this section developed we can start by going back to page and creating a new component which we can call something like experience so let's go to components and create a new experience. TSX section where we can run rafc import it and use it right here experience coming from components get into it and we should be able to see experience at the bottom so let's get started first let's copy the heading from the client section that includes the div with the H1 and the first opening div as before we can paste it right here and properly close the two devs there is one and there is two now if we save this instead of kind words from our clients we can say something like my and then in a span we can say work experience there we go make sure to include a space right here and then below that we have a div with the rest of the content so this one doesn't necessarily have to be Flex we can just give it a w full for full width margin top to divide it a bit bit from the top and then we'll make it a grid okay on larger devices we will have four columns so grid calls 4 and on mobile we'll have just grid calls one and then a gap of 10 between each one of these work experiences we're talking about these cards of course so let's map over them I'm going to say work experience. map where we're going to map over each one each card and for each one return a button so in a way we can make them clickable if you want to this will temporarily break her application but that's okay as we want to use an exterity moving border component okay a border that moves around the container it can be used for buttons or cards so let's copy its usage right here and let's create a new component called moving borders. TSX and paste it right here you'll notice that it has an export called moving border and at the top of that it has an export called button so let's go back here and let's import the button from UI moving borders and we can provide something within that button such as a div and within the div we can provide the image that will have a source equal to card. thumbnail an I'll tag of card. thumbnail 2 and a class name equal to on large devices W of 32 on medium W of 20 and typically a w of 16 so now if we save this and go back scroll all the way down you should be able to see four cards that look like this they have images within them and you can see this animation happening which looks great since we're mapping over those buttons we need to give them an ID so let's expand it and let's say key is equal to card. ID you can also provide some other properties such as the Border radius maybe a bit larger of 1.75 REM let's see okay not too big of a difference and we can also give it some additional class names by saying class name is equal to flex D1 t- white border Das neutral -200 and on dark border of slate 800 which is what we care about you can also play with the durations a bit by making it random by saying duration is equal to math. floor math. random and then times 10,000 plus 10,000 I found those values to be very random and they seem to work great for these cards so you can see now it's moving a bit slower and they're moving at different pieces and it just looks a bit more engaging again if we refer the regular one that's okay but we can also make a decision later on once we conclude the look and feel of the card so let's do that by giv giving this div a class name equal to flex on large devices Flex Das row otherwise flex-all on large devices items Das Center padding -3 padding y-6 on medium devices padding of five on large devices padding of 10 and always a gap of two this didn't do anything just yet but as we add more more elements within this div it will position them nicely such as this div we can give it a class name equal two on large devices margin s so that's inline start all five and within it we can render an H1 within which we can render a card title and below that we can also render a P tag that will render a card. DEC which stands for description if there we go but this looks quite bad right now so let's style them a bit by giving the H1 a class name of text- start text- XL on medium devices text- 2XL and font Das bold so this will make it even larger there we go and we can also style the P tag by giving it a class name of text- start text- white-1 100 to change the color a bit margin top of three to divide it from the title and font D semi bold to not make it as bolded as the title great so now we need to dive into this button and style it further or it's not going to be a button in our case it will be a card starting with this component class name we can remove the h16 and w40 and instead we can add on medium devices call- span sp-2 this will make it span across two lines on larger devices and immediately as we removed the w40 now it takes much more width so it fills out the entire space and already looks so much better and that was the only change we needed to make so you can see how exterity UI is pretty cool in a way that it allows you to not install the code but just copy and paste it and therefore you can change it still if I had to give feedback to aity I would prefer to have a CLI integration like shat CN where I can just install this component and it automatically gets added to my code base it would make things just a bit easier rather than having to go here and then copy all of these parts but with that said we're now done with our experience section so let's check it out in the full screen and it looks amazing this was actually so simple to implement you can see how some of these starting Parts like this navigation bar or this hero section or especially this Bento grid took us a bit more time but this project section and the testimonials and even the work experience was super simple to make so with that in mind the next section that we can work on after the experience is the my Approach which uses these very interesting cards to show different phases one two and three look at that animation let's Implement that next back on our page we can create a new component called approach or process whatever you prefer TSX run RFC and simply import and use it right here approach it's going to say Approach at the bottom which means we can get into it and start implementing it for that we'll use a Stern canvas reveal effect a dot background that expands on Hover as seen on Clerk's website that's good so we can scroll all the way down and here we can get the canvas reveal effect so let's copy it and create a new UI component called canvas reveal effect. DSX and just baste it here that is good here we have that canvas reveal effect component and then we can scroll all the way up and directly within the approach we can copy the code of how we can use this card and the canvis reveal effect so let's copy it and paste it right here within this div you'll notice we need a few things we need a card and also a canvas reveal effect the canvas reveal effect we already have coming from this file but where is the card coming from we copied just the jsx part right here but what we didn't see is that right below it was the card as well as the icon so it might be better to just copy the entire thing and paste it right here so now we have everything and we can just do export default and call it approach as we did before so cons approach is equal to an aror function that we can export default at the bottom so export default approach but now we also have a card component right within here let's collapse everything so it's easier to see it icon exterity icon we have a card and finally we have the approach and we can import this components UI canvas reveal effect as we have already copied that and it's coming from add slash components forward slash and I think it was the canvas let's see canvas reveal effect yes so it's slui SL canvas reveal effect and now we should have everything to show our cards within this approach so going back to our portfolio and reloading the page you can see three cards appear right here with some names so let's turn it from this to this where it says my Approach with different phases first things first we can wrap everything as a section and give it a class name equal to w-o and padding y of 20 then within it we can create a new H1 where we can give it a class name equal to heading and it will say my and then a span with a class name equals to text- purple something like this that can say approach and of course we have to properly close it there we go that was supposed to be better if we could actually see it but we cannot see it yet I reloaded and it appeared right here which is good now let's modify the styling on this div instead of padding y of 20 I'm going to do margin y of 20 Flex Flex column on large devices Flex row this is all good we don't need the BG wide and dark and so on we just need a gap of four that will provide a bit less gap between the elements and then we're rendering an exterity card it has a title it has an icon and within it it renders a canvas reveal effect and that happens three times you could potentially just map over to data and then show different things or you can just keep it as it is for now I'll just keep it as it is and put everything in a new line so we can easily see what is happening there we go radial gradient for the cued fade okay and then this is the last card also has a title icon and a card great so now we can modify the data and the look and feel of these cards let's do the data first the title of the first one will be something like planning and strategy if we save it nothing happens yet but if I hover over it you can see how nice that looks like the icon will be just a regular icon but we're going to also pass it an order equal to phase one and then we can go into this exterity icon accept this order as a prop you can call it anything like a title as well and give it a type of a type string and then we can use it right here below so no longer will this be just an SVG like it is right now it will be a div that will render a button coming from exterity UI so we can go here and search for button and you can choose any kind of button from here I like the one with the Border magic which is this one right here and you can just press copy when you do that you can put the button right within the div like this but it looks like I got the invert one instead of the magic so let me just go to the magic one there we go and copy it and paste it yeah that's the one it has a couple of spans and some more stuff happening so if I go here you can see the Border magic as simple as that and here we can render the order by order I mean kind of like 1 two three for the first one we're passing phase one and for others we're not passing anything yet if you want to you can style it further but this looks good enough for me so let's close it and let's go back up let's pass other phases so order is equal to phase 2 and then here we can give an order equal to phase three there we go next we can give each card a description and you need to add it to a card not here to the canvas reveal effect so expand it and then say description is equal to and then you can add it right here now you can get it either from the deployed website or even better from the final figma design which you can find in the description simply copy it and I will repeat this process for all of the cards added one description this is phase two and we will also add the description right here equal to Let's copy it and let's also add the title as well so I will copy the title overwrite it and one last is remaining card with a title of development and launch and a description right here description is equal to this one right here this is looking great now by itself this will not read the description as the card doesn't know what a description is so let's dive into the card and modify it to accept a new prop of description let's add it description is equal to a type of a string and right below the title right here we can replicate this H2 change it to description and we'll have to modify a few Styles let's make it text- smm instead of text- XL and save it okay this is better let's also give it a style property with a color of hash E4 ecff and also a text Dash Center class name if we do this and you hover this will look better we can also Center the title by giving it a text- center property and we can maybe make it even larger by giving it a text- 3XL property right here instead of Simply Excel the top so now that will look something like this that's better and we can change the dimensions of the card a bit by scrolling up all the way to this primary div here here we can say on large devices give it a height of 35 RM we can remove this relative and give it a rounded -3 XL this will make the cards smaller initially but they'll be big on larger devices this is good we can also try to Center this phase button by going right here and you can see the icon we'll need to use absolute positioning to Center this so let's say absolute right here after the translate y4 let's give it a top Dash 50% left- 50% it has to be inside of square brackets and now we can also use a translate so translate DX Dash and then 50% like this oh we have to do minus 50% right here and also translate dy- minus 50% like this as well and now it is properly centered this is looking great we also don't need this radial gradient for cute fade as I don't really see too big of a difference yeah I think we can remove this part if you want to you can change the colors the dot size and more but for now now I'm okay with those and with that said our approach phase seems to be done at least on mobile but let's check out desktop or full screen in this case Yep this is looking great love it we have this nice animation and you can specify different phases within your project that you're working on if you want to we could make these just a bit larger so it's easier to see phase one two and three so let's go to our button yeah that's right here and let's make it a text- 2XL we can add that to the span element right here text- to XL we can remove the text small and we can also make it bold since we have increased the size so font Das bold instead of font medium and here we can also give it a bit more padding padding X of five and Y of two to accommodate for the larger font size there we go this is beautiful the next thing we can focus on is this minimalistic yet quite effective footer so let's do it next I Collapse my screen and I'll go back to the homage and create a new section which we can create in the components folder called footer. TSX run RFC and import it right here by saying footer coming from components it will immediately appear at the bottom which means we can get into it and start developing it first things first we can turn this div into an HTML 5 semantic footer tag and give it a class name of w full so it extends for the full width of the screen padding top of 20 and padding bottom of 10 and an ID of contact so we can very quickly scroll to it from the navigation bar that's going to look something like this right within it we can create another div for an image and this will be the footer grid so we can say image with a source equal to footer DG grid. SVG with an Al tag of grid and a class name equal to w- full h- full and opacity of 50 if we save this it might be a bit hard to spot it especially since we haven't yet added classes to the outside div so let's do that by giving it a class name of w-o absolute left- Z and minus bottom -72 and a Min AG of 96 like this so if we do this it might still be hard to spot it and on large devices is you should be able to see just a bit of a grid right here if you want to see it better you can increase the opacity to 100% there we go but this might be a bit too much so I'll bring it back to 50 and collapse the browser we can go below this div wrapping the image and create another div that's going to be for our content with a class name equal to flex flex-all and items Das Center within it we can create a new H1 that will say something like ready to take and then within a span your outside digital presence to the next level okay let's fix this digital and we should be able to see it right here we can also make the span with a color of text purple so class name is text x- purple and we can give it a class name equal to heading on large devices maxw d45 VW great so mobile it looks great and right below it we can create a P tag that will say reach out to me today and let's discuss how I can help you achieve your goals so always make it about the other person also it's not good to use apostrophes so use these characters instead let's see how that looks like and let's style it a bit by giving it a class name equal to text- white-20 so it's not full white on medium devices margin top of 10 otherwise margin y of five and text Dash Center if we save it that looks much better and we are ready to start creating the button portion of the page so we can create an anchor tag that will have an href equal to mail 2 and then put your email here such as contact at jm.pro and here you can render that magic button which we have used before importing it from UI magic button with a title equal to let's get get in touch an icon equal to fa location Arrow like this you need to import it and a position equal to right and that's going to give us this nice looking button which we have seen before we can go all the way below this div and create one last div for our bottom of the footer inside of which we'll have our P tag with with a copyright so we can say copyright and we can try to find that copyright signed so we can say copyright sign there we go we can copy it and paste it and say something like 2024 and then put your name there we go let's style that a bit further by giving it a class name equal to on medum devices text-base otherwise text- small on medium devices font Das normal and typically font Das light as we don't want it to stand out too much let's also style this div outside of the P tag by giving it a class name of flex margin top of 16 to divide it from the button on medium devices Flex row typically Flex column and also we want to center it by giving it a justifi between so the there's a space between and also we want to give it item stash Center so now there's this copyright in the center but as soon as we add another div right here it will move to the left side and this div will have a class name equal to flex items Das Center and on meding devices gap of three but on bigger devices a gap of six and within here you can display your social media profiles by saying social media. map where you get each individual profile and for each profile you can automatically return a div with a key equal to profile.id and within it you can have an image with a source equal to profile. IMG an Al tag of profile.id a width of of 20 and a height of 20 and of course you need to import social media from at slata as those are our constants so if you do that and scroll down you should be able to see those three icons but we can improve that further by giving this div a class name of w-10 h-10 this will give them the width and the height we can also give it cursor Dash pointer so people know they can click them also Flex justify Dash center items Das Center why because we will put them within circles so we can give it a backdrop filter a backdrop blur LG saturate 180 this is an interesting one and BG opacity of 75 and BG black 200 so so this will make it look like it's within some kind of circles right here after we give it a border so we can say rounded Das LG border and Border black 300 so just a bit of a difference from what we have here and now we can see it's within some kind of blurry or glassy rectangles and let's just fix this items Center as well so it looks good there we go that's better and that is our footer of course it looks much better on full screen so you can see it right here and this button leads you directly to your email client which is great and with that believe it or not we came to the end of this phenomenal portfolio build congratulations for sticking till the end and soon enough we'll deploy to the Internet so that everyone can see your work but first let's fix some bugs I noticed that if I scroll anywhere and if it adds this about section here or if I go to testimonials whatever and then I try to go back a weird thing happens the top is cut off and then if I go to the bottom there's too much stuff at the bottom here too much empty space so how can we fix that let's go to our home page and right here you can see overflow hidden and we can remove that part so if I save this click show my work and scroll up it seems to be good now let's let's try going somewhere else like testimonials yep that works as well let's try maybe contact there is some more space at the bottom still but at least the most important part which is the top part was fixed so now we can always go here and even if I reload while in the about it Scrolls and I can still go back and I think the best solution to this would be just to remove this div containing the grid image it wasn't that visible anyway so just removing it will immediately fix the problem and make her footer look great while at the same time fixing all the issues we've had with a hero section now since we remov that overflow thing we have this weird horizontal scroll happening so let's go ahead and fix that back in the homepage we're going to add it another type of overflow overflow Das clip if I save this you'll notice that the Bottom bar disappears but the top bar still is here so that means that we cannot scroll to the right side anymore we can just scroll up and down and the behavior works exactly as it should great so we have fixed that the actual navbar does work on desktop devices but what I've noticed on mobile is if I go here and then choose mobile you can see that for some reason it is completely empty it seems like there's nothing there so let's fix that too in our floating nav if you scroll down a bit to where we're showing our list items you can see that now we're hiding the nav item on extra small devices and on small we show them but in our case we don't have the icons for all items so we want to show the name always so let's just make it text DSM and let's also give it a important cursor Das pointer to make it seem clickable scroll down and then up you can see the full navigation and we can go down or we can go all the way up but it does seem like our footer is hidden a bit so we might want to give it some space it's good that we checked it out on mobile too so if we go to the footer we can remove the padding top of 20 and instead add a margin bottom of about 100 pixels which should give us enough space for the full content to show at least on mobile so if we check this out you can see that now we can see everything clearly the rest of the page looks amazing and let's go back to desktop and you'll see that now we have some extra spacing here which kind of is okay but we don't need this much so we can go back right here and say on medium devices and up we can do something like margin bottom on of just five let's say that's about 20 pixels instead of 100 so there we go this now is much better and our application is bug free um if you do encounter some bugs you can report them or what I would recommend even more is just adding a new post under the modern portfolio Discord right here where you can just say what's bothering you and of course make sure to read the guidelines to be able to ask the question in a proper way with that in mind let's get our portfolio deployed and we're back on our hostinger dashboard from here we can go to our file manager you can go into the public HTML and there's only a default PHP file which we can delete this is where our build folder will go so let's go back to our application stop it from running by pressing control C and then clearing it and we can go to our next. config.js and expand this next config object here we can say output and in this case we'll choose export which will give us an exported build output in the out directory so let's say output and that's going to be export great now we can open up the terminal and say mpm run build immediately you can notice that it's building out everything and it will return it in an out folder it will take a couple of seconds you don't have to worry about these messages because on the bottom you can see compiled successfully so if we scroll to the bottom you'll see that we have a type error and this happens so for that reason there is one thing I like to do for builds and that is to go to next config and say typescript ignore build errors is set to true it is possible that we had an occasional clab script warning but this will just skip it and run our build regardless and just before we spin up our mpm run build once again let's just go right here to our file tree to the app and remove this Sentry example page as we don't need that this is the one that we use to trigger that example error and another thing we need to delete is this Sentry API as we won't be using it so once you delete it open up your terminal and rerun mpm run build let's give it some time and I'll be right back and there we go pre-rendered as static content so now if we go right here you can see the out folder which you can rightclick and then click reveal in finder or open in file explorer if you're in Windows enter the out folder copy everything that is in there and simply drag and drop it to public HTML this should take less than a minute and with that in mind we can simply go back to our H panel and go to your new URL in literally seconds your website has been deployed to the internet you have seen that nice animation happen and don't forget you have https security as you can see there is a proper SSL certificate added to your domain so let's give it one last last look show me your work we have this 3D Globe people can copy your email see a selection of your projects see what other people have said about you your work experience process and they can easily send you an email oh and what if they're checking your website out from mobile it also looks amazing everything fits nicely within one screen the animations are there especially on mobile as you as you put your finger over a specific project the look good and everything just feels like a native mobile application phenomenal job on coming to the end of this video not many people do but you did this means that you might be interested in diving a bit deeper so go to JS mastery. proo and check out our ultimate nextjs course here we dive into so much more depth teaching you how to truly use nygs and get from this performance to this we have a lot of deep Dives where you can see exactly how things work behind the scenes you build and deploy a very complex applications and we even have some active lessons which allow you not to just follow along with the video but we give you a task an example and then resources and hints so you can truly build something on your own and learn it and of course the app you'll build in the course is pretty crazy it is a full stack modern Dev overflow application basically stack overflow on steroids with AI other people have loved it I'm sure you love it too so check it out with that in mind take a bit of a break you deserved it congrats on your new portfolio I want to see you make some changes and tag me on LinkedIn Twitter Instagram wherever you are and show me what you have done and I will share your portfolio with everybody so they can see your work once again great work and have a wonderful day

Channel: JavaScript Mastery

Views: 223,921

Keywords: javascript, js mastery, master javascript, javascript mastery, web dev portfolio, web dev portfolio tutorial, dev portfolio, dev portfolio website, dev portfolio website using react, portfolio website, web development, web developer portfolio, software developer portfolio, portfolio tips, amazing portfolios, react portfolio, next.js portfolio, react portfolio website, react portfolio website tutorial, nextjs portfolio

Id: FTH6Dn3AyIQ

Length: 164min 25sec (9865 seconds)

Published: Fri May 17 2024