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 received 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 portfolio 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.
• Accessible 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

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 thumb rule 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.

Navbar Animations

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 dark mode 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

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

...and speaking of icons on the site, let's also talk about dark mode! An accessibility feature along with a trend that we've all 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 along with accessibility.

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

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 every time I decide to change it.

Something else that's very noticeable about this is of course the background gradient animation on the website. This is was basically after I was tired of my website looking way to dull and boring. I wanted to show my rather 'colourful' and creative personality somehow without having something that distracts or annoys the visitor of my website. This subtle effect is definitely noticeable, but it doesn't get in the way of navigation or feel annoying.

Social Links

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.

Blogs

Below my intro are my top 5 recent blog posts.

This serves to give users quick and easy access to some articles I've written. I've also created a quick micro-interaction here using the AnimateSharedLayout component in Framer Motion so that this seciton feels awesome to interact with!

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.

As I plan to start talking in conferences and meetups much more, I have some handy information on there for event organisers to easily copy my bio and download 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 explanation 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

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.

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 12 tags on my blog, which consist mainly of the topics that I write about. The blog cards are simple, without much bling. They information about the post -- things such as the reading time, when the post was published, the words in the post and a brief one-line description about the post.

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

The thing most notable here probably is the large gradient text with the title of the post, something that I wanted to intentionally stand out. The header of the post also features some important information about the post. The same things on the blog cards, except there isn't a post description description.

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

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

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

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

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 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 sometime soon as well, something like a lightbox for the blog images sometime soon.

RSS

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

Other pages

If you go to the footer of my website, there are a bunch of other small pages that my website features. Let's get into them one-by-one.

Photography

Although I'm not big on photography, I do take a lot of photos of places I go to. I wanted to show-off some pictures on my website, so I decided to create this small photo gallery. Adding a lightbox using Framer Motion is on my to-do list as well.

Words

Probably the most random thing on the website. I was bored one day and had nothing better to do, so I created this page. It's a 100 different words in the English language that I really like, either because of the way that their written or because how one would pronounce them. I may be adding a section for Hindi words that I really like later on too.

URL Shortener

I found that oftentimes it would be a good idea to shorten my domain for links that I use quite often. For example, if I want to link to the source code for my website, instead of typing github.com/harshhhdev/harshhhdev.github.io, I can just type hxrsh.in/source. Bam! It's public for everyone to use, although that might change in the future. But for now, users can login with GitHub and view all of the links they've created in this page, and create new ones.

Conclusion

...and that's about it! That's an in-depth analysis of how I built my developer portfolio to my needs. It was quite a journey, and I learned a lot along the way. This post was written to share my learnings with everyone. If you have any questions, please do let me know. I'm happy to answer anything!

That's all I have for you today, until next time 👋