DEV Community

How I created my portfolio with Nextjs and PlainCSS!

Randeep Rana on October 19, 2021

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 ...

Read full post

Luke • Oct 20 '21 • Edited

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 • Oct 20 '21

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😊.

Shivam • Oct 19 '21

good one

Randeep Rana • Oct 19 '21

Thank you Shivam❤

Alexandr Rešetňak • Oct 20 '21

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 • Oct 20 '21

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 • Mar 9 '22

The glitch shows on screen size > 1440px

Markell Richards • Oct 20 '21

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 • Oct 20 '21

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😊

Sagarmoy Sengupta • Oct 19 '21

Hi Randeep,

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

Randeep Rana • Oct 19 '21

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

Akinwande Akin-James • Oct 20 '21

Looks good

Randeep Rana • Oct 20 '21

Thank you so much David😄

Marzooq • Oct 19 '21

Nice one!🔥

Randeep Rana • Oct 19 '21

Thank you Marzooq❤

Suraj Rana • Oct 20 '21

Awesome post🤗

Randeep Rana • Oct 20 '21

Thank you Suraj😊

Aman Ahmed • Oct 20 '21

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

Randeep Rana • Oct 20 '21 • Edited

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

ADAMADIOUF • Oct 19 '21

Nice work dude 🔥🔥

Randeep Rana • Oct 20 '21

Thank you Adamadiouf, Glad to know you liked it😊

Suryakant-thombre-au8 • Oct 20 '21

Awesome bro

Randeep Rana • Oct 20 '21

Thank you Surya😊

Ahmed Zisan • Oct 23 '21

Portfolio isn't good enough.

Randeep Rana • Oct 24 '21

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

Md. Fahim Bin Amin • Oct 26 '21

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

Randeep Rana • Oct 27 '21

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😄

Mohit Maroliya • Oct 20 '21

Nice article.
How did you added the video in background?

Randeep Rana • Oct 21 '21 • Edited

I Used <Video /> Tag for it. I put video tag and h1 tag in the same container. I made position absolute for H1 tag and fixed it to the center. Its very simple do try it out. You can take reference from my code.
github.com/Randeep-Rana-au8/portfolio