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😉

Discussion (33)

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 Author

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
smileyshivam profile image
Shivam

good one

Collapse
irandeeprana profile image
Randeep Rana Author

Thank you Shivam❤

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 Author

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

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
surajranadev profile image
Suraj Rana

Awesome post🤗

Collapse
irandeeprana profile image
Randeep Rana Author

Thank you Suraj😊

Collapse
suryakantthombreau8 profile image
Suryakant-thombre-au8

Awesome bro

Collapse
irandeeprana profile image
Randeep Rana Author

Thank you Surya😊

Collapse
davidakinjames profile image
Akinwande Akin-James

Looks good

Collapse
irandeeprana profile image
Randeep Rana Author

Thank you so much David😄

Collapse
wkazisan profile image
Waiz Kuruni Ahmed

Portfolio isn't good enough.

Collapse
irandeeprana profile image
Randeep Rana Author

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

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 Author

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

Collapse
marzooq13579 profile image
Marzooq

Nice one!🔥

Collapse
irandeeprana profile image
Randeep Rana Author

Thank you Marzooq❤

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 Author • 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
adamadiouf profile image
ADAMADIOUF

Nice work dude 🔥🔥

Collapse
irandeeprana profile image
Randeep Rana Author

Thank you Adamadiouf, Glad to know you liked it😊

Collapse
drack profile image
Akshat Austin

Great work

Collapse
irandeeprana profile image
Randeep Rana Author

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 Author

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 Author • Edited on

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 Author

Thank you Himani😄