How I created my portfolio with Nextjs and PlainCSS!

At present Next.js has been a very popular library to build beautiful, scalable Full-Stack Applications. Today I would like to share my experience on building a portfolio with Next.js.

Before going to my Portfolio's explanation, Let me give a brief intro about Next.js.

Why Next.js?

Next.js is a React Framework used for front-end development that enables us to use functionalities such as generating static websites and server-side rendering for React-based web applications.

It's a great tool to build your next website. It has many great features and advantages, which can make Next.js your first option for building your next web application.

If you want to learn more about it please visit Next.js Official Website.

The Idea.

One Year ago I built my last portfolio website with React.js and SASS, and till now I was using that one. But Last weekend I thought why not make a new portfolio. Because it's my current fav framework so I picked Next.js and I started working on it.

Steps

Firstly I was planning to make it only single page portfolio, but then I decided to use Next.js routing and lets make different pages for different data, like about page, blog page, contact page and projects page.

After Deciding Number of pages, I started working on Homepage or you can say landing page. I divided homepage into three sections, Hero Section, About, Skills.

Background Videos in website is always excites me, so I used a video in Hero Section's background, and I used Kaushan script fonts for Main Heading in Hero Section.

In About Section, I added two boxes one for image and second for details and A button to read more, and it redirects to about page.
For Skills section, I added logos of all framworks and technologies in a single box. I prefer logos instead of text because it creates attention.

Let's come to Other Pages, For Project's Page I made reusable component, this component create a box and it divide the screen width equally into two boxes and one box contains the Project's Image and other box contains the project's title and description. I loop through this component in projects data array and my projects page is ready.

About page contains the same component which we have in project page and I added my data in it and it works fine for about page as well.

Please Have a look on my Portfolio.

If you want to check the source code please visit my Github Profile.

Hope you liked it

Thank you guys for reading my first blog. Feel free to write your view and suggestion. Your feedback is always appreciated.

Happy Coding