The idea behind this post is to tell the story of how I did it, the tech involved, what I learned along the way, the challenges I faced and how I overcame them, and most importantly to inspire other people just like me to build their own portfolio website.

What is a portfolio website and why do you need one?

A portfolio website is essentially an online representation of you, where you can showcase your work, skills, and experience. It helps potential employers and clients to get a better understanding of who you are and what you can do. It is also a great way to build your personal brand and it makes it easier for other developers to find you and connect with you.

Why I built my own portfolio website and blog?

I have always wanted to build my very own portfolio website but there were just so many cool projects to work on that I never got around to actually doing it. But now that I graduated and was looking for a job I realised how a blog and portfolio website could help me stand out from the crowd. I also wanted to build a blog so that I could share my knowledge and experience with other developers. I always wanted to inculcate the habit of writing and blogging is a great way to do that.

The decision to post my articles on my own website was inspired by a friend and fellow developer, Aravind Balla who has an awesome blog himself. He told me that sites like Medium put your articles behind a paywall so it is better to post your articles on your own website where you have full control over your content. It is also a great way to build your personal brand and it helps you get more traffic on your website.

The plan of action

I would strongly advise you to write down your plan of action before you start building your website. This will help you stay focused and not get distracted by all the cool features you could add to your website. It can include things like what technologies you want to use, what features you want to include, what your design should look like, etc.

Here’s mine.

Track my progress as I build it.

I have to use the framework and libraries I want to learn

The website should be accessible and responsive

A good Lighthouse score for both mobile and desktop versions

A good font and color scheme

Have a good logo

Good SEO.

Have functionality to switch between light and dark mode

Have a custom domain name

It has to integrate with a CMS for blogging (I chose Notion)

It should be open-sourced for others to use and learn

Base technologies used

NextJS - The base framework for my website

Tailwind CSS - The base CSS framework for my website

Notion API - The content management system for my blog posts

Vercel - The hosting platform for my website

Starting the project

Why Next.js?

I had just recently completed a 12-hour-long React course and was currently working with Next.js which is built on top of React and I found it fairly simple to get started with it. I've become a big fan of Next.js. It's a React framework that makes it easy to create server-rendered React apps. And it's just so darn fast. It is a great framework to learn if you want to build a portfolio website or a blog. It is also a good choice if you want to build a website that is fast and SEO friendly. So naturally, Next.js became my framework of choice.

Keeping track of my progress

Notion is a new tool that I've been using a lot lately. It's an all-in-one workspace for your notes, docs, and projects. And it has a really cool feature that lets you turn any page into a website. In this project, I used Notion to keep track of my progress by creating a to-do list that included features I planned to add, bugs I needed to fix, etc. This helped me focus on coding rather than worrying or trying to remember what I needed to do next.

A mistake to avoid

One mistake I made at the beginning was that I did not commit my code to GitHub until I had something working. This meant that I had to redo a lot of work when I messed up my code. So I would strongly advise you to commit your code to GitHub as soon as you have something working. Regularly committing your code to GitHub will not only help you track your progress but it will also help you go back to a working version of your code if you mess up your code.

Choosing a template

I think there's no shame in using a template to get started with your website. I personally find it easier to build on top of an existing template rather than starting from scratch. I believe that it is important to get something working as soon as possible and then iterate on it. So I used this template by Clint Briley which had a lot of the features I wanted to include in my website.

The first iteration of my website

I added all the content and functionality I wanted in the first iteration and although it looked visually appealing I realised that it was not very user-friendly. The user had to scroll down to see the content and the design was not consistent. So I decided to redesign my website. Around this time a friend showed me a template from Tailwind UI and I really loved it. The design was consistent and responsive and I decided to use it as the base for my website. As a developer, I'm a strong believer in building on top of quality things that other people have built.

Designing the website

I'm not a designer but I think I understand the elements of good design and the importance it has in creating a visually appealing website. But there's a catch, only good design is not enough, a website should also be easy to use. What this means is that you should not only focus on the aesthetics of your website but also on the user experience. The user should be able to easily navigate through your website and find the information they are looking for.

The logo

In Hindi, there is a word called 'Jugaad' which means to find a creative solution to a problem. I really like this word and I try to apply it to my life as much as possible. Since I had never made a logo and I knew that learning to make one would get me sidetracked from my main goal of building my website so I decided to use my Memoji (it is a custom emoji that you can create on your iPhone) as my logo. I think it turned out pretty well. I also used the same Memoji as my favicon.

The font

Selecting a good font is very important as it can make or break your website. I was not aware initially that tailwind sets different fonts for different browsers unless you specify it in the tailwind.config.js file. So I would strongly advise you to test your website on all the browsers you want to support and set a default font in the config file. I was using the operating system Ubuntu while working on the website so tailwind was automatically setting the font to Ubuntu on my browser and I had grown to like it. So I decided to make it my default font. For some quality open-source fonts, you can check out Fontshare by Indian Type Foundry.

The color scheme

A color that I've recently grown to love is the color indigo. I think it's a very calming color so I used it as an accent color on the entire website. I used a moving gradient animation to highlight the most important parts of the headings on each page. This way the user can instantly see what the page is about. I used the colors from tailwind's color palette and have different colors for dark and light modes. I also paid attention to contrast ratios and made sure that the contrast ratio between the text and the background was good.

Development

Building the projects page

I wanted to have a page on my website where I could showcase my projects. Initially, I decided to use the same approach as I did for my blog posts. I used the Official Notion Javascript Client package on npm to fetch the data from my Notion database and then used the data to render the projects on my website. My brother who's a developer as well pointed out that since the content of my projects section won't be changing as much as my blog posts I should locally store the project data in a JSON file and then fetch the data from there. This way I could avoid making an API call every time the user visits the projects page and the page load time would be faster.

Building the blog

Why Notion?

I wanted to build a blog for my website so that I could write about my projects and share my learnings with others. Previously in some of my other projects, I've used Cloud Firestore as my database but I wanted to try something new as well as something that would have the least amount of friction for me to write a blog post. I decided to use Notion as my database since I could directly write my blog posts in Notion with good text formatting and the option to add embeds.

Which library to choose?

I tried and looked at various libraries that could help me integrate Notion with my website and I found the Official Notion Javascript Client package on npm the best fit for my use case. I then created an integration for my Notion database, generated the token, and added it to my database. I then added the token to my .env file and used it to fetch the data from my Notion database. I used this data to render the blog posts on my website. To style the blog posts I simply used the prose class on Tailwind. It is a very convenient way to style markdown content.

How to sort posts?

At first, I had decided to sort my blog posts chronologically but then I came across this idea of a Digital Garden in this beautiful post by Joel Hooks. It is basically a collection of your thoughts and ideas and the most radical thing it talks about is that your posts don't have to be fully complete or polished before you publish them.

I used to be a perfectionist and I would spend a lot of time trying to make things perfect. But I realised that this was not the best use of my time. As I had previously said I now believe that you should ship your ideas as soon as possible and then iterate on them. So I decided to publish my blog posts as soon as I had a basic draft ready. I organised my posts into 3 categories Seedling, Budding, and Evergreen depending on their stages of completion. I also decided to add a 'Last Updated' field to my blog posts so that the user can see when the post was last updated. I think this is a good way to show the user that you are constantly updating your blog posts and that you are not just publishing them and forgetting about them.

So to answer the question of how I sorted my blog posts, I decided to sort them by manually adding a number to each post. Because I believe the readers of my blog deserve a curated experience rather than a chronological one.

Hosting the website

I decided to host my website on Vercel since it is free and easy to use. It also has a lot of features like analytics, serverless functions, edge caching, and the ability to dynamically generate open graph images. I integrated it with my GitHub repository and it automatically deploys my website whenever I push to the main branch. I also wanted to learn how to deploy a NextJS website on Vercel and since I was using a custom domain name for my website I added a CNAME record to my domain name to point it to my Vercel project. Also when you deploy on Vercel you get image optimisation for free which is a huge plus.

Tools & Packages used

notion-client - To fetch the blog posts from Notion

highlight.js - To highlight code snippets in my blog posts

next-seo - To add SEO to my website

react-twitter-embed - To embed tweets in my blog posts

slugify - To convert the title of my blog posts to a slug

clsx - To conditionally add classes

react-icons - To add icons to my website

prettier - To format my code

eslint - To lint my code

postcss - For CSS browser vendor prefixes, purging unused CSS, and minification

Conclusion

I'm really happy with how my website turned out. I learned a lot while building it and I'm really happy that I decided to build it. I plan to add more features to it in the future. I would definitely recommend you to build your own portfolio website. It's a great way to learn new technologies and showcase your work. I would love to hear your feedback on my website and if you have any suggestions for me to improve it. You can find the source code for my website on Github.

I want to thank Aravind, Brittik & Gopika for their kind reviews and feedback and the open source community in general for all the amazing tools and libraries.