DEV Community 👩‍💻👨‍💻

Cover image for How I created my portfolio with Nextjs and PlainCSS!
Randeep Rana
Randeep Rana

Posted on

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😉

Top comments (34)

Collapse
 
luchulainn profile image
Luke • Edited on

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.

Collapse
 
irandeeprana profile image
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😊.

Collapse
 
resetnak profile image
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

Collapse
 
irandeeprana profile image
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😊

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

The glitch shows on screen size > 1440px

Collapse
 
smileyshivam profile image
Shivam

good one

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Shivam❤

Collapse
 
solstics profile image
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.

Collapse
 
irandeeprana profile image
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😊

Collapse
 
loarsawcorporation profile image
Aman Ahmed

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

Collapse
 
irandeeprana profile image
Randeep Rana • Edited on

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

Collapse
 
davidakinjames profile image
Akinwande Akin-James

Looks good

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you so much David😄

Collapse
 
sagars01 profile image
Sagarmoy Sengupta

Hi Randeep,

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

Collapse
 
irandeeprana profile image
Randeep Rana

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

Collapse
 
surajranadev profile image
Suraj Rana

Awesome post🤗

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Suraj😊

Collapse
 
wkazisan profile image
Waiz Kuruni Ahmed

Portfolio isn't good enough.

Collapse
 
irandeeprana profile image
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😄.

Collapse
 
suryakantthombreau8 profile image
Suryakant-thombre-au8

Awesome bro

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Surya😊

Collapse
 
adamadiouf profile image
ADAMADIOUF

Nice work dude 🔥🔥

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Adamadiouf, Glad to know you liked it😊

Collapse
 
marzooq13579 profile image
Marzooq

Nice one!🔥

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Marzooq❤

Collapse
 
drack profile image
Akshat Austin

Great work

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Akshat❤

Collapse
 
fahimfba profile image
Md. Fahim Bin Amin

Your YouTube button takes to the Twitter site of yours (in the footer section).

Collapse
 
irandeeprana profile image
Randeep Rana

Hi Md. Fahim, Thank you so much for your feedback I highly appreciate it. Actually I don't have any YouTube account right now so once I create it, then I will update it there😄

Collapse
 
ahmadktn profile image
Ahmad Babangida

Awesome post👍
I have been trying to build my portfolio but I have no idea where to start, but this post layed a foundation

Join us at DEV
Yes, this is technically an “ad”, but really we just want to ask if you want to join DEV. We have 900k+ developers reading, posting, and enjoying community, and would love to have you.   Create an account and continue your coding journey.