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😉
Latest comments (34)
Your YouTube button takes to the Twitter site of yours (in the footer section).
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😄
Portfolio isn't good enough.
Hey Waiz, Thanks for the feedback I will surely try to improve it in the next upcoming days. Till then please stay connected😄.
Awesome post👍
I have been trying to build my portfolio but I have no idea where to start, but this post layed a foundation
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.
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😊
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:
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.
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😊.
Nice article.
How did you added the video in background?
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
Awesome bro
Thank you Surya😊
Looks good
Thank you so much David😄
Yo Bro🔥....Keep it up!!
Thank you Himani😄
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
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😊
The glitch shows on screen size > 1440px
It's great but .You literally used a sword to just to trim finger nails.
Yes You are right bro😂 but I love to try new things that's why this time I choose Nextjs for my portfolio 😄
Awesome post🤗
Thank you Suraj😊
Nice work dude 🔥🔥
Thank you Adamadiouf, Glad to know you liked it😊
Hi Randeep,
How do you manage the data in UI?
Did you write any API for it?
Hi Sagarmoy😊, Its a static website so I didn't added any API here, All data is pre-defined in frontend only.
Nice one!🔥
Thank you Marzooq❤