Because if we wanna work with things, such as images and real links then it's helpful to have that. So what I've done is, I've put together the images that I am going to use for my own portfolio and you can feel free to use these until you start building your own projects. Definitely feel free, if you already have your own set of projects and you wanna include those, feel free to follow along with your own images.

But just so that everyone going through this course doesn't have to be worried about creating images, working with Photoshop or doing anything like that, I provided a template. So in the show notes, you'll have a link to this repository. This is going to have the background images, it's gonna have the banner images and it's gonna have the logos and so you can simply click here to clone or download. So you can just download a ZIP, open that up, and then you can upload these if you wanna follow along with the exact images.

Now, going into DevCamp Space, click here, go to the home page, Portfolio, then go to Portfolio Items. I want to clear out all of the temporary data, so you can just click these little Xs here and these are gonna delete these items. Now if you've already populated your own portfolio items, then you're ahead of the game and you do not have to do that.

So I'm gonna delete all of those and I'm going to start adding the data points that I want. Now I'm not gonna go through every one of them because I think that would be pretty boring and would be a waste of your time, so I'm just gonna go through two of them, let's say and then offline, I'll go and I'll add the rest and when we come back we'll have all of our data.

So, the very first one I'm gonna do is gonna be Crondose, which is one of my blogs. And let me also just copy over the description, since I don't think you really wanna watch me type all of that out, and then here I'll go with the website, category here is just gonna, let's just call it Technology, position, I'll say 1.

So what the Position here is for, right now we can just hard code this in. I want to be able to have and manage the order that these appear in and so right now, we can just hard code it. I want this one to appear first and then for thumb, banner, and logo then we can upload these files.

So, for thumb image I'm going to come into my own hard drive, and let's go into code and I have this react-portfolio-assets, so if you downloaded this, you're gonna have access to it, and then, this one is, wow I've already forgotten. This is either backgrounds or images, but let me just pick that out.

Oh and it's thumb_Image, which I actually for this, this is, yeah, the one I wanna go with is actually background. So here I'm gonna go background and this one's crondose.jpg, then for the banner_image, that will be in the banner directory. And the only reason I'm going through this with you right now, is just so you can follow along and so you can see the way I'm doing it, but feel free to do it however you want. So now I'm gonna go into logo, go into crondose and that's all I need.

If I hit add now, this is all gonna upload and now you can see that all got added.

Now the logo looks like it didn't, but that's just because it is white, so that's the reason for that. Let me do just one more here, just so we can have a couple of items to look at, make sure that it is all working. So the next one's gonna be DailySmarty, this is a social media site that I've built out and it helps you keep track of what you learn about each day.

And this one is going to be, you can see I already have it kind of in there, just from our test one and that will be dailysmarty.com, category here, we'll say Social Media, position 2, and then for the thumb image, remember once again that's in the background category. And this one will be dailysmarty, banner_Image will be banner and that's dailysmarty and lastly we'll add the logo. And let's see, that one's dailysmarty right there, hit the little plus sign and then once this clears out you can see that all got added.

So let's come in, take a look first at the endpoint. So if you click on the little Portfolio link there, click on all items, you can see we now have the data we wanna work with.

So we have Crondose and DailySmarty, you'll have whatever you added. You can see we also have these long links. These are the images, so if you click on one of them, you'll see that the images did upload properly and now, if you still have your server running and come back to your own site, hit refresh, you can see we have Crondose and Dailysmarty.

So everything there is working properly. So, I would recommend that you now go through, add in all of the Portfolio items that you want.

As you can see, if you want, you can just add the identical ones that I have and you can just put placeholder data and then it will be very easy for you, later on, to go and replace that with the data from your own portfolios and then you can follow along and have plenty of items to work with.

Resources

• Portfolio Image Assets