Building a Portfolio — Projects Section
Hello everyone and welcome back! As a new programmer, I know the importance of having a solid portfolio to show off to your prospective clients and employers. We work in a particular industry, one that requires you to really show off your skills to be considered for a position. It’s not like most jobs where a resume will do. For us, we have to be able to put our money where our mouth is. For that reason, in this blog I’m going to be going over how to build a simple projects section that looks great and should catch the eye of any employer. I did this in react as you will see, and I suggest any new developer to really try and master everything react has to offer, as it has quickly become a go-to framework. With that said, Let’s jump right in.
To start, I’ve already created a react app and removed all the boilerplate code. If you need help getting started with how to build a react app, please check out my previous blog that goes into that in great detail. Okay, so as I was saying, I’ve gone ahead and created the app and I’ve also created 3 components, Header, Body, and Footer. These will be the 3 sections of my app that I will need. The Body is where we will be working to create our Projects section. To start this is what my Home.js file looks like.
As you can see, I’ve imported all of the components and added them to my Home.js file.
Now moving on to our projects section. First, we will need to create 4 files in our Projects folder, which should also be in our main Body folder. We will need to create 2 js files, one will be our index.js file and the second will be our projectcard.js file to help create and separate the individual projects. We will also need 2 CSS files to style them both. I’ve named them projectcard.css and projects.css. Once you are complete your Projects folder should look like this below.
Great! Now let’s get into coding. The first thing we are going to do is get all the information about our projects into our app. To do that I’ve created a file called projects.js ( You can have this anywhere in your file structure, but I recommend putting it in a folder named data or something similar to help make it known what the folder is for.)
In this file, we will be exporting an array of 3 projects. Each project will have an; id, about, tags, demo, GitHub, and image. Once you’ve completed this array it should look something similar to mine below.
I’ve named this array ProjectData and will now import it into our projects/index.js file so we can access the data. Below is the start of that index.js file.
Let’s go through this. First, at the top we have to import react like always, I’ve also imported my CSS file and the ProjectData array that we just created. Great! Now we have access to it, we just need to now put it in motion. First, we are going to create our Projects function and then immediately create a variable that we can assign to ProjectData. I’m calling that data in this example. Now we need to return something like always. Within that return, I’ve created 2 divs. One is a simple label that we will use as our title for this section in our body. The second div is where we will access the individual projects. To do that I’m going to map over the data variable, and with each project passed through we are simply going to return the project id for now, to make sure it’s working. When we check our browser we see this:
Awesome! That’s exactly what we should see. Not very exciting but it’s correct. Ok now let’s start breaking down the elements we need and coding them out. When we are done it should look something like this below. Keep in mind this is the final version with the CSS added. I will show you the CSS at the end but as you are going it will of course not look like this until it is styled properly.
As you can see I’ve labeled everything that we need; the title, demo link, GitHub link, tags, about section, and the image. Okay, perfect so let’s start creating these. First, we need to create the function for each project card (which we will have 3 of). I’ve done that below.
For our projectcards, we are going to have the title at the top. I’ve gone ahead and created a div for the project-card, and created a label for the title. Once we’ve done this we then need to make sure that we have imported the ProjectCard onto our main index.js file. I’ve done that below.
As you can see we have the proper imports at the top so we can access them. Then I’ve removed our placeholder of project.id and replaced it by returning our individual ProjectCards. Once we have that done our browser should now be showing the Titles of each project.
Perfect! Okay, now we can simply start working on each section. Next, we have the links to our demo and our GitHub. That code is shown below.
Let’s break this down a little. First, we have a new div which we will call project-links. Keep in mind the classNames are very important to have and understand easily. This is what we will reference in our CSS to get it looking just the way we like.
Next, we will pull the demo info from our array and if there is a link present we will make a button for that specific project. We do the exact same thing for the Github information. Once this is done we should get something that looks like this.
Fantastic! Things are starting to look better. Next, we need to add our about section. That is an easy one, we simply need to add a <p> tag for paragraphs, and reference the project.about data. That is shown below.
With that, we then have our about section also added to our projects in the browser.
The second to last thing is our tags, which I’ve added to the code below:
For the tags, we are going to create a new div and then map through the tags listed for each project. For each of the tags we map through, we are then going to return a label with that specific tag information as shown above. Once we have that our browser is looking even better!
Finally, we need to add in the photo which I’ve added to our code below:
To start we will need an <img> tag. Then our source(src) is going to be the data pulled from the project.image location in our array. Once we have this completed our browser will look like this below:
Stylish if I may say so myself! Well, there you have it. A quick and simple breakdown of how to use react components and how to break up sections to easily code and design a great-looking web page. As promised I have the CSS here as well. Happy Coding Everyone!