How to build a great portfolio website

In this blog, we are going to see what makes a portfolio website great, so if you are someone who is planning to have his/her portfolio website, here are some points I’ll like to suggest you keep in mind.

Snapshot of my Portfolio Website

Header Section

It is the section any visitor on your website will see upon landing. This has to be the eye-grabber, it needs to grab the attention of the visitor and make them view more of the website. This section should be beautifully designed, interactive and abstract.

  • Many people don’t see it as a necessary thing or skip this part as it may compromise with the beauty of your website, but it is really of huge need to place a call to action. It gives the user a sense of direction on your website and makes it interactive as well. (More about CTA here)
  • Make sure anything you put in your header section, any data or any text, should be abstract. You have an infinite amount of page below this so save some of it here and try to be in a strict 10–20 word limit in this section whatsoever.

Your Introduction

Maybe the first thing anyone is visiting your website is because they want to know more about you. It is your section to show off your skills and your vocabulary here.

  • Use Grammarly. You will never want your recruiter checking your website and spot spelling or grammatical mistake in it, also Grammarly helps you to change some common words to some more advanced vocabulary which may look cooler on your portfolio.
  • List all of your skills whether you are good at it or even familiar with them. Your website should tell the recruiter that how much have you explored your field and related tech stack. Don’t ever use a rating system or progress bars to judge your skills yourself, leave that on recruiters.

Your Projects

In a modern-day recruitment system, projects are a key aspect of your selection. Good projects can often land you in your dream company so you should be careful about this section particularly.

  • Always use a graphic or project screenshot along with its name and description. If you think that your screenshot does not look good, You can use services like Canva to make a cool thumbnail that goes with your portfolio theme.
  • A link to your hosted project or GitHub is more than important. You can use services like Netlify and Firebase for free to host your project or at least share the link to the public repo of your project if not link. In the case of the Github link, make sure the readme of the repo is up to date.

Contact Form

Probably the most important section of your portfolio from your point of view. If a visitor has made it so far on your website, he is most likely to use it to get in touch with you. Many people provide their mails and leave them on the visitor to mail them, however, I do not prefer this.

  • It is the most important feature so make sure it is not broken or something which can affect the experience of the visitor. You can also provide your social links here as well but make sure they are updated at regular intervals as they can directly impact your profile.

Hosting you portfolio

You need to host your portfolio website so that recruiters and everyone can see it. However, a key thing to take note of here is the domain you choose to host your portfolio.

See Examples

If you are still stuck, you can consider checking out the portfolio websites of some peoples on Github. You can see design samples again on Dribbble or Behance.


Your portfolio website should work to lure more opportunities towards you. No one can get a perfect portfolio, it’s a long process of adding and deleting sections and features and then only you can hit some marks and get visitors to actually visit your contact section. I think this article can give your thoughts a direction, just keep the key points in mind and code the best portfolio website anyone has ever seen. Good luck.

Software engineer who loves to design, code and then sleep