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.
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.
- For the design part, you can take inspiration from Dribbble or Behance. You can search for landing pages and see some awesome designed pages. You can also find some coded versions of these pages on these websites if you dig deep enough.
- 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.
- Make sure to use a professional photograph of yourself. Don’t ever use a selfie or casual photo of yours in your resume or portfolio website. You also should be careful about the background of your photo as a poolside photo will not fit in here by any means.
- 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.
- You should list your key projects only and avoid listing projects you made following a course or during an internship. You may wanna describe your project in few words and the tech stack you used in the project.
- 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.
- I think you should give your mail address here but also have a contact form here. You should have a back-end connected to it or you can use services like Formspree to get mails on every submission of the form.
- 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.
- A simple example.com or example.me is perfect to host your portfolio website, it need not be fancy or creative. If you have a problem hosting your website on private domains, you can choose a free hosting service from Netlify and a free domain from Github Student Package (apply for it if you haven’t already) and combine them to get your portfolio website running. You can see documentation to do so on netlify here.
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.
Here is my portfolio website, hope you like it. Feel free to use the contact form to reach me anytime. I’ll be more than happy to hear from you what you have to say.
If you like it, you can also check out this portfolio template I coded for everyone in ReactJS. Feel free to use it, customize it and show off your skills with it. I would very much appreciate a pull request from you if you think you can add something to it
Summary
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.
