Being a developer, to be specific a web developer it becomes very important to have one personal portfolio website of yours. A good portfolio reflects you having good skills. A decent portfolio should contain your intro, skills, projects, blogs, contact details, and a good UI/UX.
This website is having a hero section giving a short intro about me. Followed by that the blog section comes.. where it shows the most recent/featured blog post. Scrolling down one gets the project section displaying some of my hobby projects. The last section is the contact section where one can contact me via email or social media. The footer section contains the social media links. The website is fully responsive and is having a dark mode. The website is also having a blog page where I can write blogs about my learnings and share it with the world. There is also a guestbook page where people can leave a message for me. I actually got this idea from leerob's. The website is also having a custom 404 page. Apart from this there is cool spotify compnent above the footer section which shows the song I am currently listening to.
Tech stack
I have used the following tech stack to build my portfolio website.
Next.js
Coming to the frontend I have used Next.js . The basic reason I wanted to use it is that it is very fast. Features like Server Side rendering, etc is actually very useful. A fast loading website leaves a very good impression on the viewer. None would like to wait hours for something everyone is worried about their time.
Tailwind CSS
Talking about the CSS part.. I am a huge fan of tailwindcss. I use it everytime for styling. Its a tedious job to use vanilla css for huge projects. Tailwindcss makes work easier and faster.
MDX
MDX is a very useful thing. It combines react with markdown. It is very easy to use and very useful. You write the things in markdown and its gets loading as a page... as easy as that... I have used it for the blog part of this website. The blogs here are all written in markdown...
Imagekit.io
For the image optimization I have chosen Imagekit. Its very easy to use and the free tier was enough for me. I have used it for all the images used here.
Fauna
For the database part I have used Fauna. It is a very easy to use database. It is a serverless database. It is very easy to use and the free tier is enough for me. I have used it for the guestbook.
Graphql
For the API part I have used Graphql. It is a very easy to use API. I have used it for connecting fauna databse to the guestbook.
NextAuth
To avoid spamming in the guestbook the need for authentication is required. For the authentication part I have used NextAuth.
Vercel
Now after building the whole thing I need to deploy it to the production so that others can have a look with the help of a single URL. For the deployment part I have used Vercel. Nextjs and Vercel together works very efficiently.
Other Packages used
Apart from the above mentioned packages I have used some other packages too. They are as follows.