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😉

Comments

[Luke]

Quite a decent start to a portfolio. I really like the animated home page header.
There are a few things I think you could improve on:

• Your home button doesn't work unless you click directly on the text, which sometimes makes it seem unresponsive. You should make the entire hover area the button.
• You could also think about adding a Home button to your navigation for redundancy. At first I wasn't sure where RR would take me. I think the addition of Home before About would be a usability improvement.
• Be mindful of your colour choices, the colour you're using for hover on your navigation coupled with your font face and size choices makes it difficult to read.
• Your About, Projects and Blogs pages are a bit bland compared to the home page and I think the big header space on those pages could either be reduced in scale, or improved by increasing the text size or adding something similar to the home page.

Overall I think it's good, keep going with it :)

edit: Just adding the edit here that the red navigation hover on the dark navy background does not meet minimum specs for WCAG2.0 AA compliance and the navigation hover effect is inconsistent on your projects page, which makes it even harder to read there.

[Randeep Rana]

Hey Luke, thank you so much for the deep analysis❣️, this is the best feedback I got till now, I will surely add these changes to the next update till then please stay connected😊.

[Alexandr Rešetňak]

Hey, nice job! Just have a question. Is this the behaviour you wanted? rana-portfolio.vercel.app/about On the about page the width is not like fitting the whole screen. Thanks

[Randeep Rana]

Hey Alexandr, Thank you so much for your feedback ❣️, I just checked it and i didn't find issue on my pc it's working fine, can you please tell me on which screen size you are facing the issue, so that I can fix it😊

[Paul C. Ishaili]

The glitch shows on screen size > 1440px

[Shivam]

good one

[Randeep Rana]

Thank you Shivam❤

[Markell Richards]

For projects, if you copy a design from a youtube course or udemy. At the minimum, at least change it up a bit. I recognized at least two of the designs immediately and makes me question your ability.

[Randeep Rana]

Hey Markell, Yes there are some projects design from youtube and I will surely change it. Thank you so much for the feedback❣️, and so sorry about it. I will update you once it is done😊

[Aman Ahmed]

It's great but .You literally used a sword to just to trim finger nails.

[Randeep Rana]

Yes You are right bro😂 but I love to try new things that's why this time I choose Nextjs for my portfolio 😄

[Akinwande Akin-James]

Looks good

[Randeep Rana]

Thank you so much David😄

[Sagarmoy Sengupta]

Hi Randeep,

How do you manage the data in UI?
Did you write any API for it?

[Randeep Rana]

Hi Sagarmoy😊, Its a static website so I didn't added any API here, All data is pre-defined in frontend only.

[Suraj Rana]

Awesome post🤗

[Randeep Rana]

Thank you Suraj😊

[Waiz Kuruni Ahmed]

Portfolio isn't good enough.

[Randeep Rana]

Hey Waiz, Thanks for the feedback I will surely try to improve it in the next upcoming days. Till then please stay connected😄.

[Suryakant-thombre-au8]

Awesome bro

[Randeep Rana]

Thank you Surya😊