How to Build your Online Portfolio from Scratch with Gatsby

1. Intro: Hey, what's up? My name is Sandra Endo, and welcome to the glass. Helped build your honor performers from scratch we've got. Now we're gonna cover enough information of this class. But don't worry. I broke it up in a few parts. Such Duncan last for the first bar. We're going to start learning about the basics off a website portfolio and how to plan for your content on the second part. We're going to start designing a website from life frames to the final design. And then in the third park, we're going to start implementing or despise into Peter Coat. Now, if you don't have experience with coding, don't worry about it. I want to make it very easy for you to understand the concepts and implemented this hack into the. In the end, I'm gonna teach you how to polish your website online and that I'm going to ask you to turn your website within the product gallery of the class. Now, if you're ready, let's move to the next action so we can continue with the class 2. Understanding your Audience: Hey, welcome back. Nothing. You decided to continue with the class with me. Let's talk about a few key aspects off building a website performance. When I was a teenager, I started to build websites for profit but to be honest with you, but then a website was only a requisite not something to rely on to have a business. It wasn't until a few years later when I understood that in order to have a successful website, you needed to consider many other things besides the design tools that much that we were using for building a website. So if you want to have a successful website, he don't have a few things you need to know the for just started building one. What's my audience? What is it I have that my audience can find value on it. What's the message that I want to share? What's the objective or the goal off this website? Do we want to create a brown for me? We want to chair or sale my art. Do you want to increase my following? Maybe you just want to have a presence online and that's okay. But once you understand why you need your website or why you're building your website. Then you can actually start working with your contact. And once you understand, what is it that your audience needs from you? Then you can start thinking about their ways to engage your audience when you're contact. No, on the next section of the class, we're going to start looking at the anatomy off our website, perform you and then we're going to start working with the content that we're going to create in order to have a website. 3. The Anatomy of a Portfolio Website: Hey, what's up Now? We're gonna talk about the anatomy of her portfolio website. You're perfect. Website is basically about three main things. Who you are, what you could do. And what do you want from your audience? These items combined defiance. The kind of my such prisoners takes out missing. No. Remember that your website needs to have a purples knowing exactly what's her gold with messaging is crucial to have a successful website. Every section of your website must serve the overall purples having a purpose and then stating it as your mission will make you more interesting. Your personality. Businesses about people. This is important to know. You must understand that there's a person on the other side of the screen that might be considering too hard You. What will a total stranger feel about you when you reach your website? Don't just leased your titles in credentials, Children, hobbies, passions and spiels. Your capabilities. What you can do for your customers. Besides showcasing your awesome skills with your portfolio ritual child who you are, how do you react to challenges your design process and technical reasoning skills your services. If you want to get higher, which will make it easy to understand what you can do for your visitors. Then just leased a bunch of tools that you use. Tell your visitors what you can do for them in plain English. Do you design Birchers? You do photography. Do you do business cards with the Web site layout? Probably signed. Whatever released that you do, just tell in plain English that's important. Perform you'll. You're pro folio is not about your fancy. The signs. It is about the kind of value that you provide to your customers for your job. Also, you don't need to shirt every single project that you worked on on the church. Your most impressive ones. A call to action. Don't forget that our site Custom Purples. We want our visitors to do something about. After scanning your website, be afraid to offer a call to action if you want to increase your following. Just asked him to follow you if you want. Oh, you want them toe. Are you? Just do it. A call to action Children be pushing but encourage a blogged. Your content will work for you in the future when someone searches for some of your skills . This is where your content comes into action. Letter content. Guide your potential customers to you. Resource is in free. Wise are free. White is like a giant billboard. Just let you block content. Justin to guide your customers through you. Have you seen that most of the best designers to resource is improvise? They are not giving away their job. They are using a bill or for their brand, use the same on email. Least. Let's be honest. You're hopefully website is nothing. Your business will come on a daily basis. A good way to keep under visitors minds is to build on my face. But now you must have a compelling reason for your visitors to sing up. This is where your free bias and content calls to action. Don't forget to provide value on its message. That's how your mind tape healthy least. Now let's do a recap. Your website must have a purpose. Most charger personality, your cup of beauties, your services and your previous work. Your most acts for inaction from your PC and a few ways do you have a cuter website is to share regular content off what you do any interesting articles about your industry work resource is free buys so they can work for you in the future and build a useful released so you can keep your visitors and customers up to date with your business. No, let's move to the next section so we can continue with website design. 4. Creating our wireframes: Hey, what's up? Welcome back to the glass. Now we're ready to start working with the with friends we used to keep. Have everything sound anymore. Don't worry. You just get used pen and paper like this. No, Remember that we'll want to do is to chair for personality. What's our purpose? Off the website. And what's the cultural action that we want to take from with visitors So you can play around with blank campus and start working with the But they want to frame me website and stuff. Nick, let's say you want you have, like, a cured shot. Okay, so he's gonna manual then I'm not just making up my mind here. Just keep in mind what we have seeing. We have seen a hung on the previous sections of the glass that do my going to want to chair with your is yours. You are watching personality. It is not just about doing community designed there. It is more about who you are a person because remember that people will work with you on a product eventually. So they want to know who they are hiding and then what it's like to work with you on these . So just start or complete your portfolio, then probably will have some some letters from there. Like, you know, a small schedule here probably will have, like, a some some kind of illustration there. I don't know. I'm just making this this perform you early A picture of himself, you know, whatever number I do, just like this is a 19 website. Then I normally like to have, like, a volunteer section, Probably something like so I think I do believe What if he was a monster? Like, I believe that really customer centric products is a key burn off, making a product success or something like that. So this is something that I normally used my performance. I normally put like a night here. No, that's not something like a knife or something. Disable of you. Go. Then. I describe my services here like no. Then probably you have, like, a small great they're like and that's how you describe late. You're serving citizen to stop that, right? So? So, basically, what we want to do is to keep working on a where friends and start like making different directions off frames up, make us feel comfortable, and then what? We are ready with the were friends. We can start implementing their design designed to well, like you. Like something that we need to make you. Is that whole plan work? Basically one Thio Thio website. That shell case. Remember that person personality understanding the purples off the website. You want to show your services then when I have make a contact or occult election. So basically, if you want to have, uh, week, my friend, it's like it is you many there. And you have mantra here. I call services, you know? Then probably you will have a small grade off your portfolio. Then you continue here. You have a small contact culture. Watch, senator information and the fear before whatever you want, right? So that's basically how do you want a constructor? Your website? Dissenters. Usually scientist here. I don't know what you want you to showcase. Use your imagination and start courting with my friends towards your killer outside. All right, so let's move to the next section where we can keep Remember design 5. Designing your website: Hey, what's up? Welcome back. Now, Lord, start working with the design for Web site. I'm not used Commission's report for this section, but free to use another two that you are comfortable with. - So So if you could give me mine aside, been repeating it. This to draw all the cast is that you want to make it a C for your customers to know who you are, what you can do for them and after them for what they have to do with your website. Do about your culture. Action is ready partner for you. So don't forget to add those details into your website design. Also, another thing they're going to remember is that before you start working with your design, it is very important that you already have your content lined up. So you don't use northern medicines and stuff like that because your design will work better if you really have to content because, you know designing for your content is better than adapting your content for this sign that will be customized before bad. After that, I'm sorry. So don't forget to have your content very before you start working with your design, then you can following alone this hanging your website. So as you can see, I'm building the elements off a website. Those are very simple and basic elements. There are libraries on the Internet that can show you the friend styles off components like different layouts, the science that you could use. I'm using very basic science care, a great for the services. Forget portfolio and the contact form to let the visitors contact me years and send me a message. The hero child that I'm using. It's pretty straightforward. I'm using up black background here, but you conduce a need. My show. You can do whatever you want. This is your design. Place your personality on it, just your design skills to make it stand out from the rest of the world. And make sure that do you always understand or you always have in mind what you want from your customers and show who you are and boom, Not saying for for your website. Keep working on your design and bear with me for the next section of the class. All right, have fun 6. Building your website: Hey, what's up? Welcome back. No, would be sign it or website. And we're ready to work. Implement in artists hang with cold. So for this class, what I decided to use is God's being, which is a static side generator framework. That is easy for you to get started. What I did for the class, as I told you before, is that I created, uh, small template for you to start and which will give you a head start to start building your website. Okay. Coffee of his line on there. Uh, and you just changed the name off your site, which is Fuller, That God was going great for here. So I'm going to your name now and then Just keep. And you just have to wait until the project is cloned into your car drive. And then God Bean does It's thing to create your website. Okay, so that it's done here I want to do is to go to the photos website that we just created. And then if you want to see the website after running, we just have to do this, execute this card, then then that being real star, its engine ripper, our websites so it can be ready on the browser. So we gotto browser here and we go to local hoste along 1000. Then boom, that's so outside that we just created basically the website soldiers ready because he just need to change little details on their content and stuff like that. Let's dive to decode a little debt and see what happens here. Still Chair, which is the folder that we just created with that has a few folders. You just can work like models, cash here and the actually tales of the website. It's on these stores. Folder, which will have a assets in patients on our set, will have images, style specters and all the styling information from patients will have theme index, which is the file that composer home, page or index from outside. So, uh, here we're imparting are components that I created for you The navigation bar tap services performed contact for, So would that be wishes based on react? We just have to create components off each element of the website. So right here, for example, the just the title details like, for example, it says here agenda, but basically say for that Assange studio or what I would watch it changes dramatically. So seriously, you are What's I just change it for your name or whatever Did the main studies that have is the future competent A C C title, which is Hello, I'm Jane Doe, which is these one. And then the subtitle. These exceeds feeling products and services. We just have to, you know, change Chain tended me here, and then it will change on the website. So, um, here's the Houston on a small company wishes wrapping. The companies fear the attack line services and at the end of food, Or which is they? Which is? This is the section on there. You can change the footer if you want. At some we sources Ling's. But whatever social leader leans and stuff like that. So they're trying to make it simple for these. Uh, if you want to go to the details on there, so the attack language is going to be here. We're importing files. Wishes on US inspectors symbol positive. This is filed. If you want to change it, you can just change the three place he has file or change the name of the file. Do it, which is going to change. Then killers did. My tried that that I have for you, which is a tagline. Here. You can just change that. There's the symbol, the actual symbols. You want to change that? Remember, you have to replace these lines. It will then two services, which is the services TSX file. Uh uh. What I do, for example, Then you just change that on then we just have to change these sex and they're like, when we get it, are the services that we do that consulting, branding stuff that the cycles from their here of I bought a clear as well. So after concedes for branding from arse inspectors branding BG again If you want to change three icons, you just have to replace the file or change the name of the fire here. Okay, so that's for statuses. They want toe portfolio Here is portfolio are, for example, awesome walk And then who changes the title? You can change the contents here and then you change the project. Name on there, Jim. Brad, this sign, for example, of story and then boom. The change in title. You can change the content off the project leader of the Web side leg and file, which is actually the same. So this is a much confident and the services timber pop, so you can see I'm importing from I said, my shares. Tim Bradley's You can just change the name off the components here, and it will just work as well as you could see. It works well that if you wanna have more in, which is you just have to get forward working. You're filed here and just have tea. Create more of these elements if you want. Then we got a contact which is basically we're importing more competent called contact form here, which is this confident that we are using basically the contact form a company that creates this that creates the form for us, which is this form here. If you want to make it useful, we just have to replace on this on this method here, the A p I, or the back and I received the values and sends the email for you. Okay, so So basically that said four or 40 websites cold. Let's go to the next section so we can see these filings and he must have some stuff like that. Okay, 7. Adding styles to your website: Hey, what's up? So, uh, with you saw on the produce section way went into the details of recording. Where do you change your details? Are content and do reporter website ready? So let's move to the stylings which, as I told you before, it's on assets. So let's go to styles here and the styles is prepared in different folders On layout we have the base the base informations. Here are the funds that we are using. You want to change that? You just have to do like, for example, off open sounds here then we where he plays the name of the deforms on here and then so here it changes the form automatically. Second, we have the color part of fear. You can just change your 1st 2nd 3rd 4th and fifth And they will basically change the call or something off the website for you. Okay. For example, if you wanna use let's see 69 it will definitely change is and then stuff like that. Okay, so those details you can probably Norden off looking to them to see what's happening here. This has the basics stylings off the body, which is going to replicate the inner components off if you don't change anything of this. Like, for example, I'm using for family for one which basically is the correction of these vitamins here, Uh, the colors, you see, it's text. You can change that on the headings elements. Color is first. You want to change that? You can just do that. If you want to change the nine take here, I recommend it to look into what's going on with CS says are, which is basically was what we're using here. Okay, so let's move to the footer here, which is basically stylings for 1/4. Which is this one there that's going to the federal, for example, which is basically the navigation bar where we have the level here and then the man you are on there. Okay, So which is doing replacing the level here Intimate medication bar there with these details . If you want to see the animation of their it's basically this these lines there. So basically what we're having here is that we have a small fame in with one second for every letter of the Lego off the low one storey. Basically, if you want to have your level type, honey made it. You just have to to check into into every letter off every element of your lover type and trying to put in there. This is not gonna change if your local tax has different elements. You just have to do this like, for example, the element temp element or 11 elements and stuff like that. Okay, so I have different animation for you. For example, this one is faith in which is on Mexicans animations. But I can't. It's like down light up like rides like left. If you want to change clothes animation, for example, these one, it's like down you level. It's going to go down instead off instead of just trading. Okay, so those animations are for you. You can just do them as much as you want. And they're pretty simple to use, for example, of polygons Lie down. This one's OK. So, uh, that's it for it. The Okay, So the elements of the SPD filed as you can see on factors for gotta each element, it's a letter so that that's how we use it. Okay, so that's for the navigation bar. Let's move to the hero shot the killer Chuck here, for example. It's doing the background black. If you want to make it like for a temple White. We can do that as well. It's not gonna do anything here. For example, we want to change the recorders on the settings in public. We just for a temple 40 black, and then you will change black. And then he are getting to you just like make it black as well. And it will just change that. Okay, So, second for the navigation bar if you Otto era And we changed the navigation bar from, for example, whites here and we'll get change flight if you like. Teoh that, uh, do you like to make this ball background myself there after view? These right. So if you want to add, my charities have to do those. Don't forget to use the dog here and then slashed my chest was last name of the file. And then you just have to prove the five home matches here. It will look into this, like like so you see, it's pretty straightforward, and it's easy to you to start working with the signing off your website. All right, so I encourage you to keep working on the website from the next section. We want to see how we can together website ready for permitting. 8. Publish your website: Hey, what's that? Welcome back to the class. Not that we have are designed ready to college. Let's take a look at what we need to know in order to polish websites online. And then we'll come for some conclusions about decides and we're ready to go now for the publish inside when it to creeper are God's website to the public. So what we need to do it's to execute the following common God be built. Then he enter. Okay, So God needs going to prepare for our website to build into folder all what we need to do in order to publish a website. So Okay, so now the folder and the website it's ovary ready for us to publish itself. We'll go to magnify, which is hosting a platform that way will use In order to polish your application, you go to number five dot com an account. Then why did you have an account? You'll see something like, Okay, so we have two options to public website. The 1st 1 It's too primitive using it from a big bucket. Get off! Whatever. Get costing provider we want to use if you don't just get at the moment. Don't worry about it. We have a jacket drop optimum for us as well. So what we need to do? It's to go to the folders website, skewed her here, and then we will just half the public folder and those dropping on here. Okay, so let's wait until it gets ready for us. So right now what member Devices is doing, it's creating hosting for us policy. OK, so as you can see here, decide it's already published. So what were you, Captain? Now it's Do click on here, then. Your website. It's 09 Okay, So as you can see, it's everything in there. Mom tried what I do. Work contact. And that's it. Okay, so we're actually ready with a website. If we'd like to use our contact form to be, I mean to make it ready. Todo able to work now. And if I have to have some functions that we could use informs that way could just use them in order to make it work for us. There's a recommendation in here or sample code snippets on there. So I recommend you, Teoh, do go into the documentation and look at what you have to do in order to make your contact firm world. Okay, so right now, what would you do? You website? It's do make the demand ready and stuff like that. So we got to cite setting here, for example, we can change the beside name to future maybe. And then they the subject of Mayflower Abu, will change a little bit. So future car, we can count on domains as well here. Now, if I can have some documentations that you can you can read to make it happen. Like, for example, that my management you can add a custom coming here and then you just follow the documentation and stuff like that. Okay, so, uh, we already were website. What we need to do now and that encourages is to keep war came under content on your design and understanding. Do purples what you want from your website, and then get it ready to pull each. And don't forget to political website into the project gallery off the class and keep working on your design. Okay, so thank you so much for following me on this class. I hope you enjoy it. That made Do you think about how you build websites and that the class and the things I told you during the class are helpful for you. Thank you so much again and have fun.