Learn How to build your Portfolio website

100% free and no-code knowledge is required

Jan 05, 2022

my last post, I wrote why and how a Product Manager should build their own portfolio. I had help from HR professionals, mainly from Luciana Pereira. I even created a template to be used.

I received a few similar messages over the past few weeks:

I don’t know how to code. Is it possible to use your template without this knowledge?

The answer is yes. I built the template so anyone could use it, and I’ll walk you through it. Before you jump right throught it, I really recommend you read this article first.

I invite you to create and control your narrative by creating your own portfolio. I promise you that you will learn something new if you choose this path.

The basic setup of your new portfolio

First step

If you already have a GitHub account, you can jump to the next step; if you don’t have it, don’t worry; it’s pretty easy. Click on this link and follow the instructions to create your GitHub account. https://github.com/signup

Second step

Now that you have your git account, let’s clone the code to use it.

Go to taricsa/open portfolio: https://github.com/taricsa/openportfolio
Don’t forget to Starred.
Click on Use this template.
Create a name for your new repository: MyPortfolio
Choose between public or private; if you consider adding any confidential information in the future, select private.
Click on Create repository from the template.

Third step

Now you need to host it somewhere, and for free. The template is ready to be deployed at Netlify. So, let’s deploy.

Create your Netlifly account using your brand new GitHub account.
Import an existing project from a Git repository
Select your repository
Click on Deploy site.

And that is it. Now your repository is connected and hosted. Starting now, any modification in your repository will be automatically deployed to your brand new page.

Now the setup is done, we can start to play with the code and have some fun. If you prefer, you can also watch this video where I walk you throught the same process.

Let’s start to personalize your portfolio.

Before you get started, check all the tips on the portfolio (link) and prepare before you start. You can use this doc to help you get ready. Open up and do your homework.

Now that you are ready, let’s move on to your Github repository.

First stop, let’s remove the news bar. You don’t need it right now, and you can add it later if you find a use for it. Open the index.tsx file and follow the instructions in the image below.

Now is time to write about you. Let start with the Frequent Asked Questions from recruiters and hiring managers. Let’s start from bottom to up.

FAQ

We add the 6 most common questions from recruiters. You can modify the questions and answers in the section below. You also can add more or remove it. It’s up to you.

Experience

You can add or remove how many professional experiences you like. Our recommendation is to keep it light, no more than 5 years; however, if you are well versed and had changed your career a few times, you might need to show a bit more. But, tried to keep it under 10 years.

Articles or Cases

If you don’t have a blog or something similar. Our suggestion is to start to write about your experience. There are three free create places to begin to share and store it:

LinkedIn Articles
Medium
SubStack

You just need to copy the links of your articles and paste them into the code. This component was built to accommodate 3 posts or multiples of 3. So, 6, 9, 12, and so far. Replace the:

imageSrc link,
category,
title
and post links

Recommendations

Recommendations from LinkedIn are great to help with your social proof. Select the best ones to share. This component was built to receive 3 testimonials, and honestly, you don’t need more than that.

Replace the:

quote = “ copy the best ones. Which one will “sell you better?”
customerName by the First and Last Name of the person.
imageSrc, you can copy the LinkedIn profile image address and paste it here.

Company that trust me

This section is part of your social proof. Share that you work in a company with a different context of using the “trust” word in the sentence.

This component was built to accommodate at most 5 companies’ logos. All the images have to have the 635w — 112h and be saved in the assets folders. Replace it by using precisely the same file name.

You can use at most 5 logos and no more than because it’ll break the component UX/UI.

Profile, last but not least

Your intro, the first section of your portfolio. You will find all the places to replace the text by searching the code. Sorry, this one was a bit tricky to make it better.

Your profile picture has to be in the assets folder. Just replace the file with yours with the exact same filename.

Almost forgot, the video on the profile. So, you can replace it the video link on the watchme component. It’s simple. Follow the instructions in the image below.

I hope you have learned something new here and that this portfolio can help you pursue your next challenge. Don’t forget to share with your friends and subscribe my newsletter.

Looking for to share my next article with you.