Making a solid portfolio website is an important part of getting your career started in web development. It is designed to show off the projects you've worked on. But the portfolio's design and functionality is also an indication of your skill and creativity in design and development. There are a lot of exceptional examples out there, I looked at about 50 different portfolios to gain inspiration before I made my own. I found these by searching Google for best developer portfolio websites. Looking at these can give you ideas on themes like minimalist, for example, components like different types of navigations and just how it all comes together overall.

I'll go over a few now. So the first one here is by Tobias Allen. So you can see that This is a pretty straightforward website, you can see that there's some animations as we scroll down. It looks like things have kind of been broken up into grids with different colors. And see we have some splashes of different images here. I really like the project headers for each section.

So every time we switch to a new section, we're going to have those. So you can see again, with work, we have that and you can see that it's really cool how shapes have been incorporated, but you can still have this real image here. And just a very solid overall design, very simple idea. Essentially, you're just creating all of these separate rectangles and you're smashing them together into each section and then each section has its own title. Alright, very cool. Let's look at another one.

So this is a French website and I believe this is the design studio. So you can see as we scroll down, we have some videos, each of the projects kind of lights up as you hover over it. So that's a cool way to kind of display your projects like in a string like this, and then having some kind of motion graphic underneath. Looks very cool. And take a quick look at the navigation. So I really like this navigation.

It's very unique. It kind of comes in cells, and then you can kind of scroll and hover over stuff. There's an animation on every hover. That's very cool. And then we can close it. That looks like all right, awesome.

Yeah, so I think that's we had some cool things within that. You can see also that they've customized the scroll bar to just be this black rectangle instead of having the traditional scroll bar that you would have. Okay, let's move on and have a look at another one. So this one is toy fight. This one's really cool because It kind of reflects where your mouse is moving. That's, that's a very cool feature, you can see that they've done some 3d modeling for this website specifically.

So you can see when we scroll to that everything kind of animates in, kind of fades in, which is which is pretty cool. So that's something to consider having some fade in elements. And as we scroll to the bottom, you can see we have this 3d model. So they're using a lot of 3d modeling, but you can still have animations as you scroll like they have here. And you could still, maybe even try to incorporate 3d modeling, if you're feeling ambitious. Alright, let's have a look at another one.

So this one is actually featuring a video background. This is kind of similar to what we're going to do. And you can see as we scroll down, we have the projects. And so as you keep scrolling, each little scroll, you can see brings up more and more information until you have all of it. And then you have video playing in the background. And if we keep scrolling, we'll go to like a little bit of a description, and then it has a preview there.

And then some more. This is a slideshow, I guess, have some images related to it. And then if we keep going, it'll go to the next project. So the same kind of format as you slowly scroll up and down, you get more and more information. And so I think that's a very cool idea to to kind of scroll through each of the projects. All right, very cool.

And the last one we're gonna look at is very ambitious. It's an interactive resume, so it's kind of like a little game. So when you click on it, you can use the scroll down or the keyboard, Down Arrow. So I'm just going to use the scroll wheel. And you can see that we can actually go back in Fourth, just kind of cool. So level one about you can see that it shows off his skills here.

And I guess you can see that he lives and works in New York. He's a sports fan. And then as we keep scrolling, we can see his graphic and web software skills, and then his programming skills. And then his experience, they have each of these elements popping up for each of the jobs that he's done. And we can skip on to awards. So we go with this balloon, and then it goes up, and then we have banners for all these awards.

So it's a very, very, very, very ambitious project. I wouldn't recommend trying to do this for your first portfolio and then ends here with the contact page. Very cool. I wouldn't recommend this for your first attempt, but it just shows you how creative you can be with a portfolio website. Okay, so we can close all these. And I'm going to show you what the final project looks like an example of the final project anyway.

So I would say that we need to have these four main elements. And the first one is our homepage. So you can see that we've constructed this with a video background. We have a title here, we have our links to our social icons here. And we have our navigation. So we're gonna go down to the about section.

In this section, we have a picture, we have some explanation, and then we have a button to view our resume. Moving down to our project section, you can see that we have screenshots in mock ups. For each of our projects. We have also links, these will be links to our live project, and then this will be links to our GitHub page. We don't have much explanation. I like to just leave all the explanation on the GitHub page itself.

And if we go down To our contact page here, you need to have some type of way for people to contact you. So in this case, we made a mock up with business cards. But you could also use a video background here with a mail to link in an h1. That's something we'll explore later on in the course. And then we have a nice footer at the bottom here. And that's basically it for the example.

So the course is final project is constructed and taught in a way that will allow you to customize fundamental components, changing the theme and content in your own version. So you can actually choose any colors that you want. You're gonna choose different icons. If you have different social media links, you'll be able to as I said, use a video background for this if you want, you can change this video background to be anything you want. You can change all the text to be your own custom text that you like. There's many, many many different ways that using this layout, you can create your own unique version of the project.

So I hope you're excited to finally get started because that's what we're going to be doing in the next video. All right, I'll see you in that one. Bye for now.