Developer portfolios are an excellent tool for making a lasting impression on potential clients or recruiters. In this article, I'll walk you through how I built my portfolio and my thought process behind it.

Things to consider

When i was building my portfolio, i wanted the visitor to be able to:

• Find my portfolio easily on the internet
• Easily contact me, using either social media or email
• See my projects and what kind of work i do

Deciding on a theme

Before I started building my portfolio website, I wanted to look through some other developer portfolios to give me some ideas, fortunately I found a github repo that had a huge list of them.

When I was choosing my theme, I wanted something that would not only reflect my skills and experience but also capture attention and leave a positive impression on the visitor. I decided to go with a creative and modern approach to my theme.

By opting for a creative and modern theme, I'm signaling to visitors that I try to think out-of-the box and I'm able to keep up with the latest trends in UI design. Overall, this theme speaks to who I am as a developer; someone who values creativity, and innovation.

Key features

Once I settled on a theme, I dived into the project build. For the tech stack, I chose React, Sass, Typescript and Bootstrap for the front-end. For the back-end i choose Nextjs and of course, nodejs.

I orginally built the project without typescript and nextjs, however as my skills improved. I optted for using typescript to help improve scaleabilty and ensure type safety. Then i learned Nextjs to use server side rendering, increase performence and improve SEO.

Home page

The home page is the first thing a user sees, as such it's important for it to contain important info while also being easy to navigate / read. When designing this section, my main objective was to:

• Give the visitor a brief introduction to who i am
• Display my skills, both development and tech related
• Showcase my projects

Projects page

The projects page shows the visitor the various projects i've worked on, i also included info about the tech stack i used and left links to see both a live view and the source code. I decided to only include major projects I've worked on so I could show my skills more in depth.

Additonally, i also plan on replacing these projects with better ones as my skills improve.

Blog page

Here you'll find articles I have written. The blog posts also go in depth about case studies and what sort of issues I solved. This helps give the visitor an idea about my thought process and how I solve potential problems in projects.

When I first built the website, I initally used json documents to hold the text content for the blogs. However, when I moved into nextjs, I also figured out how to use markdown, which made writing the blog articles a lot more easier and efficent.

About me and contact

Finally, on the About Me and Contact page, you'll find a deeper dive into who I am. The About Me section offers insights into my background and personality, giving visitors a better understanding of the person behind the projects.

The contact form allows people to send me an email directly from the website. I also made sure to add a max character limit to help prevent unnecessary long messages or spam

Conclusion

That about wraps it up! That was the breakdown on how I built my portfolio from scratch. I built it entirely in TypeScript, Nextjs, and Sass. It turned out a lot better than I thought it would and i’m excited to continue refining and expanding my portfolio as my journey in tech progresses. If you're curious about any specific aspect or want to discuss further, feel free to reach out. Until then, keep coding! 👩‍💻🚀