Build and Deploy THE PERFECT Portfolio Website | Create a Portfolio from Scratch

hello there and welcome to a new javascript mastery video this one is quite special i'm going to teach you how to build and deploy your own fully custom development portfolio from scratch usually the process of creating a premium custom portfolio would take you weeks if not months to complete thankfully i'm going to teach you how you can do it in just one video let me show you the project that you'll build it is a premium beautifully designed extremely optimized portfolio that you can use to showcase your projects and land that perfect developer job we're going to create a website from the ground up and on the way i'll also teach you how you can get your own domain and deploy to the internet this is a project for developers of all skill levels we're going to use react nextgs style components and i'll teach you all the best practices that come into play when building a premium website using the newest technologies if you've never used nexgs don't worry the only prerequisite is the knowledge of javascript and a bit of react nowadays your portfolio is your resume people would rather see everything that you can do on this nicely displayed portfolio rather than read through a plain text in a resume it's also your business card you aren't going to print little papers and hand them out to people you'll just send them this link so why wouldn't this first impression be yours you can take it and present yourself the way you want to so with that out of the way let's get started while the intro is rolling scroll a bit down leave a like and comment on what you'd like to see in the next video before we start building out our project let's first get the hosting and the domain name for our new portfolio hostinger is my personal recommendation it has great price to quality ratio extremely fast servers and most importantly 24 7 chat support many times i was stuck and i couldn't deploy my website but thankfully they have a great chat support so you can just contact them and they will solve your issue for you let's see what's offered with some of the most popular hosting plans hostingers plans are extremely cheap i mean one dollar a month for hosting for one website and you'll also get a free ssl certificate that means that you'll have https security in this case we're going to go with the premium shared hosting because it offers a few great things that you need when building out your portfolio it gives you a free email account free ssl but most importantly it gives you a free domain name of course if you want to you can still decide to get single shared hosting and then buy the domain separately as i've mentioned in the beginning your portfolio is your business card for that reason it's important that your domain name is something like yourname.com and that your email is something like contact your email.com these things will make you look professional and they'll make you stand out from the crowd since i've partnered with hostinger they've decided to give you an even bigger discount in the description you can find a link and a special discount code enjoy now let's choose a plan i've selected the premium shared hosting and in here we just have to choose the period of our hosting let's go for 12 months and down below we're gonna choose our payment method and this is the place where you can enter the coupon code in this case that's going to be javascript mastery that's going to give you an even bigger discount on your hosting packages after you purchase it you'll be redirected to hostinger's dashboard i'll see you there and we are here as you can see i personally use hostinger for my brand for most of my websites if you purchased premium shared hosting you should see this claim domain button right there if you purchase a single shared hosting then you can go to domains and then purchase the domain in my case i'm going to click claim domain i'm going to purchase another domain that i'm going to use for javascript master in the future and that is going to be jsmasterypro.com i can click claim domain and if it's available we should get it right away there we go free domain was claimed and we can start the registration in here you can choose your country and then you can choose whether it's a personal domain or a company domain finally in here you have to enter some of your details and finish the registration and there we go now we have the domain now let's go on to the main part of this video and that is building your own custom portfolio website and then in the end we're going to host it with hostinger now let's start coding if you ever get stuck during the video make sure to check out the github repository in the description in here you can find the finish code for the entire project while you're here make sure to leave a star not only that you can find the finished code here this repository will be our starting point as well i've created the starter files for our project so that we don't have to waste time on the setup and focus on things that matter you can download the starter code by switching the branch from main to starter then click the code button and finally click download zip this is going to download the zipped project code i've put my zipped folder right here on the desktop alongside my open empty visual studio code window if you prefer another code editor that's completely fine but in this case we'll be using visual studio code to unzip this simply double click it or extract it and then simply pull the extracted folder right next to our zipped one finally drag and drop the extracted folder into our visual studio code this is going to open our project and the only thing we have to do to get started is go to view terminal and then right inside of here run npm i this is going to install all the necessary dependencies there aren't many though if you visit the package.json you should see that the only dependencies that we have are styled components styled normalize and react icons it might be a bit weird but we are using styled components i haven't done that in any of my other videos usually i style my react or next.js applications a bit differently but in react there are so many ways to style your components and not a single one of those ways is the best that's why it's always good to know all the ways if you get a job you might need to know how to do style components for that specific project so that's why it's always good to be exposed to a lot of different ways of doing something with that said our dependencies are installed and we can simply run mpm run dev this is going to start our next js application and we should be able to see the starter code on localhost 3000. if you did that you should be able to see a dark screen with all of the most important sections that our portfolio is going to have if you can see this that means that your starter is working and that we are ready to start creating the portfolio to showcase all of your skills we can go back to the code close everything and get things going this project is using nexgs but if you've never used nexjs before don't worry next is simply react and react is just javascript so the only knowledge you have to have is the basics of javascript and the basics of react everything else will be taught in this video and after all next gs is just a framework an addition to react so it's nothing more than simple and plain jsx code also as i've mentioned before we'll be using style components to keep things as brief and as informational as possible you won't be needing to write these styles yourself i've created the starter code in the components and each component already has its own styles that way you'll be able to simply write the jsx and the logic of our project and then if you want to change something make it custom make it your own then you can enter the styles and change some of the things you'd like with that said let's close everything and let's start creating our project let's start from top to bottom the first component on our list is a header component as you can see we are already importing a few things in here first thing being the link coming from next link link is going to allow us to link different pages or different sections in our own page then we have some icons coming from react icons package and finally we have some styled components so style components are simply components coming from our header styles and you can see them right there for example the container is simply a div with these following styles nothing more nothing less then we have for example the div 1 which is another grid area we also have a few more things for example novelling now link is nothing more than an anchor tag with the following styles these are the components we'll be using so if we go back we now know that we have some specific or the style components that we can simply use in our jsx let me show you what i mean instead of this div with the text header inside of there let's create a container component our container is going to have a div 1 inside of it and that div 1 is going to have a link component our link is going to have the href pointing to nowhere so just slash and then inside of this link we're going to put an anchor tag so let's create it it is going to have some inline styles just to keep things easy and it's going to have a display equal to flex as well as the align items equal to center and it's also going to have a color equal to white great so these are some of the inline styles we can write but as you can see it's just so much better to create a style component now you can see the difference finally we're gonna have one icon inside of this div and that is going to be di and css deck and that is going to be a self-closing tag with the size property equal to 3 ram finally next to our icon we're also going to have a span and that span is simply going to say portfolio let's save it and take a look in the browser as you can see we already have a nice icon and we have a portfolio text right there let's keep creating our navigation bar below the div 1 i'm going to create another style component which is going to be dev2 and then inside of there we're going to have the li first li is going to have a link and that link is going to have the href equal to and we're going to go to hash symbol and then projects this is going to make it nicely scroll to the project section in our own page finally inside of there we're going to have a nav link component and that nav link is simply going to say project great now we can replicate this li two more times the second thing is going to go to tech and then in there we can say technologies and then the last thing is simply going to say about and we're going to point to the about section let's save it and see how it looks in the browser there we go we have our portfolio and we have three different nav links that already look good they are styled they appear nicely in row here with a specific font and when we add the sections they're going to immediately scroll to those sections see how easy it is creating something using style components of course if you want to play with the styles change something change fonts you can do so really easily you can create new style components right here in this file or you can change the existing style components by changing the styles you can also change some of the things that i've made to be modular inside of the themes default js you can change all the fonts and colors this is dynamic so that whenever you change something in here of course if you include the link to the google fonts it's going to be reflected across the entire site so you can make it completely modular continuing with our header we're going to have a third div below our div 2 and that div is going to contain social icons so we can create social icons and that is going to be not a self-closing tag but it is going to have an ahref which is going to point to something like let's say github so in here i'm going to say https column forward slash forward slash github.com and then inside of there we're going to put a github icon so we can say ai fill github this is going to be an icon and we can give it the size equal to 3 ram we're going to replicate this two more times the second link is going to point to something like length in so we can say length in dot com and then in here we're gonna have ai fill and we can say length in finally the third thing is going to point to our instagram so i'm simply going to change this to instagram.com course you can put your own links right there and the last thing here is to rename this to instagram now let's save it and let's take a look at our header in the browser there we go it already looks so good we have this hover animation also the hover animation when you hover over the social icons this portfolio text seems a bit small how can we modify that this part is going to teach you how we can modify every single part in this application first we're gonna see where that is being mentioned and that is here we can see that our span is just that a span it doesn't have any specific styling so let's make this span into a style component i'm going to go to the header styles and open it side by side right below our container here i'm going to create one more styled component and we're going to follow the same structure that's going to be export const and let's name it something like span that is going to be equal to styled dot span and then you open a backtick go to the second row and close a back tick inside of here you can write all the styles for our span in this case i simply want to do font size is equal to and of course you can use some of the already defined values but in this case let's simply use to ram finally we have to import that component right in here that is going to be span and now we can use that style component right here with a capital s span instead of the lowercase s let's save it and take a look in the browser it already looks so much better but now i can see that our portfolio is not aligned with projects technologies and about so let's just push this entire link about 20 pixels above we can do that by simply adding some styles in here again to show you the difference how if you keep adding some styles right there to inline styles it's just going to get really messy margin bottom and that is going to be 20 pixels now that everything is properly aligned we can start with the hero section which is one of the best sections of this project because it has a nice header and an amazing svg animation on the right side let's close our header and let's start with our hero section as you can see in the hero section we are already importing some of the styled components from the global components we have a section section text and a section title and we also have some things from the again global components and we have the left section coming from hero styles component which is a styled component so you might be wondering the only thing we have in here is the left section where are these sections section text and section titles coming from well these are styled components as well but these are not hero specific style components these are some of the style components we want to use across our entire application we always need sections section texts section titles and buttons that's why we've created the specific styles folder with global components inside of here we have all of the style components that we're often going to use across all the files with that said let's start creating the jsx of our hero section we can remove this div and let's create a section our section is going to accept two different props it's going to be row and also no padding then inside of there we're going to have a specific component called left section inside of that left section we're going to have a section title that section title is going to have the props of main and also center finally we're going to say welcome to then we can put a break tag right there and we can say my personal portfolio of course feel free to change this text to something like hello there i am or i'm doing development services or anything like that make this completely your own and make it stand out now below our section title we're also gonna have the section text in our section text you can simply put some text about what you're doing in my case i'm simply gonna say the purpose of javascript mastery is to help aspiring and establish developers to take their development skills to the next level and build awesome apps that's the whole point in your case in here write your value proposition what would you be offering to your employers or what projects can you help them build finally below our section text let's create a button this is going to be a call to action style component button and in there we can simply say learn more you could point this button to any specific section of this page or you can point it directly to your email in this case let's add an onclicklistener and let's create a callback function and set the window.location to be equal to well let's do https google.com doesn't really matter you can change this to anything you want we won't be needing these props so we can delete them now that our hero section is done let's check it out in the browser this looks extremely good already we have a nice section title section text and we have a learn more button when you click on it it's going to point to google or your email or anything you like it's a call to action button if somebody wants to hire you or check out more of your work they can click this button now before heading to the project section the only thing you have to do is go to the pages and then index.js and then in here we need to uncomment this section grid as well as the bg animation this is going to give us that nice svg background animation with that said let's head to one of the most important parts of any portfolio and that is the project section let's open up our projects folder and go to projects.js this is the place where we're gonna implement the jsx code for the entire project section as you can see we are importing some of the styled components and these are coming from project styles so these are the specific projects style components and we also have some of the global style components section section divider and section title finally we have something known as constants being imported as project in a minute before we start using this variable i'm going to teach you how you can start using constants as well and how that's going to separate the logic from the content that's going to make your applications so much more readable and it's going to decrease the number of lines that your react components have for the better with that said let's start creating the section this is going to be yet another section and it's going to have a prop of no padding it's also going to have an id equal to projects just so that we can scroll to that point and inside of there we're going to have a section divider section divider is a self-closing tag below that we of course need a section title it is going to have a main property and it's going to simply say project below that we're going to have a grid container inside of our grid component we want to map over our projects and this is really important you could do something like this create an array that has 0 1 2 and let's say that you want to map over those values you could do that right here we can say dot map and then map over each specific project and finally return something let's say that we want to return simply that text that's inside of there so let's return a div and then inside of that div we want to return the actual project let's save it and take a look in the browser there we go as you can see we have projects i'm going to make this a bit bigger and you can see that we have 0 1 2 in a nicely styled grid as we are using grid container and style components we already have a nice layout so i can even create a few more and they're going to be stacked nicely as you can see zero one two three four five looks good and feels good what i wanted to teach you here is let's say that you had projects with a bit more data so each one of these projects in an array is going to be an object and that object is going to have for example a title project 1 it also has to have a description description is going to be something long so we can say this is a really really long description about this project great so that is the data for just one specific project let's say that you want to have more you'd have to do it like this great so now we have project two project 3 and project 4. now if you wanted to go over this you would say project dot title and below that we can say project description we could have added a break tag in the middle just so it's easier to look at it and there we go project one this is a really really long description and we have a grid stacked with all of the projects but if i go here can you notice something that's not good about this code we are not separating the content from the logic everything is kind of in here in one place to make that just a bit better we can of course extract these projects and then we can put them right here at the top let's say something like const projects demo and that's going to be equal to this array we just copied now we can simply say projectsdemo.map as you can see this gives us the same results and it looks just a bit cleaner but still we have all of these lines in our react component file so let's extract them somewhere else in this case i've created a special constant for projects so that's just a variable an array of projects that we're importing from the specific folder in our project let's find it it's under constants and constants right there there we have an exported array of all the projects with everything the title descriptions images tags sources visit and id that's what i meant when i said let's create constants and let's separate the logic from the content with that said what we can simply do is in here map over the project and then display all the important information that a project has for now let's simply start with project.title in this case i'm going to remove this and let's see if we can see the titles of all of our projects there we go we have mern memories e-commerce webrtc app and unichat by the way these are only some of the best projects that you can find on javascript mastery channel on this youtube channel we focus not on teaching through theory but on teaching through building projects so if that's something that interests you definitely make sure to subscribe leave a like and a comment with that said let's continue let's create a real representation of what our project is going to look like instead of a div we're going to return a blog card that blog card is going to have a key which is going to be equal to project.id then we're going to have an image an image is going to be self-closing tag that's going to have the src equal to project dot image below the image we're gonna have a title content component and then inside of there we can have a header three that header three is going to have a prop of title and then in there we can simply say project dot title one more great tip is whenever you notice that you're repeating something really often like project.id project.image project.title and so on you can simply destructure everything coming from this project by putting it in curly braces so let's do that we want to destructure the id the image the title and let's immediately destructure all of the other things we're going to use description tags source and visit description tags source and visit great now we have everything we need and we can remove this instance of a project because we immediately have all the variables ready for us to use below our header 3 we're going to have an hr component this is a capital hr it's a special style component and below our title content we're going to have a card info this card info is going to simply say description let's see how it looks like in the browser and would you look at that we have this nice projects heading and we have all of our images of our project including the title this nice hr and the description for each specific project of course these are not the projects you've made well they could be if you watch some of the videos but this is the place where you want to put your own projects titles and descriptions considering that we are using constants it's incredibly easy to do so just go into the consonants file change the title change the description change the image tags source visit and everything else your changes are immediately going to be reflected in our code because we're simply mapping over those constants one more tip is where to put the images we're going to put images in the public folder so that's going to be slash images and then in here you can put the images to all of your projects just like so with that said now you know how you can change the content of your project so let's keep adding more things to it below our cart info still in the block card we're gonna have a div that div is going to have a title content and then inside of there we can simply say stack we're gonna explain what stack was this project built with then we're going to have a tag list and then inside of that tag list we can map over the components that's going to be tags.map and then in here we get each specific tag we're going to also take the index from our map and let's return something make sure that in here we have parentheses not curly braces same things goes for here because that's an instant return with that said let's map over our tags by simply specifying a tag and then in there we can render something like a tag of course each thing in a mapped array needs to have a key it's not usually the best practice but it's simple enough for this case we can simply use the index let's save it and take a look as you can see our marin memories project was built with express react and node e-commerce was built with react and javascript webrtc was built with react and webrtc unichat was built with react chat engine and firebase all of these things are coming dynamically from our projects you can see we're mentioning them right there and we're using the logic in our jsx to render them properly for each specific projects we map over of course the final thing just below this div is going to be a utility list inside of there we can render some of the external links so let's create it external link and that external link is going to say code and that external link is going to have the ahref equal to something like visit this is the link to visit the code for this specific project we can duplicate this line and change the code to say something like source this is the link that's going to lead us to a live version of our website of course we can also change the href i see that i've made a small typo this here is not external link it's rather external links with an s at the end let's save it and if we scroll down each one of our projects now has two buttons one that leads us to the code and once that leads us to a real source of the website great this is it for our project section the next section is going to be about the technologies that you can use as a developer you know the drill to start creating our technologies section we can open up the technologies folder and the technologies file this is the place where we're going to use all of these imported components and icons to create our technology section so let's get started as with everything our section is going to be just that a section it is going to have an id equal to tech just so we can scroll to it and we're going to have the section divider which is going to be a self-closing tag just like so then we're going to have a section title which is simply going to say technologies then below the section title we can put our section text and then in here you can say something like i've worked with a range of technologies in the web development world from back-end to design of course you can modify this to suit your specific text stack let's save it and see how does it look like let's scroll a bit down and you can see we have this nice header that simply says technologies i worked with a range of technologies in the web development world now let's list those technologies in a nicely designed way now that i think about it it would be great if we put our code editor on the side that way you can always look at the changes live i've put my editor to the side but let me show you how responsive our website is it is fully responsive and it makes it so that everything looks good on all device sizes see how if i keep doing this it's going to turn into a mobile view just like that let's take a look there we go we have everything we need at the top and if we keep scrolling down everything is nicely stacked in one column now let's continue implementing our technologies section but i'm going to split it half half so that you can see the code and that you can still see what we're building below our section text still inside of the section we're going to create a list component inside of our list we're going to have a list item and that list item is going to have an icon that's going to say di firebase and that is going to be a self-closing tag with a size equal to 3 ram grade as you can see we have this icon right there below that we're going to have a list container just like so that list container is going to contain the list title that's simply going to say something like front end and also just below the list title we're going to have a list paragraph so list paragraph and in there we can say something like experience with we can put a br tag and then we can say react.js as you can see if we save it that already looks really good we have the frontend experience with react.js now we can copy this a few times by this i mean the entire list item let's do it two more times and let's change the content the second thing here is going to be the backend and we can say experience with and let's change this react to node.js and databases if we save that you can see we have the backend let's just say node to keep it in one line and finally the third thing is going to be experience with in this case let's say our developer is also a ui and the ux designer and we can say experience with let's do something like tools like figma let's save it and take a look now we have this part the last thing we have to do is change the icons the first one can be di react then we can leave the firebase as a database for the second one and the last one is going to be disend like zendesk like any other tool that you can put in here but if you want to put your custom icons definitely visit react icons and then in here you can find any icons you like with that said we have our icons and we have our technologies section completely done let's expand it a bit and see how it looks like on desktop looks extremely clean we have our technologies front-end back-end and ui and ux that's great there we go i unzoomed a bit and our technologies section is done we have a title we have some text and we're listing all of the technologies that we know how to use it looks like to me that we need to add a br tag below this section divider just to kind of separate it a bit that looks much better and let's try to see it in full screen yep starting from the top we have our personal portfolio we have our project and now we can also scroll to our technologies that show what we can do as developers that means that our technologies section is done and we can keep moving forwards now the next section is going to be the timeline to create a timeline let's collapse all of our files go to source components and then timeline right in here our timeline is going to be just a bit different as you can see we are importing some things right here let me just make this a bit bigger and we also have some variables like total carousel count but i have a lot of commented out code right there that's because we have some special logic when it comes to scrolling through the carousel checking the active item and then handling the click as well as the scroll and then we also have to handle the screen resize i'm gonna explain every single part of this code but before we begin with that let's of course create the actual timeline to do that we can create a section that section is going to have the id equal to about and then in there we can of course have a section title that section title can say something like about me or we can change it to timeline whatever you'd like and in here we can have our section text below our section title we can have our section text and then in there you can put anything in this case i'm simply going to copy the javascript mastery tag which is the purpose of javascript mastery but in your case you can put how did you start learning something what are some of your big milestones and etc below our section text we're going to have our carousel so let's create a carousel container and inside of there we're going to loop over the timeline data but before we do that we have to provide a ref element to this carousel ref is going to be simply carousel rev of course this carousel ref we don't already have so let's scroll to the top and let's simply uncomment this that's going to give us access to the carousel rev now let's keep moving forward inside of our carousel container we want to create an empty react fragment like this and we want to loop over the timeline data so i can do it like this time line data dot map in here we get each specific item and we also get the index now of course we want to instantly return this by putting parentheses and let's check what our timeline data is if you scroll to the top you can see that we are importing that from constants as well we already know what that is so let's click it and as you can see this constant is just below the projects we've already encountered but this is simply another array with a few objects and they have the year and the text of what happened that year for example 2017 started my journey 18 worked as a freelance developer 19 founded javascript mastery shared the project and started my own platform these are the goals or some of your timelines and milestones now that we know what we're looping over let's actually show that data in here we're going to have a carousel mobile scroll node this is going to be a special carousel item that's going to look really nice on mobile devices and on desktop devices in there we're going to pass a key the key is going to be equal to the index and the final is going to be equal to index is equal to total carousel count minus 1. that means that we always want to have a final carousel item and that is going to be equal to total carousel count minus 1. again that total carousel count is just a variable that is right there it calculates all of our items and gives us the length that's it inside of there we want to have a carousel item that carousel item is going to have a lot of props so i'm going to put this component like this first it's going to have the index index is simply going to be equal to index it can also have an id and that id can be equal to a string of carousel underscore underscore item dash and then in here we're going to use the index we need to know on which carousel item are we currently on it's also going to have an active property and that active is going to be equal to the state of active item again this is undefined so we have to scroll up and we have to uncomment our state at the start our active item is zero but we'll need to move forward and increase the active item number with that said let's scroll down do we need anything else well we're gonna need an onclick property and on click we're going to have a callback function with the event and we want to call a handle click function handleclick is going to accept the event and it's also going to pass the index of a specific carousel item once again our handle click is not defined so let's find where it is right here and let's uncomment it as you can see our handle click accepts the event and the index first of all it prevents the default because we don't want to refresh the page once we click on something then it checks out if there is a carousel ref that means does it exist once we click it we simply want to scroll it to the left this here is just some value that i found works best for scrolling left depending on the specific width of that specific element with that said let's scroll down and if we save that we should maybe already see something well not yet because we haven't provided the content for the carousel each one of our carousel items is going to have a carousel item title so right inside of here carousel item title great inside of there let's put a year that year is going to be equal to and that is in this case item dot year because you can see each one of our timeline data items is just an item that has the year that you can see right here so if you save that you should be able to see all the years we have listed right inside of here next thing that we have in our title is going to be an image that's rather going to be an svg of course it's almost impossible to write svgs by hand so i'm simply going to paste it here and you're going to get the code as well so just scroll down in the description where you can see all the files there you should also see the svg for the timeline that svg is simply a line that points from one year to another but later on it's going to look so much better just below the carousel container let's add some carousel buttons so just below here i'm going to say carousel buttons and in there we're going to loop over all the buttons we can do that by again opening a dynamic block say timeline data dot map we again want to loop over the items and we need the index and then we want to display a button for each timeline data that is going to be a carousel button self-closing component and then in there we can pass some of the values first one is going to be the key which will be equal to index then the second value is going to be equal to index itself then we need to know which item is currently active by providing that active item after the active item we also want to have the on click and this on click is going to be the same as the on click we've had previously it has the event and we passed that event alongside the index finally the type is going to be equal to button now i've just noticed that this is not going to be a self-closing tag so that you can open it and then inside of there we're going to have just one more component which is going to be carousel button dot and that will be a self-closing component that's going to have the active equal to active item we're almost done with this carousel we've added all these buttons but we cannot see them that's because you can only see some parts of it on mobile devices but before we check how responsive it is let's scroll a bit up let's find our carousel item title and just below that we're gonna have our carousel item text inside of there we want to render what did we do that specific here and that's going to be equal to item dot text if you save it you're going to see that this is starting to look so much better now we have 2017 started my journey 18 worked as a freelance developer and so on this already looks so much better but now let's check how responsive it is i'm going to open the developer tools go to the mobile view and now take a look at this the screen is not wide enough you can see only half of the number nine but if we keep scrolling you can see that now you can scroll nicely through all of these values and it seems incredibly natural for mobile devices we also have these dots which are not working currently because when you click on them they simply point you to the top of the page but let's implement the last two parts and that is the handle scroll and the use effect so one more thing we have to do is go to our carousel container next to our ref and then in there we're going to have the on scroll property which is going to be equal to handle scroll of course we have to go above and we have to uncomment this handle scroll this is doing a similar thing to our on click it's simply getting the index based on the specific scroll and then it's setting the active item based on how far we've scrolled finally here is our use effect and we're going to use that to simply snap back to the beginning of scroll when window is resized it's going to make us avoid a bug where content is covered up if coming from smaller screen now let's save it and check it out as you can see we can scroll and the dots actually move that's great and let's check it out in the full screen on desktop devices there is no scroll all the items are visible right away but if we try opening something like a laptop same thing everything is visible right away let's try to go for a tablet same thing everything is visible right away we don't even see the svg because they're so close together but if we go to something like a large mobile device you can see now we can actually scroll and that's what this carousel is about let's scroll again looks good on smaller devices and let's try with the smallest of devices to see if that's going to work only two specific timeline items visible but we can still scroll and it feels and looks great the last thing we have to do is add a section divider right here at the bottom below our carousel buttons and more importantly we need to scroll up and we need to uncomment our scroll function our website is going to have issues on mobile devices if you don't uncomment this this timeline component was a bit tougher so i'm going to leave the entire timeline file for you in the description in case you've made a mistake somewhere or if you didn't copy everything properly that way you can simply fix it and be on your way to build the accomplishments section let's do that right away our accomplishments section is going to be much easier than our timeline you can head to components accomplishments and then in here you can see that we also have some of the imports but we also have some constant data of course you can do what you learned in this video and that is to take this data and then move it to the constants i'm gonna leave that part to you but if you want you can keep it here as well because it's not that long it's only six lines with that said let's start creating our layout we're gonna have a section and that section is going to have a section title inside of the section title we can say something like personal achievements or accomplishments and then below that section title we're going to have boxes that is another style component it's going to be boxes not boxed and inside of there we want to map over this data so we can say data.map for each data item we're going to get a card and an index and we want to return a box so let's create that box the box is going to have a key which is going to be equal to index and inside of there we're going to have two different things first one is box num box number and in there we can simply specify a card number like this card dot number and we can put a plus next to it and then below that we're also going to have a box text and in there we can simply showcase the card dot text let's save it and would you look at that personal accomplishments we have four different parts and all of the data is coming from here we have 20 plus open source projects 1900 github followers and 5 000 github stars of course you can change this data to suit your needs like how many projects have you built and so on with that said but the personal accomplishments section is done i i guess you now believe me when i said that the accomplishments section is so much easier to do than the actual timeline great with that said the only thing we have left is the footer so let's just close the accomplishments go to our footer component right here and let's implement it again we're importing some of the components and the footer is not going to be that hard it's actually going to be similar to our header because we need to have some links and we have to have some social icons so let's start creating it in here we're going to have a footer wrapper component then inside of there we're going to have a link list this just reminded me of a linked list but don't worry it's not a data structure it's just a style component but if you'd like me to create some data structures and algorithms videos in javascript i'll definitely do that please let me know in the comments or on the other hand let me know in the comments whatever you'd like me to post next any kind of video title great with that said let's keep going link column is going to be inside of our linked list and we're going to have a link title in here we can simply say call and then below that we're going to have a link item our link item is going to have the href and in there we can say tell is equal to let's do 111-111-111 this is going to be your telephone number if you want to leave it there and again i'm going to copy it and paste it inside of the link item let's save it and you can see now people can call you we have a nice hover animation and if they click here they'll be able to make a call now we're going to copy this link column one more time and in the second time we're going to say email and in here we're going to have href is equal to not the number but rather male 2 colon and then you can enter your email great i entered my email and i'm going to put it here as well if you saved it you should be able to see that now we have the call and we also have the email final thing that we need to implement are going to be the social icons so just below the linked list we can have social icons right there more specifically social icons container that's going to contain the actual icons so first of all we can put a company container right there and then inside of that company container we can have our slogan our slogan can be something like innovating one project at a time but of course you can put anything you want in here great now let's go for those social media icons below the company container we're gonna have social icons remember when i told you that our social icons are going to be similar to the one in the header so let's go right there and let's just copy our social icons github linkedin and instagram simply paste them just below the company container right in here great let's save it and there you go our three icons are right here also don't forget to wrap our social icons with a social container like this and then put it at the end before the instagram tag great and with that said our next js portfolio is now fully done let's open it in desktop view and take a look at that we have this nice header at the top we have social icons welcome to my portfolio with the learn more button you can see that we have some projects right there with two buttons with code and the source below we also have some of the technologies like some more general things like front end back and then ui in the about me section you can write something write your hobbies your name then in here we have our timeline we have our personal achievements and at the end we have the call and email buttons as well as the social media icons and that is our portfolio of course it is fully responsive so if i do this and open up my iphone x view you can see it looks incredibly well on desktop devices as well of course this is currently visible only to you on your device if your terminal is running but let's deploy this with hostinger to your own personal domain so that you can share it with your friends and potential employers we're back inside of hostingers dashboard we already have the domain now is the time to set up the hosting i'm gonna use my premium shared hosting click setup right there and it's going to say welcome follow the guided setup let's click start now and now you can choose what are you deploying in this case we'll be deploying a portfolio website so i'm going to click here we're going to enter a domain in this case that's going to be jsmasterypro.com i'm going to click select and in this step we're simply going to click this link at the bottom which says skip i will start from scratch i'm here to guide you so let's do that and that's the finished setup we can click finish setup and that's going to redirect us to the dashboard the site is going to be up in just a minute and then we're gonna upload our files there we go our website is ready let's go to control panel once that is done you'll be redirected to here and you can click manage on your hosting once you're here you can scroll down and find the file manager let's click it this is going to open up the hosting panel you can go under domains there you'll see your domain name and you can enter into the public html in there you'll see just a default php file and you can delete that one now you can go back to your code and then in there you can stop your terminal from running by pressing ctrl c after you do that you can run mpm run build this is going to create an optimized production build and it's going to put all the files into an out folder it's right there let's open it up in our file explorer and finally the only thing you have to do is open up that out file and simply drag and drop all the files from there and to here it's going to check if all the right files are selected and simply click upload if you haven't already while this is uploading now is a good time for you to press that like button and leave a nice comment it really helps with the youtube algorithm okay all of our files are here we can now close our hostinger file manager we are back in here and before we check out our website let's activate the ssl certificate you can scroll down and there you will see ssl click on that and the process of installing an ssl using hosting gear is incredibly easy just pick your domain and click install ssl if you have recently purchased the domain it might not already be fully activated then it might say failed but for me it worked immediately if you're having any issues with the deployment make sure to open this chat window on the bottom right and they'll be able to help you right away with that said let's go to our dashboard and on the left side you can see main domain jsmasterypro.com for you something different is going to be here let's click it and check it out and there we go your portfolio is now live and deployed on your own domain you're now ready to present yourself as a solid developer who's built a lot of project and who's built this great portfolio with that said thank you so much for watching and see you in the next video you

Channel: JavaScript Mastery

Views: 217,950

Keywords: javascript, javascript mastery, js mastery, master javascript, portfolio website, personal portfolio, development portfolio, build a portfolio website, build a portfolio website with react, portfolio website react tutorial, portfolio website react js, portfolio website nextjs, web development portfolio, next js portfolio, next js portfolio site, next js portfolio tutorial, styled components, nextjs, next js, react nextjs project, portoflio hosting, portfolio domain name

Id: OPaLnMw2i_0

Length: 58min 54sec (3534 seconds)

Published: Fri Jun 11 2021