Hi everybody and welcome to my new series on how to create a simple portfolio website. So the goal of this series is I'm going to take you through all the steps from coming up with the content coming up with the design actually building out the design and deploying it um as well as including a bunch of different tips on what you can include on your portfolio to make you really stand out. Um I'm gonna have some accompanying blog posts um that will be up with this as well, so be sure to check for that in the upcoming weeks, but for now, I want to get started on the first episode of the series, which is going to be designing how we want the layout of our portfolio to look. So this is the example one that I have currently come up with. So this would just be, we just like this full screen here. So this would just be my full website here. So this is what you see when you first walk onto it and as you scroll down you get to see a skills section, a section that leads you to some external resources of different things that I built an example of a tutorial that I made on code cast as well as a link to the rest of my tutorials and about section and a contact section. So it's pretty simple, pretty straightforward. I designed it in Fig MMA and it's all just on a single long page that I did here. So because something like this will take a little bit long to fully develop out in Fig MMA, I will be building out this structure for the sake of the tutorials but I will go ahead and kind of show some simple tips of how to get started in Fig MMA and how to start building things here. So we'll probably try to build out something like this top section here. So let's go to this new page over here and we're going to start up in this toolbar up here, you have a bunch of different options and we are currently also on our design tab here as well. So what we're going to do is we're going to create a frame here and we're just going to draw any shape here and then I'm gonna go over to the width and I'm gonna make the with 14 40 because that's the standard uh with for screens that I like to just build off of for the kind of the larger size screens um and we'll worry about making it responsive later. I would normally make websites and applications mobile first, but in the case of a portfolio for developers, most of them will be viewed on a desktop. So I actually want to develop this one to be more desktop centric and then we'll develop it and scale it down responsibly when we start doing our coding, so we can make this a little bit longer but for now let's just say we want our basic design here, so the strength of the structure that I generally would recommend. Um you can have multiple pages on a single page, depends on how much work you have. If you're a junior you're probably gonna want to stick to possibly more of a single page because you won't have as much to showcase as a senior developer that has been working for many years. Um So at this point let's kind of focus on some of our stronger works and actually make the portfolio itself one of our works. Yeah, so I'm sticking to just four main sections. I'm just doing this introductory header section, I'm doing a skill section including skills on both related to actual development and school, skills related to non development totally up to you what skills you want to conclude the portfolio needs to be geared towards whatever you're applying for. Um a section of excuse me, a section of my work and then just a section of about me as well as my contact, I have included my socials twice here, that's not super necessary. Um But I did it, so let's go ahead and build out just a bigmouth this this little top section here. Um so we can just get a use of using it there. So the way that I like to do it is kind of come up with my general um design um like plan beforehand. So I like to kind of pick out my colors, pick out my fonts and stuff like that. So I kind of can have that idea of what I'm gonna be working with, there's tons of inspiration that you can look up your portfolio websites. I stuck pretty minimalistic lee, you're extremely welcome to copy um, and then manipulate what I've done here. I will share the this here as an open resource um, for everyone to use on Fig MMA. Um, but one of the sites that I would recommend, um would be, it's called coolers and they allow you to make your own color schemes. So you can do it either yourself by using their generator and what you can do is you, every time you hit the space bar, it will reshuffle at all. And then if you like a color, say this one, you'll lock it and then you hit the space bar until you find another color you like. And let's say you like this one with it, then you'll keep going and it will try to keep compiling colors that are kind of similar and go with it for you. If you don't love design. If design is not your strong suit and you just kind of wanted something easy, you can go and explore some trending pallets as well and pick something that's straightforward and popular and has everything for you. So I'm actually gonna go with this one for the sake of this here. I'm gonna open this, the generator and then I can click on any of these colors and just copy the hex by clicking on this. So I think what I'm gonna do is I'm going to start with, I'm actually gonna make the blessing, I'm like the background darker on this one. What click on the wrong thing? So we'll do this so we'll go over, this will be our main background are Phil is over here, definitely give all of this kind of an experiment over here. Um you're gonna be the design section for now, um prototypes, a little bit different. I have worked with this yet, so I've just mainly been using the design and the inspect. So the the inspector will give you all the information and you'll see me using this a lot when we actually go to develop it because I'll be referring back to the sigma design when I'm developing for now, we're going to stick in the designing taps. So what I'm gonna do is I'm gonna change this hex color to the one I just copied which is going to be our background color there. Let me just go ahead and shut down my discord because I think those notifications might be coming through to you guys and they're a little bit annoying. Um And then what I'm probably gonna do is I'm probably going to start with something simple like hello. So we'll do a big text box and let's say hello now we can edit this roboto, you can look up if you're like the most popular fonts. Most popular fonts, google fonts. Uh, Sigma does work with google fonts on here. Um, so if you look up, like again, if you're not strong design, look up what's trending, look up, what's popular, look what people are really enjoying at the moment. Everything that sends sara right now and it's very simple, tend to be more um popular at the moment. Um I think we'll use railway for this project right here. Um, I used Roboto for my other one. So use railway, we're going then you can change the weight to be whatever you want. There probably do an extra light and we'll make it, let's say like super big. Hello, click on this to add it. Hello? Um I am, let's say bob smith if it's doing like going underneath cause you don't have enough space just go back to the move here. Um or maybe I think it's the hand. Yeah, yeah. And I broke in. There we go and you can just extend it along there. I'm going to highlight this one and change the bottom font to a little bit of a darker one there. Or two different weights. Sorry, not darker. I am bob smith and then I'm going to insert another text box just under here and say um reb because I in our and software deliver so I can adjust, Always do that. I always flip it upside down. I think it's like a unique talent that I have to always make that happen. Obviously I don't want it to be this big. So I'm gonna go ahead and change it down here. It's a web designer, software developer and I probably went a little bigger. Let's try 40. And I would like this one to be light again, maybe normal light. Perfect. So we will do that for now. Um and then let's say we want some sort of actually let's let's maybe make the hello a different color. So let's or we can do, I am bob smith in a different color. So we'll go back to our palette that we've created here. Let's try it with this yellow. It might be a bit much, but we'll give it a shot. Yeah. Mhm. And we've highlighted this here. We're gonna go back to Phil I'm bob smith. They're perfect. So what we're gonna do now is we're going to go over here and we are going to onto picks obey. And on picks obey. You have access to photos, illustrations, vectors, stuff like that. That are completely free for commercial use personal commercial, anything you like. So let's say I want some sort of um computer. So it's just a computer graphic. Mm hmm. Okay, let's just go with this first one because it's right there. Uh take you to the doctor does. I think I've already done this. Perfect. So download the SPG. The SPG is um will be a much more editable file so we can change colors and stuff like that as opposed to a PNG which won't be so simple as just dragging it onto here. Obviously we do not want it to be this big, so we will drag that down, continue to track that down. And so let's say we want these to grouped together here, we can actually go over here and right click and hit group selection so now I can move all of this together since they are where I want it, but they're still able to be edited individually, we can open it up and edit them one at the time, so it's very convenient to be able to do that selection colors. So if we wanted to change this background to fit our color scheme um to change it to this like corn flower blue here, copy that hex there and we'll go back over here and put that one which changed it there. Um Let's say we want to see all nine colors. Um let's say we wanted to change our colors, we have in our palette over here. Um It's copy this orange and we'll go back over here, let's say we want the pot to be a nice bright orange there, so just little things like that to be able to change it. Um we might want to put like a knave far in up here so we could either have it just blend in with the page or we could have a separate nah far, we could also have it go vertically. There's a ton of different options of what we can do. Um But I think I'm just gonna do just the standard nav bar across and actually make it different. So I'm gonna go ahead and take actually use a different frame here and I'm going to put that there. If you drag them you'll see when it will put the line right to the edge you can see the little red X. So it's the exact right size there and same on this side. So you can actually kind of feel it lock on on when you're dragging it, it stops there. So we're also going to say that the fill for that. You might actually just keep the fill white there um to match to go with the letters and stuff like that. But um yeah let's just do that for now. So then we'll do text here, we'll say home And we'll drink that up. Obportunly we don't want it to be that large. We want it to be a lot smaller let's say 24. It's just that nice center. I'm going to go ahead and select this and just copy it and paste it and it'll make a new one which you can drag over. Um So it's showing us Here at 1024 across. So Sorry 1092 is the difference between there so if I wanted like a 20 pixel margin in between it there. I could go up and go to 2000 and 12 and then you'll be able to see if we do and inspect it. Has about 20 pixel margin. The inspector will really allow you to be able to see margins very, very clearly. Um Which is what we want um when we are actually are developing it, let's say we want to do that, we want to do about um we'll go ahead and coffee and again and paste and this time you'll see it'll I understand you want the same margin suggested to go there for you, which is fantastic about skills and we'll do one more that says like works now. I can you can select all of these together or group them all over here. Um We're going to increase the weight of that font up there. Maybe I'll make it bold. Um Then I'm going to, yeah, you'll just send my bolts. Yeah. Then I bowled a little bit better for what I'm wanting. Um I don't want this to be black. Um, I think I'm going to actually have it be the same as this dark blue here. So this dark blue, if I select the frame one is right here, we'll go up here. I'm gonna select this frame which has all of these colors, which is going to change if I selected there and we'll resume in if we want to you can also make one active or something so we can do that when we're coding it. Let's say we want the active one to have this blue green color there so let's give that the um example of that active state up there so for now that's just a very simple structure on the top there and I want to move that up a little bit and keep fiddling with it. Um the one thing that I do want to do is I want to move all this over you can see if we go to the inspect that we have a 37 and 38 because it's not even which is actually very annoying. So let's go and hyped let's change this to a 102. This is just me being really specific about things um inspect now, hopefully it will be 37 and 37 so I want all of this and I want to move this over until it is oh it's not moving them all 37 away so that it's equal on all sides so it just looks beautiful. So that's just a quick example of kind of how to use sigma to work on designing things. Super editable, definitely fiddle around with it and then in the next episode we're gonna go ahead or yeah the next um I guess yeah episode of the series we're gonna go ahead and we're going to start actually designing out, are developing out this portfolio that I have previously designed. I'm sure I will change a bunch as I'm going, but we will start actually coding it out so stay tuned for that.