DEV Community

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

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 ...
Collapse
 
luchulainn profile image
Luke • 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.

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

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

Collapse
 
mohitm15 profile image
Mohit Maroliya

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

Collapse
 
irandeeprana profile image
Randeep Rana • 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

Collapse
 
himanirana profile image
Himani RANA

Yo Bro🔥....Keep it up!!

Collapse
 
irandeeprana profile image
Randeep Rana

Thank you Himani😄