DEV Community

Cover image for How I built my portfolio using Next.js, TailwindCSS, TypeScript and Framer Motion
Vivek Mittal
Vivek Mittal

Posted on


How I built my portfolio using Next.js, TailwindCSS, TypeScript and Framer Motion

By mid february'22 while serving my notice period I decided to migrate my portfolio from CRA to next.js and also gave a thought about adding the blogs to my own portfolio website. So I decided to go with the following tech stack listed below:

  1. Next.js
  2. TypeScript
  3. Framer Motion
  4. TailwindCSS
  5. SendGrid


Next.js is a production ready framework for React. It comes with some great features out of the box like SSR/SSG/ISR, route pre-fetching, file system based routing, and most importantly SEO. So when I created my portfolio with CRA the TypeScript support is not good along with poor SEO. The need to have a separate backend server just to make your contact form working was a nightmare (if one is not using Netlify).
Due to all the above problems I decided to go with Next.js


TypeScript is a superset of JavaScript which provides optional typing and compiles down to JavaScript. While working with JavaScript I would occasionally struggle with type of a variable/object or any data type. That's where TypeScript comes to the rescue and let's us make our application type safe from the beginning itself.
Once you're introduced with TypeScript, you will never go back to writing JavaScript.

Framer Motion

Framer Motion is a production ready animation library for React. I felt the need to add some "cool" animations to my portfolio so that it looks more alive and interactive. One can argue between choosing React Spring or React Motion but that depends on the use-case and since I've already worked with Framer motion before so I went with this.


TailwindCSS is a utility first CSS framework which is highly customisable and can be optimised using PurgeCSS. It helps in building complex responsive layouts easily.


So I've a contact form in my portfolio website and I was going to host it on Vercel and not Netlify so I was in need of an emailing service to work flawlessly with my contact form which can be customised according to my needs as well. Then I did some research and came across SendGrid which can be easily integrated with Next.js (thanks to the ability of Next.js to add server code) and decided to use this.


There are some other packages such as remark-prism, react-toastify, react-icons and next-pwa which I used to add syntax highlighting, notifications, icons and make my application a progressive web app (PWA) respectively.

Conclusion and what's next?

It took me around 2 weeks on and off to complete my portfolio website.
Down the road, I'll add sitemap, optimise it further for mobile devices, add reactions to blog-posts, add a CDN to serve static-images and maybe use a CMS to store and fetch all my blogs/projects data.

Top comments (1)

svgatorapp profile image

Excellent strategy

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!