1 00:00:01,740 --> 00:00:02,710 All right everybody. 2 00:00:02,730 --> 00:00:10,060 We have a really exciting video here because we're gonna build our own portfolio page. 3 00:00:10,110 --> 00:00:11,160 That's right. 4 00:00:11,160 --> 00:00:18,530 We're going to build this so you can showcase your projects to your future employers. 5 00:00:18,530 --> 00:00:25,500 And just have a place to put your projects that we're going to work on throughout the course. 6 00:00:25,640 --> 00:00:31,180 Again to impress that special someone or your future employer. 7 00:00:31,210 --> 00:00:38,700 Now this is actually very cool because this page was built by a fellow student. 8 00:00:38,710 --> 00:00:45,130 This student actually finished the course and went on to create this project as a way to say thank you 9 00:00:45,130 --> 00:00:50,100 to the developer community that he received so much help from. 10 00:00:50,120 --> 00:00:52,840 And it's called simple folio. 11 00:00:52,840 --> 00:00:57,600 And we're going to use this project as our base for our portfolio. 12 00:00:57,600 --> 00:01:04,800 Now I'll link to this repository so you can follow along and you can customize your own portfolio. 13 00:01:04,840 --> 00:01:10,370 And as we go through the course you can actually add the projects as I'm about to show you. 14 00:01:10,480 --> 00:01:19,390 Now one thing I do want to say is that this project is M.I.T. licensed which means that you can use 15 00:01:19,390 --> 00:01:24,220 it freely for yourself and customize it to your liking. 16 00:01:24,220 --> 00:01:30,040 I'll show you how to do that but I do want to acknowledge the fact that this student put in a lot of 17 00:01:30,040 --> 00:01:33,060 effort to this and it's actually quite a nice project. 18 00:01:33,130 --> 00:01:42,490 So I do recommend if you have just point five seconds going to his project and clicking on the star 19 00:01:43,300 --> 00:01:46,120 to show some appreciation. 20 00:01:46,220 --> 00:01:47,360 All right enough talk. 21 00:01:47,420 --> 00:01:50,700 Let's actually build our portfolio. 22 00:01:50,780 --> 00:01:53,110 I'm going to clone this project. 23 00:01:53,240 --> 00:02:00,500 I'm going to use SS H but you might have to use HDP s depending on your GitHub setup so let's clone 24 00:02:00,530 --> 00:02:12,630 this repository I'll say get clone and clone these simple folio project all C.D. into simple folio and 25 00:02:12,630 --> 00:02:15,690 I'll open this and sublime. 26 00:02:15,760 --> 00:02:19,030 Now don't get intimidated by all these files. 27 00:02:19,030 --> 00:02:22,700 There may be things here that you haven't seen before. 28 00:02:22,750 --> 00:02:25,960 Again we'll cover most of these throughout the course. 29 00:02:26,260 --> 00:02:31,860 But luckily for you this project actually has a really nice getting started guy. 30 00:02:32,170 --> 00:02:34,280 So let's go step by step. 31 00:02:34,360 --> 00:02:37,020 We've cloned the repo. 32 00:02:37,150 --> 00:02:40,420 We've seeded into the repository. 33 00:02:40,420 --> 00:02:46,450 We can run this command if we want to remove the origin repository. 34 00:02:46,450 --> 00:02:52,180 That means if we had fought the project which by the way if you want. 35 00:02:52,210 --> 00:02:55,470 You probably might want to fork this project. 36 00:02:55,720 --> 00:03:01,750 In my case I just cloned it because while this is just for demonstration purposes but you can actually 37 00:03:01,870 --> 00:03:11,200 run this command to remove this original project so that you only have your own copy your own forked 38 00:03:11,260 --> 00:03:17,400 copy to worry about because most likely you won't do any pull requests to this original project. 39 00:03:17,440 --> 00:03:20,210 You can just have your own version. 40 00:03:20,250 --> 00:03:22,860 Next we run npm install. 41 00:03:23,130 --> 00:03:24,000 So let's do that. 42 00:03:24,000 --> 00:03:26,360 Let's say npm install. 43 00:03:26,530 --> 00:03:29,860 And while that's being installed Let's go next. 44 00:03:29,950 --> 00:03:36,060 And it says we just have to run NPM start and it gives us a couple of commands. 45 00:03:36,070 --> 00:03:42,820 If we have any issues but hopefully things go well we can just run NPM start. 46 00:03:42,820 --> 00:03:46,000 Let's clear this and say NPM start 47 00:03:50,650 --> 00:03:51,590 Hey look at that. 48 00:03:51,670 --> 00:03:54,060 There's the portfolio. 49 00:03:54,100 --> 00:03:56,110 Very very cool. 50 00:03:56,110 --> 00:04:00,960 Just like that we have our template for our portfolio. 51 00:04:01,130 --> 00:04:07,060 Now if we go back we'll see that we have template instructions here. 52 00:04:07,070 --> 00:04:09,530 So it actually tells us exactly what to add. 53 00:04:09,590 --> 00:04:12,910 And we have enough knowledge now to be able to understand this. 54 00:04:12,950 --> 00:04:13,710 Right. 55 00:04:13,760 --> 00:04:19,100 So it looks like we can change things in the template thought a [REMOVED] and change the hero section 56 00:04:19,160 --> 00:04:26,420 which is the main section with our hero title and hero CTA which means call to action. 57 00:04:26,840 --> 00:04:38,340 So let's do that let's go to the source folder into the templates that a [REMOVED] and then well we can 58 00:04:38,340 --> 00:04:40,790 change the title here to my name 59 00:04:44,170 --> 00:04:48,130 and then in the hero section right over here we'll change. 60 00:04:48,190 --> 00:04:52,220 Hi my name is to your own name. 61 00:04:55,220 --> 00:05:02,880 I'm the unknown developer let's call this the I'm the developer. 62 00:05:02,880 --> 00:05:09,410 You need an end the hero call to action instead of no more. 63 00:05:09,460 --> 00:05:12,030 We'll just say hire me. 64 00:05:12,190 --> 00:05:14,670 Sounds kind of desperate but it's fine. 65 00:05:14,670 --> 00:05:15,270 All right. 66 00:05:15,280 --> 00:05:19,990 So just by saving this it's going to detect the changes. 67 00:05:19,990 --> 00:05:23,200 And if I go to our project. 68 00:05:23,380 --> 00:05:24,310 Hey look at that. 69 00:05:24,310 --> 00:05:25,710 I have my name here. 70 00:05:25,720 --> 00:05:27,280 I'm the developer you need. 71 00:05:27,280 --> 00:05:29,060 And it says hire me. 72 00:05:29,060 --> 00:05:33,720 Awesome next stop is probably the About Me section. 73 00:05:34,580 --> 00:05:37,910 Let's go here in the About section. 74 00:05:37,910 --> 00:05:44,480 Once again there's a nice roomy so we can just replace our p tags with whatever descriptions we want 75 00:05:44,990 --> 00:05:49,570 and we can also change the image so that we have our image in here. 76 00:05:50,990 --> 00:06:00,090 Now in order to do that all we need to do is to change the profile picture in our assets folder so if 77 00:06:00,090 --> 00:06:07,040 I go to the assets folder I see that there is a profile PMG here that we just need to replace. 78 00:06:07,070 --> 00:06:14,600 Now if I open up the project here if I go to source the assets folder I actually already have my picture 79 00:06:14,600 --> 00:06:20,870 so I'm just going to paste this picture in I'm going to replace it with my own profile. 80 00:06:21,500 --> 00:06:30,160 So that now if we go back we have my giant face here and check that out. 81 00:06:30,180 --> 00:06:31,170 There you go. 82 00:06:31,200 --> 00:06:32,610 I have the About Me page. 83 00:06:32,610 --> 00:06:35,280 I can even attach my resumé if I want. 84 00:06:35,280 --> 00:06:37,810 And now let's go to the projects section. 85 00:06:37,920 --> 00:06:42,470 When the project section is quite nice so we can attach source code. 86 00:06:42,480 --> 00:06:47,720 We can see live so we can maybe attach a github page link here. 87 00:06:47,940 --> 00:06:49,390 Our own Web site. 88 00:06:49,560 --> 00:06:55,440 So let's say throughout the course we build projects and you want to showcase your projects. 89 00:06:55,500 --> 00:07:00,520 So we have the background generator project that we've created already. 90 00:07:00,600 --> 00:07:07,250 But let's say in an upcoming section in the react section we're building a project called robo friends. 91 00:07:07,410 --> 00:07:14,900 So let's say we just created the robo friends project which is right over here and this is something 92 00:07:14,900 --> 00:07:20,870 that I'll link to when we finish that section and we'll have this exact setup and let's say we want 93 00:07:20,870 --> 00:07:23,410 to showcase this project on our portfolio. 94 00:07:23,420 --> 00:07:30,940 Well if we go to the instructions once again we have a great step by step guide of what to change. 95 00:07:31,010 --> 00:07:34,310 So we just need to go to the project wrapper section. 96 00:07:34,400 --> 00:07:37,050 So once again go to our template. 97 00:07:37,310 --> 00:07:45,150 Scroll down past the about section into the project section and here. 98 00:07:45,240 --> 00:07:47,670 Each row is a project. 99 00:07:47,670 --> 00:07:50,890 So let's make this a little bit bigger. 100 00:07:50,910 --> 00:07:56,740 We have the project title which will replace this with robo friends. 101 00:07:56,800 --> 00:08:06,200 We don't have to change the scripture right now and then we can link to the live version which in my 102 00:08:06,200 --> 00:08:08,900 case it's right over here. 103 00:08:08,900 --> 00:08:10,830 Again I'll show you how to do this. 104 00:08:11,950 --> 00:08:14,280 During the react section of the course. 105 00:08:14,470 --> 00:08:18,810 But I can just change this to a trip like this. 106 00:08:19,590 --> 00:08:30,640 And the source code will just be this repository so once again copy and paste like that now. 107 00:08:30,660 --> 00:08:36,270 The last thing we need is to have an image of our project. 108 00:08:36,270 --> 00:08:43,250 Now I want to show you a really cool resource which is this logo maker and I'll link to this resource. 109 00:08:43,270 --> 00:08:47,400 It's called Hatfill and we can actually create logos for free. 110 00:08:47,830 --> 00:08:49,920 So let's just click get started. 111 00:08:49,930 --> 00:08:57,550 We'll build a tech logo but you can pick whatever you want and let's say we want an innovative logo. 112 00:08:57,550 --> 00:08:57,850 All right. 113 00:08:57,880 --> 00:08:58,860 Let's click next. 114 00:09:00,270 --> 00:09:05,490 And I've done this before so we can call our project robo friends. 115 00:09:05,490 --> 00:09:08,480 Let's do a capital are actually no let's leave it like that. 116 00:09:08,610 --> 00:09:12,190 And the slogan that I chose is the only friends you need. 117 00:09:12,210 --> 00:09:19,160 So if I click Next year let's say what the logo before it'll be for an online store or a Web site click. 118 00:09:19,230 --> 00:09:21,660 Next hand check this out. 119 00:09:22,020 --> 00:09:26,960 It's going to generate some logos for us and they all look pretty cool right. 120 00:09:26,970 --> 00:09:33,510 Let's see which one I like best we can pick whichever one I like this one so let's do robo friends over 121 00:09:33,510 --> 00:09:41,310 here I can include that slogan if I want but let's just click through next and you can download the 122 00:09:41,310 --> 00:09:42,180 logo. 123 00:09:42,330 --> 00:09:50,070 Now in order to download and get the logo for different things like Facebook profile image Instagram 124 00:09:50,070 --> 00:09:53,610 profile image you'll have to create an account. 125 00:09:53,640 --> 00:09:57,630 But again it's free so you can still use it. 126 00:09:57,930 --> 00:10:02,870 In my case I already create an account and I have this image downloaded. 127 00:10:02,970 --> 00:10:08,730 So all I'm going to do is replace again in this same assets folder as before. 128 00:10:08,730 --> 00:10:18,470 Replace the banner with my own banner which is the logo that we downloaded. 129 00:10:18,480 --> 00:10:24,580 So again if I go back to the project everything should be working. 130 00:10:24,660 --> 00:10:27,290 Let's go to our portfolio. 131 00:10:27,460 --> 00:10:28,070 Hey. 132 00:10:28,090 --> 00:10:29,020 Look at that. 133 00:10:29,020 --> 00:10:30,730 That is awesome. 134 00:10:30,730 --> 00:10:32,460 There is my project. 135 00:10:32,560 --> 00:10:36,450 If I go to see live there's my robo friends project. 136 00:10:36,460 --> 00:10:42,770 Again something that will build together so I can search all my friends and I can even go to the source 137 00:10:42,770 --> 00:10:51,450 code of my getup profile page and notice here that the projects all have the same image now. 138 00:10:51,780 --> 00:10:57,340 That's because in the code all the images point to banner dot PMG. 139 00:10:57,420 --> 00:11:03,060 But as you can imagine by just changing the name to different logos you'll be able to have multiple 140 00:11:03,060 --> 00:11:06,090 projects on your profile. 141 00:11:06,090 --> 00:11:07,920 How cool is that. 142 00:11:08,100 --> 00:11:10,860 And you can have different things like call to action. 143 00:11:10,860 --> 00:11:17,250 Again we've looked at getting an e-mail subscribed form if you want it you can link to your get high 144 00:11:17,250 --> 00:11:19,170 profile your Twitter account 145 00:11:23,290 --> 00:11:28,520 and we have a pretty nice project just in a couple of minutes. 146 00:11:28,530 --> 00:11:29,850 How cool is that. 147 00:11:29,930 --> 00:11:36,300 Now if we go to the documentation you'll have different things like the contact section. 148 00:11:36,310 --> 00:11:43,180 They can update the photo section that you can update but the last thing I want to do is this stylus 149 00:11:43,450 --> 00:11:50,650 that is you can adjust the styles of this project by going to these styles abstract and variable dot 150 00:11:50,920 --> 00:11:52,790 SC as s. 151 00:11:52,930 --> 00:11:57,270 This is actually a file format for what we call SAS. 152 00:11:57,370 --> 00:12:04,950 It's kind of like C Ss but it gives you extra features so let me show you what I mean. 153 00:12:05,000 --> 00:12:11,780 You see here that I can change the default colors so if I click on this link that this document provides 154 00:12:12,350 --> 00:12:21,490 it gives us couple of UI gradients that we can use so I can actually just copy this and you might see 155 00:12:21,520 --> 00:12:25,230 that this is quite familiar to what we had before with our background project. 156 00:12:25,810 --> 00:12:31,770 But if I copy this go back to the documentation and change the default values. 157 00:12:32,050 --> 00:12:40,810 So that is if we go to the styles the abstract and then the variables we can change the primary color 158 00:12:40,840 --> 00:12:43,570 and the secondary color of the gradient. 159 00:12:43,570 --> 00:12:52,000 So let's just copy what we just copied from that gradient Web site and this is where the SAS files come 160 00:12:52,000 --> 00:12:52,990 in handy. 161 00:12:52,990 --> 00:12:59,760 You see with SAS files so you can do something called variables like this using the dollar sign notation. 162 00:12:59,950 --> 00:13:07,090 And now any time in the SAS file when you use the word primary color it's going to be replaced with 163 00:13:07,180 --> 00:13:09,000 the actual color. 164 00:13:09,040 --> 00:13:13,570 So it's just extra little boost that you get with CSX. 165 00:13:13,750 --> 00:13:15,820 Again something that we don't need to worry about. 166 00:13:16,420 --> 00:13:19,660 All you need to know is that you can change the colors over here. 167 00:13:19,870 --> 00:13:28,320 If I now save and go back to my portfolio a look at that and the colors are all different. 168 00:13:28,370 --> 00:13:36,450 I get that blue color still get that nice gradient and I've made this portfolio even more personal to 169 00:13:36,450 --> 00:13:40,150 me now I'll leave the rest up to you. 170 00:13:40,210 --> 00:13:44,850 This is just a way for you to get started and keep track of your projects as you go through the course. 171 00:13:45,820 --> 00:13:52,360 And on top of that there is also a step by step tutorial for deployment so you can actually deploy this 172 00:13:52,360 --> 00:14:00,220 project to production using something called net Fi and make it really really easy to share your project 173 00:14:00,460 --> 00:14:05,370 outside of just on your local host again. 174 00:14:05,380 --> 00:14:08,740 That is something for you to explore and do on your own. 175 00:14:09,070 --> 00:14:19,200 But for now if you have a nice starter template of your project pretty awesome right now the last thing 176 00:14:19,230 --> 00:14:25,080 you should do is once again thank the student for the work that they've put in with simple folio by 177 00:14:25,110 --> 00:14:28,410 giving it a star for the repository. 178 00:14:28,410 --> 00:14:30,470 And once you're done. 179 00:14:30,720 --> 00:14:39,150 Go to our Dischord channel and if we go to look what I made channel you can share your portfolio with 180 00:14:39,150 --> 00:14:45,870 others or you can think the student that actually created this which has this handle. 181 00:14:45,870 --> 00:14:50,970 So let's just say thanks for the simple folio. 182 00:14:50,970 --> 00:14:58,350 We're recording right now and using your project pretty 183 00:15:02,360 --> 00:15:07,770 area your own little portfolio project to get you started. 184 00:15:07,790 --> 00:15:09,520 I'll see in the next one by.