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

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • react-motion

    A spring that solves your animation problems.

    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.

  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    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.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • vercel

    Develop. Preview. Ship.

    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.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    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.

  • sendgrid-nodejs

    The Official Twilio SendGrid Led, Community Driven Node.js API Library

    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.

  • react-spring

    ✌️ A spring physics based React animation library

    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.

  • React

    The library for web and native user interfaces.

    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

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • Next.js

    The React Framework

    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

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts