How to build a Good Portfolio Website - My Approach.

When endeavoring to create your own portfolio, the first thing that comes to mind is what kind of design your Portfolio should have and how should it be unique from others. I also faced the same issue before building my own Portfolio so you are not alone.

In this article, I will be sharing my process on how I created my own Portfolio with amazing projects from scratch with no idea in mind. Let’s dive right in 😉.

Here is the link to my Portfolio

The reason I’m writing this article is simply because people has reached out to me on various social media platforms that the portfolio is really amazing especially the projects in the portfolio.

Here are two questions I had to ask myself and looked for the answer on google before diving into building my Portfolio Website 👇🏾

1. What is a Portfolio Website?

Think of a portfolio website as your personal digital storefront, showcasing your unique skills, projects, and who you are as a developer. It's a concise snapshot of your accomplishments, and a valuable tool for building your online identity, not only for landing your dream job but also for establishing yourself in the tech community.

2. Why should you have a Portfolio Website?

• Professional way to showcase your work

Building an online portfolio about your brand and experience is a polished way to share your expertise with others. Websites can be more creative and innovative than traditional portfolios and you can share with anyone in the world.

• It Increases Your Online Presence

As a developer, you need an online presence. You can cultivate this online presence on social media platforms such as Twitter, LinkedIn, Instagram and so on. But those are not entirely your own, as the moderators of those platforms have almost full control over your account.

With your own portfolio website, it's live on your own domain (coming from someone who has not gotten a domain yet 😅) online. And people can easily find you when they search for your name on a search engine like Google, provided you put the right things in place when it comes to SEO.

• It’s a great first impression for employers

If an employer sees your website link in your signature or on your resume, they’ll likely click on it to see what you’ve built. Seeing you’ve taken the time to build a website featuring work samples, recommendations, previous presentations and more will be a killer first impression

WORKFLOW

Having had the answers to this questions in mind, I then went on to the workflow which is divided into six segments 👇🏾

📒 Planning

The initial consideration I had for constructing my portfolio was determining the content to include. Given that I envisioned it as a single-page website, navigation proved relatively straightforward.

I dedicated several days to gathering inspiration and resources, which, at one point, resulted in a bit of burnout in the process 😅.

💡 When it comes to building a Portfolio website, many people have this idea in mind that it should be the best so we therefore spend a lot of time looking from one Portfolio to another and will feel overwhelmed and end up without having any idea at the end of the day. It's crucial not to overthink the process. Instead, choose at least five designs that resonate with you to serve as inspiration for your own creation.

After days of searching for inspiration, I eventually narrowed down my choices to four websites that became my references during the design phase of my own website.

🎨 Designing

Designing the Portfolio was not really difficult because I already had some basic concepts of design. Here are some key aspects I focused on, which might prove helpful for you 👇🏽

• Typography - Typography plays a pivotal role in design, and selecting the right typeface or font significantly impacts your portfolio's overall look. Personally, I favored the Poppins font, and that's what I ultimately used.

• Color - Choosing a color for any project has always been a constant struggle for most web developers and designers and I really did not want that to affect me. So what did I do?

  I had two colors on my mind initially which were green and purple and I basically did the entire the design with both colors, then I sent them to some of my designer friends for feedback (which we’ll talk about in a bit) concerning the color and majority of them chose purple which I stalk with until I built my first project that I was going to put in on my portfolio. I randomly selected a blue color for the project and I just felt like implementing that color on the portfolio itself which turned out well and I stalk with the blue color.

  💡 With the knowledge I have now, I would recommend that you use a dark and white color when designing your websites and when you are done you can head over to websites like Coolors, ColorHunt, and many others for additional color options to streamline the decision-making process.

• User Interface Design - With the color and font choices settled, I began sketching out individual sections of the website, including the hero section, about section, blog section, work section, and more*.* Some sections were straightforward because I already had some websites to get inspiration from. The only part that was a bit difficult for me was the work section because I really wanted it to be unique and nice and I ended up taking about two days just to design it and it did not really ended up like I expected but it was a still a learning process.

  💡 When designing your portfolio, try to always go back to the website you bookmarked to get inspiration once a while. Also make the user experience seamless. Try to provide CTA’s (Call to action) at the right places so that client can easily reach out to you.

🗣️ Feedback

After designing the website, I decided to share it to some of my friends who are were designers on twitter and they gave me really good feedback which I worked on to improve the overall look of the portfolio and proceeded to code it.

💡 It’s not really a must to do this if you don’t want to but it is always good to get the perspective of other people because at the end of the day you won’t be the only one viewing your website once it’s live.

👨🏽‍💻 Development

Bringing the website live with code was not difficult because I already had a clear picture of what the website would like because of the design I had already made.

💡 Always design your portfolio or website first before building. This approach not only saves you a significant amount of time but also enhances overall productivity.

Technologies and tools - Selecting the technology stack for constructing my portfolio was a straightforward decision. I opted for simplicity and clarity, choosing the classic combination of HTML, SCSS, and Vanilla JavaScript. Considering it's a landing page with minimal animations and CTAs, I didn't find the necessity of employing frameworks/libraries like React, NextJs, Vue, or others.

💡 Ideally, I recommend basing your tech stack choice on your design aesthetics, required functionality, and personal comfort rather than solely following the current trends. Ultimately, end users are concerned with the speed and functionality of your portfolio. Additionally, you might not even need to write extensive code if you prefer not to (though it's encouraged 🙂), as there are no/low code tools available to expedite the development process.

After completing the website development, I dedicated some time to implement crucial adjustments. This included optimizing images (converted to webp format), adding the favicon (that little icon that shows next to my website name) for visual identification, enhancing SEO, and conducting thorough testing of various elements like buttons, links, and forms to ensure their proper functionality.

💡 When building the projects for your portfolio, consider providing demo login details (if applicable) to accommodate users who may be hesitant to share their information on unfamiliar websites. Additionally, include GitHub repository links for your projects, ensuring that both the repository and live links open in new pages, not directly on your portfolio website. Lastly, if you've authored blog posts on platforms like dev.to or hashnode.com, consider pulling your articles directly from their API to showcase them on your website rather than just providing a link to them.

🌐 Deployment

After thoroughly testing and resolving issues, I proceeded to deploy the website on Netlify, a platform suitable for hosting static websites. Anyone experienced in deploying websites knows that there are often bugs to address when the site goes live. In my case, I encountered a bug where some images were not displaying, and the Netlify form I implemented was not functioning properly. After resolving these issues, I ensured that everything was in proper working order.

💡 Prior to deploying your website, ensure it is error-free, and conduct thorough testing again once it is live to catch any potential issues. Be prepared to fix any bugs that may arise during or after the deployment process.

⏳ Timeline

Honestly, I can't pinpoint the exact duration for completing everything, but I can confirm it took nearly two months. I didn't work on it every day, and surprisingly, the design phase consumed more time than the actual coding of the website. But I do know that it took me a week to code and deploy the website. But I was not really in a hurry and I was kind of patient with myself.

💡 It's challenging to recommend setting a specific deadline for building your portfolio because I didn't impose one on myself. While deadlines can be beneficial, it's essential not to rush the entire process. Moreover, prioritize having high-quality projects within your portfolio rather than focusing solely on its aesthetic appeal.

Should You Prioritize Building Projects Before Creating Your Portfolio?

Yes, it is crucial to have completed projects before embarking on creating your portfolio. I firmly believe that building a portfolio should follow the execution of actual projects. However, my advice is to avoid including generic projects like todo apps or weather apps in your portfolio. While these are good for learning, strive to showcase projects that address real-world problems or align with your personal interests.

I speak from experience as I initially added frontend mentor projects to my portfolio to showcase my skill set. As my skills advanced, I eventually removed these projects and focused on creating more innovative and cool projects.

🧰 Resources

Here are some of the tools I used to build my portfolio.

Planning and Design: Adobe Xd (but you can also try Figma)

• Colors: Coolors
• Images: Dev Icons
• Illustration: UnDraw
• Typeface: Poppins
• Icons: Fontawesome Development: HTML, SCSS, JavaScript Deployment: Github + Netlify

Conclusion

That’s it guys, thanks for taking you time to read this article 🎉 🎉. Most of the suggestions I gave are mostly subjective, so do take them with a grain of salt. You can leave your questions on the comment section. I'd love to see your portfolios if you have one and share my insights if you're in the process of building one. See you next week and amazing an amazing weekend 😃