How to Build the Perfect Developer Portfolio πŸ”₯

22 April, 2022

11 minutes
2295 words

Hey everyone! I hope you're having a nice day or night.

Developer portfolios are interesting. They're sort of a personal space for us and our blog, along with being a place to showcase our work and progress. Recently, I too redesigned my portfolio using Next.js, TailwindCSS, Prisma and CockroachDB serverless with these principles in mind.

You can check it out live here! πŸ‘‰ https://hxrsh.in

If you enjoy it, be sure to star the GitHub repository

I recieved a lot of feedback during/after I created this, and I've already redesigned my portfolio a total of 5 times! I wanted to finally put out this post as to what goes into building the perfect developer portfolio.

Rather than building the best portfolio for us to find a job, we'll be looking at building a portfolio to build a community and audience, this in-turn also helps us with our endeavours with employment - nailing down two birds with one stone!

Now, I'm not saying my portfolio is perfect - but it's EXACTLY what I wanted it to be, and it serves it's purpose well. In this post, I'll dive into and analyse the design of my portfolio, with tips and tricks about how I decided to make it suit my needs.

#

Things to consider

When first building a portfolio, I wanted the visitor to be able to:

  • Easily find me across the internet
  • Easily contact me
  • See my works, in the form of blogs or projects

...but, that's every developer portfolio! Although those basics are REALLY important, something else we should consider when building an audience/following is giving the visitor of our website an experience that they will remember, and come back to. I wanted to build a portfolio which would inspire other creators and developers, along with their porfolio design.

Also - for the technical aspect, I wanted it to be:

  • Interactive, to show-off my web designer side - but not to the point where it feels like a design agency home page.
  • Speedy and lightweight. Nobody likes a slow web page. Maybe a mention in the 512KB Club.
  • Accessibile and responsive. Vital to all of my projects!

When building this portfolio, I had the same thoughts in my mind that I'll share here in this post. I'll analyse my portfolio design and walk you through how you can build the perfect and most complete portfolio/personal website to represent who you are as an individual, and what you do.

#

Navbar

navbar

Let's first begin with the most crucial component in any website, the navbar. Even though I have several pages on my website, I have a thumbrule to keep the navbar limited to 5 links, at maximum.

These 5 pages are the most crucial and critical 5 pages on the website, and they're arranged in the way I want the user to interact with them.

Most of the times, users won't see "AMA" on a navbar, so they'll definitely be curious as to what it is. In case you too are curious, AMA stands for "ask me anything", and it's a fun idea I had to engage user interactions with my website.

The longer I can keep people on my portfolio and interacting with it, the better impression they'll have of me and my work, which is my the end goal of most developers when they build out their portfolio.

#

Anyways, back to the topic, I've also focused a lot on creating smooth interactions with the interface, for the exact same reason as mentioned above. Small details such as an awesome hamburger menu close animation or a cool darkmode toggle actually end up going a long way to help complete the user's experience on your site.

For my example, I don't initially animate the navbar on load like other elements on my site, as animating it over and over again for every page would be make it look more buggy than aesthetic. Instead, I focused on animating interactions through SVG animation.

For instance, if you view the website on a mobile device, you'll see the awesome animated menu with the satisfying hamburger animations and the links animating in when you open the navbar. You can even try opening the language menu, you'll see a small and satisfying animation animating the links in and out.

When creating animations, I have three principles which I follow:

  • Animations must be fluid. Nobody likes blocky animations.
  • Animations must be quick and not interfere with user interaction.
  • Animated elements should always start with an opacity of zero.

#

Internationalisation

Portfolio in another language

On the navbar, you must notice a globe icon too, which is the language menu. As mentioned above, my goal with this website was to maximise community interaction, and translations were a part of this. To encourage people to contribute to the GitHub repository for this project, even something as simple as adding translations goes a long way.

If any of you guys are interested in translating my website to another language, or notice anything wrong with current translations, be sure to read the Translating section of my the repository!

#

Dark Mode

home

...and speaking of icons on the site, let's also talk about dark mode! A trend that I've increasingly seen in 2021-22 is the introduction of dark modes in design. Even large corporations such as Google have now introduced a dark mode on their platforms. Introducing it to my website just improves the "finished" and polished feel of the website, improving UX.

The theme toggle on my website starts off in the preference of the user's colour scheme they've defined on their computer, and they then have the option to change it.

#

Home page

The first thing the user sees! When designing this section, my philosophy was:

  • Giving visitors a brief introduction about who I am, and what I do
  • Allowing visitors to easily view and navigate my social profiles
  • Showing my most recent blog posts to users

#

Intro

Intro

To begin, I have my name in a large and bold heading, making it the first thing your eyes see when you view the page. Beneath that, I have a small bio about me. 5 words - simple and to the point. This short snippet serves to inform users who I am.

Then, below that, I have a larger bio where I briefly talk about what I do, and why I do it. It's a bit longer, but still very short without clutter and nonsense. Below that, I have a message informing users about the command palette feature on my website. The command palette feature was just something I added as an extra coat of polish, giving users another feature to remember. Also, it just makes navigating around the website really easy for me πŸ˜….

Next to all of this, I just have a photo of me. It fetches the picture on my GitHub profile so I don't have to manually update the picture on my repository everytime I decide to change it.

#

Right below all of this, I have links to ALL social media I'm primarily active on - where people can see my work, and where I have a sizable following. The importance of this bar is immense, as it serves to give people easy access to my social presence, as mentioned above. All these links open in a new tab though, avoiding people from getting distracted.

Links

#

Blogs

Below my intro are my top 5 recent blog posts.

Blogs

Now you must be wondering - where are your projects? Well, as I mentioned in the beginning of the article, a crucial component of your portfolio is your projects with case studies on how you made it, and what problem it solves. Although, I've decided not to include a projects tab on my website as I already have my social bar with links to my GitHub, Linkedin, and Dribbble where I have a strong profile.

Am I saying your website shouldn't include your projects? No! Actually, I'm saying the opposite. Include your projects with proper case studies on how you built them. It's just at this point, I don't have any side-projects that have amassed popularity and great scale. If people are interested in hiring me for contract work or similar, my website serves to speak for my capabilities.

#

Newsletter

This component is at the bottom of every page. Similar to the "subscribe" feature on YouTube, I wanted to have something similar on my website where users can stay updated with what I'm working on, and my new blog posts.

#

About

I didn't include this page on my navbar, as I believe it's definitely something less important, but I do have a page for it regardless.

About

As I plan to start talking in conferences and meetups much more, following the principles of convinience-first design, I have some handy links for event organisers to copy my bio and my headshot.

In the next two sections below, I have some stuff for people who are interested in learning more about me: where I started, how I started, where I'm from, and all that good stuff.

I then dedicated a section for my website, as many people were curious how I built it. There, I touch briefly on the technological aspect of the website and the tools I used for building it.

#

AMA (Ask me Anything)

I've explained this in the Navbar (where I got off-topic 🀭), but I'll copy the explaination I gave above in case you skipped over it.

Most of the times, users won't see "AMA" on a navbar, so they'll definitely be curious as to what it is. In case you too are curious, AMA stands for "ask me anything", and it's a fun idea I had to engage user interactions with my website.

The longer I can keep people on my portfolio and interacting with it, the better impression they'll have of me and my work, which is my the end goal of most developers when they build out their portfolio.

#

Uses

This is just a simple page which features where people can learn more about me setup, software, and configuration. I debated moving this to the footer instead of keeping it in the navbar, but the new trend of uses pages on developer portfolios made me include this in the navbar.

As mentioned above, my main reason for creating this page is the new trend of uses pages on developer portfolios.

#

Stats

Stats Description

For this page, I drew inspiration from Lee Robinson's dashboard, and I decided it would be a fun and unique addition to my site. Along with some stats from my blog, I have my top 5 artists and songs from Spotify. It helps to further push my goal of a unique and memorable experience for the user!

#

Blog

Another REALLY important component of my website is the blog.

Blog

I debated if I should keep a search bar or have an array of tags for my blog, but I ended up going with the tags as my blog isn't exactly a place someone would go to search up tutorials, making the feature rather useless and taking up more space on the page.

I've kept a total of 16 tags on my blog, which consist mainly of the topics that I write about. The blog cards are inspired by Kent C. Dodds - with large text, the date and an image. Inspired from Kent, I decided to replace all images on my blog with images from unsplash to improve the aesthetics of my site.

#

Blog Components

The blog also uses MDX, which allows you to use components within your markdown code! This means I can include interactive charts, or other demos within my website.

#

Blog Information

Image description

The title of the post just features some important information about the post. The reading time, showing users how much time they can expect to spend reading this post from beginning to end, when it was published, and the word count. When designing the blog, I always thought more about utility than design.

There's also a vertical scrollbar up top, showing users their progress through this article in a way that's more interactive than the scrollbar.

#

Codeblocks

codeblock

The codeblocks are highlighted using prism.js, and there is a different highlighting method used for both light and dark modes. There are also titles on the code, which are generally relative to the placement of the file within the codebase. Lastly, I added a "copy" component to the code when the user hovers, as it just makes it more convenient.

#

Blockquotes

Quotes

Blockquotes are pretty simple and straightforward. Since they're meant to grab the user's attention, they're highlighted in blue and italicised.

#

Headings

Headings

The headings are big. They have lots of padding, and they have a "#" popping up on hover allowing the user to navigate and easily share that part of the article.

#

Tables

Tables

The table component is built similar to the codeblock. They have a light border with no background, and are pretty minimal in general.

#

Images

Images

Images are slightly bigger than the rest of the blog content, and have rounded borders. I was actually thinking of implementing an image viewer on the website - what're your thoughts on that! Let me know in the comments πŸ‘‡.

#

RSS

For my GitHub README, I also featured a RSS Feed on my website which automatically generates whenever I post a new blog.

#

Conclusion

...and that's about it! That's an in-depth analysis

Harsh’s Newsletter

Get notified in your inbox whenever I publish a new video/talk, or write a new blog post. I won’t spam, and that’s a promise!

;