DEV Community

Cover image for Story of how I built my Portfolio and Blog using and NextJS
Dinesh Balaji
Dinesh Balaji

Posted on


Story of how I built my Portfolio and Blog using and NextJS

I've always wanted to build my very own portfolio website and blog. After many years of laziness..πŸ˜‹, finally, I mean, FINALLY I've done it..πŸŽ‰ I have built my own website✨ Please do check out the website and let me know your thoughts in the comments..πŸ™

The idea behind this post is to tell the story of how I did it, the tech involved, what I learned along the way and most importantly to inspire many more people (lazy like me may be..:D) to build their own website.

Ground Rules

These are some of the ground rules that I laid down for myself for developing the website.

  • It had to coded out by me from scratch without using WYSWYG editors.
  • A good logo.
  • I have to learn new stuff as I build it.
  • Minimize usage of third-party libraries.
  • It has to showcase my coding skills.
  • Good Lighthouse Score - Performance and Accessiblity.
  • Has to integrate with a CMS for blogging.
  • Good SEO.
  • Be open sourced for others to use/learn.
  • A full-page canvas landing page..😍 I love them..❀️

The Start

With the ground rules set, I began on October 3rd, 2020. One thing I wanted to absolutely make sure was to track my progress. I've tried building my site a couple of times earlier but I got sidetracked. I was also inspired by this. The way he wrote down whatever little progress he made was the way to go for me. So I did a CHANGELOG. Easy to generate and maintain.


I'm a coder by profession but I do love to design and I'm quite crafty with Sketch. But sticking to my ground rules, Figma, was the first thing I learned. I spent a weekend going through tutorials learning the tool and then went about creating a design system and the website.

The Logo

I had to do a logo for branding. I wanted it to be simple and animatable. I'm happy with what I ended up with.

Alt Text

Being a developer staring endlessly at the screens, I love dark themes and decided to go with it. Chose a couple of popping colors and some shades using crispedge and voila I had my recipe.. πŸ¦„


I created the screens over a week. I made sure all the screens were complete before starting development to ensure there were no stoppages.


Since I wanted a blog along with the portfolio, SEO was of paramount importance and the best way to do that is to build static sites. I wanted to learn React along the way and there were two choices, NextJS and Gatsby. Gatsby was purely static and NextJS provided the flexibility to switch between static and dynamic based on our need. So I ended up with Next JS.


Choosing NextJS came with a benefit. The amazing hosting platform from the team that developed NextJS, Vercel. It has first-class tooling to host your website in minutes and has seamless integration with Github for development, preview and production deployments.

I don't want to bore you guys with a long explanation of each and every detail. I'll just list the tech I used on the website with one-liners.

Base Tech

  • NextJS - The base React framework on which the website is built. It allows you to choose between SSR, SSG and CSR.
  • API - My CMS.. πŸ˜‹ I love as a platform for developer blogging and I didn't want to leave it. But at the same time, I wanted a single source of truth for my articles. So I made use of the API. It's sweet and I got the best of both worlds.
  • TailwindCSS with SCSS - I was so happy to have come across TailwindCSS. I strongly recommend this to anyone. Integrating it with SCSS was a pain but if you just use CSS, please try it out.
  • Typescript - Must have for anyone doing frontend development in 2020.


  • stylelint - For linting CSS, sorting and ordering CSS rules. Must have.
  • eslint - For linting Typescript code. Must have.
  • postcss - For CSS browser vendor pre-fixes, purging of unused TailwindCSS rules.
  • husky - For running linting, commit rules before committing code.
  • commitzen - Provides a format to your git commit messages. The beautiful change log you saw earlier was possible because of this.
  • prettier - Standard for 2020. Does what it says, formats and makes your code look beautiful..πŸ˜‹

NPM Packages

  • framer-motion - All the beautiful animations on the site are powered by this amazing library. You just have to come up with the animations and leave the rest to framer. Highly recommend this one.
  • react-copy-to-clipboard - For copying code snippets to your clipboard.
  • react-infinite-scroll-component - For loading content on scroll in posts and nuggets page.
  • react-intersection-observer - For detecting if elements are scrolled into view.
  • react-markdown - For parsing the markdown from API's and rendering as HTML.
  • react-syntax-highlighter - Plugin for react-markdown that highlights code within the markdown.
  • react-share - Provides social sharing icons and functionality for posts and nuggets.
  • reading-time - Estimates the reading time of a given text.
  • sitemap - For generating the site's sitemap.xml for SEO.
  • camelcase - For converting hyphenated strings to camelcase strings.
  • @svgr/cli - For optimizing and converting SVG's into React components.


  • Google Analytics - I'm using it as my data store for posts view count and also for user demographics and content relevancy.
  • MS Clarity - This just came out and I really like the heat maps and session playback features they offer.


I am employed full-time so I had to find the time to develop. Most of the website was built over weekends, late nights and early mornings. I used libraries whenever I felt like I was re-inventing the wheel and stuck to coding stuff out when I wanted to showcase my skills.

Particularly, I wanted to ensure that all the canvas-based animations were coded out entirely by me without the use of third party libraries. As a result, I learnt a lot of math and ended up creating mini-libraries Vector.js, Particle.js for the animations on the canvas..πŸ‘»


After a month of development, I've done it. I'm really happy with the outcome. This is a lighthouse snapshot of my website.

Alt Text

As you can see, it's green across the board..🍾

I intend to add features to the website as I go along and more importantly I hope that this inspires me to blog more.

I also wanna thank Sowmya and Rashmi for their kind reviews and feedback and the Open Source Community in general for all the amazing libraries and tools..πŸ™

The source for the website is completely Open Sourced.

I sincerely hope that someone reads this and starts their own journey towards building their very own website.

See you in the next one. Peace.. :)

Top comments (32)

sgolovine profile image
Sunny Golovine

Awesome tip on using the API. I've been contemplating adding a blog to my project but like you wanted to have a single source of truth so for now all my articles are here. I might have to create an integration with

sidthesloth92 profile image
Dinesh Balaji

Thank You.. :) Yep, it has it's bugs but still worth a try.. :)

agcty profile image

Very cool article! I always find it best to write articles as you build things because this way you can wildly grow your audience. As for setting up tailwind with scss, it's a real pain, it took me weeks to finally understand what's going on. Anyway, I made an open source starter for that purpose:
It features tailwindcss, automatic purging of unneeded css, a working eslint, prettier and absolute imports. Maybe you'll find it useful!

sidthesloth92 profile image
Dinesh Balaji

Thank you.. :) I agree about your comments on Tailwind. I've set up everything you said but since I added SCSS it became a little become more complex.

honzza profile image
honzza dvorak

Great article summarizing the process and the tools. I am just going through the same thing - building my own website and learning a lot along the way (Next.js, Chakra-ui). Your article inspires me and highlights some of the tools to try out.
Thank you!

sidthesloth92 profile image
Dinesh Balaji

Thank you for reading the post and visiting the site. Appreciate it. Happy to have inspired you.. :)

pierreatwork profile image

Nice post, great portfolio !
I found a little bug, when i'm on the work page, if you Scroll down the page, then click on the menu and choose the posts page, you'll see that you're at the bottom of the page and you don't see the posts list.

Great work, love the home page with the little fish :)

sidthesloth92 profile image
Dinesh Balaji

Thank you for the feedback. I'll look into it. Happy that you liked the site.. :)

shadowtime2000 profile image
shadowtime2000 • Edited

I did make something like this. It didn't have a portfolio or anything, it was just the blog part. I didn't add the feature to actually look at the blog posts, it just linked you to DEV.

sidthesloth92 profile image
Dinesh Balaji • Edited

You can make use of the REST API too. It's awesome.. :D

ansnoussi profile image

Love your portfolio ! ✨✨✨ Just WOW !
I have been postponing creating my own for a long time now ! I think I'll inspire from yours and start !
Following on your steps, creating a simple animatable logo comes first, so any good tutorial recommendations ? πŸ€”

olex_green profile image
Olex Tkachuk

Typescript is great for big projects with long life-cycle support like enterprise. ES6 - has all cool staff that we like in JS, but as well and all minuses. I don't think that TypeScript is more modern and must be in 2020 - it's more boring :-)

sidthesloth92 profile image
Dinesh Balaji

Well the intention was to create a landing page canvas animation with good enough complexity to show off my coding skills. I settled for a pond like canvas animation where the fish follow the cursor and also eat food. In all fairness you can definitely look at them as tad poles. For me, as long as someone looking at it appreciates the math and complexity behind it, that's good enough for me. In the end, to every viewer their own perspective and that's fair game as well.. :)

1qk1 profile image
Panagiotis Skarlas

That's so cool. I love the API integration.

mihaeln profile image
Mike N.

Well done for not giving up and finding time and motivation to do it. Works pretty smooth.

sidthesloth92 profile image
Dinesh Balaji

Thank you for the kind words.. :)

bigyank profile image
Bigyan Koirala

can you tell me how did you kept all the commits on a single file? did you copied them manually or was there any automated process?

sidthesloth92 profile image
Dinesh Balaji

Check out I'll try to write a post on the same.. :D

simonholdorf profile image
Simon Holdorf

Cool thing!

sidthesloth92 profile image
Dinesh Balaji

Thank You!

javasusanto profile image

I just checked your portfolio. It's awesome bro...You must be really passionate about it.
Keep it up!

sidthesloth92 profile image
Dinesh Balaji

Yep, I love to design and develop. Thank You.. :D

dhruvindev profile image

This is lit, I'm a newbie who just got into coding and I also love to make websites. I'm looking forward to be a great developer just like you. Kudos !!!

sidthesloth92 profile image
Dinesh Balaji

Thank you for the kind words.. :)

andxre profile image

Your portfolio is beautiful

sidthesloth92 profile image
Dinesh Balaji

Thank You!

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React