Do you need a portfolio?
In this post I will be showing you in very simple steps how you can create your own portfolio.
Step 1: Create a “Portfolio” folder on your computer.
Step 2: Choose a free design template.
I usually tend to use bootstrap templates and designs. It’s very easy to start with, taking no more than two minutes to download the template and start editing. All the bootstrap templates are responsive so all you need to worry about is just putting in the content.
Step 3: Extract the content of the .zip file
Once you have decided on a template just click “Download” and then extract the contents of that .zip file into the “Portfolio” folder.
Step 4: Decide on the content
Before starting to work on any code/project it’s really important that you have at least a brief idea of what the project is going to do. What it’s the main purpose, how should be structured and in our case, since is a personal portfolio: what projects are we going to show to the world.
Step 5: Start editing the code
Make sure you open the index.html file in your browser before starting to edit the code. Every time you change something in the code, just refresh that page and the changes should appear in the browser.
The bootstrap template comes with dummy data inserted already, as you can see on the picture above. You can start editing the HTML code by using any code editor (Notepad++, Sublime Text, WebStorm, Netbeans, Visual Code, etc…). You don’t have to be an expert in HTML and CSS, all you have got to do is edit the actual text between the tags. Just open the index.html file with one of those editors.
<HEAD>
Start by changing the name of the web page from “Freelancer – Start Bootstrap Theme” to your preferred name, in my case “Doru Somcutean – Portfolio”. You can do that by going to the <head></head> section of the page, look for the <title></title> tags. There you can see the name of the web page.
You don’t need to edit anything else in the <head></head> section. Let’s move on onto the <body></body> section of our code.
</HEAD>
<BODY>
<Nav>
The first block of code you can see in the <body></body> section is the Navigation. This is actually the menu that you can see at the top of the web page in your browser:
All you have to change in the code here is the “Start Bootstrap” text between the <a></a> elements. Let’s just put the same name as the name of the web page: “Doru Somcutean – Portfolio”. If you refresh the web page in the browser. The name at the top of the page should change from “Start bootstrap” to the name you’ve set, in my case “Doru Somcutean – Portfolio”.
</Nav>
<Header>
The next section of the code is Header. First, change the name from “Start Bootstrap” to something else. I will put my name in there since in a few minutes we are going to change that picture from above the text to a selfie. Change the text “Web Developer – Graphic Artist – User Experience Designer” to your skills, in my case “Web Developer – Software Engineer”. If we go back to our web page in the browser and click refresh we should see our name and skills below the rounded picture.
Everything looks good so far. Let’s change that profile picture to something more meaningful. If you have a Linkedin account, use that profile picture here as well. You want this page to be seen by clients and people that would be interested in collaborating with you. Therefore, make sure you don’t put a selfie from a wild party from back in college.
In the Header section go to the <img> tag.
‘src’ stands for ‘source’. That ‘img/profile.png’ it’s the path to a picture you have on your computer, in the project directory.
In that ‘img’ folder add the picture that you want to add to the website.
In the code, change that ‘src’ path to the name of your picture. In my case, it will be “img/myprofilepic.jpg”
Refresh the web page in your browser and you should see your picture instead of that rounded one. Your picture will either be too big or too small so here is a quick fix for that:
- go to css/freelancer.css and open the file in your editor. add the code below at the end of the .css file:
-
.img-circle { width: 30%; align: center; border-radius: 50%; }
-
- add the following line in the <head></head> section:
-
<link href="css/freelancer.css" rel="stylesheet">
-
- in the Header section change the class of the image from “img-fluid” to “img-circle”
-
class="img-circle"
-
If you refresh the browser now, your image should be rounded and all of your text should appear.
</Header>
<Portfolio>
The portfolio section consists of six entries at the moment. You can add more or less just by copying and pasting one of those <div></div> elements that I have pointed to in the picture with red or blue. Something else that you can do is change the thumbnail picture by adding your own photos in the /img folder from the project and changing that source that is highlighted in yellow.
Please notice that each <div> element is linked to a model element that can be found at the bottom of the web page. The green underlined text is the source id of the modal. In your browser, when you click one of those thumbnails a modal pops up showing information about that particular project. Any changes for that modal will be done in the “Portfolio Modal” section that can be found near the bottom of the index.html file. It looks like this:
In the picture above I have highlighted in yellow everything we need to change. Starting from the project title, the source of a picture of our project, all the links and text.
In the modals at the bottom of the page change each <div></div> to contain all the information about the projects you want to present.
</Portfolio>
<About>
In the About section, all I have done is to replace the text with a short text about me and change the button text into “D-BLOG” and add a link to my blog.
</About>
<Contact>
I do not need the contact form for now. If people want to get in touch they can just email me. I will take out the entire section of the code that shows the <form></form> and replace it with a simple paragraph as seen in the picture below:
</Contact>
<Footer>
This is the section at the bottom of the web page, containing your location, social media links, short about me section and the copyright text.
First, let’s change the address. The <p></p> tags stand for Paragraph. You can delete everything between the <p></p> tags and just write your address. In my case, is just “Manchester, UK”.
Second, let’s add our social media accounts. I have changed the name of that section from “Around the Web” to “Social Media” and then started adding the links to my social media accounts. See the picture below and do the same for all of your accounts. In case you don’t want/have one of those accounts just delete the entire <li></li> element from the code.
Third, add a short description in the “About Freelancer” section. I will change the name from “About Freelancer” to “About Me”. Then I will write a very short summary of what I do and put a link to my blog.
Finally, at the bottom of the footer section, change the text “Copyright © Your Website 2017” to the name of your name, in my case, it will be “Copyright © Doru Somcutean 2017”.
</Footer>
</BODY>
That’s the coding part of this project. Next step is publishing the portfolio online so that people can easily see our work.
I will do that using AWS S3 services and have everything as a static website. If you have a specific web hosting provider in mind then feel free to use it.
If you plan on using AWS you will have to create a free account. Hosting the website from S3 it will roughly cost you £12/year if you add a domain or even less if you just keep it as an S3 web page. I will not add a domain for this portfolio because I’m trying to keep everything as cheap as possible.
What phone should I choose? – iPhone 7 vs Google Pixel vs OnePlus 5
Adding the website to AWS S3
-
Create a free tier account.
-
Log into the console and go to S3.
-
Create a new bucket.
-
Upload all the files within your project into your S3 bucket and make them public.
-
Allow the bucket to be a “Static website hosting”.
3. Creating a new bucket
Click “Create bucket” and add a name to your bucket. Once that’s done click “Next”.
You can add some tags if you want to but just to keep it simple, on the screen below just click “Next”.
Select “Grant public read access to this bucket” from the first drop down list and click “Next”.
Review everything and click “Create bucket”.
4. Upload files to S3 bucket
Make sure you drag and drop all of your project files from your computer when uploading them to S3. That includes all the folders as well. Once you added all of your files there click “Next”.
Again, from the drop down menu select “Grant public access to this object(s)” and click “Next”.
Click “Next” on the ‘Set properties’ screen and review everything. If you’re happy with all the properties displayed there click “Upload”.
Making the bucket a Static Website Hosting
Once all the files are uploaded go onto the “Properties” tab and select “Static website hosting”. Add the same index and error document names as shown in the picture below and click “Save”
That’s it. Yeah, it’s really that simple. Your website is now online. to see the link just select from your S3 bucket the index.html file. The link will appear in the box from the right part of the screen. See the picture below.
Your website is now publicly accessible online. Thanks to AWs and S3 you can have a static website online in just a few minutes.
I know it was a long post but you’ve come a long way. You now know how to build your own website/web portfolio and how to publish it online.
Please let me know if you need any help and tell me your opinion about this post.
Hey Doru, That’s awesome work..Thanks!
I have a doubt; How can I change the background color to transparent background image for this freelancer template? I’m trying since two days I’m unable to do it..
Thanks in Advance!
Hi KushiY,
I’m glad you find the article useful.
I’m not sure what your question is:
Do you want to change the background color of the entire template into transparent?
Or you want to change the background of the entire template into an image that would be transparent?
Let me know and I will help you out.