DEV Community

Cover image for NextJs Tutorial: The Full-Stack Story Of Building Your Superb Portfolio Website
Sashe V.
Sashe V.

Posted on • Originally published at buhalbu.com

NextJs Tutorial: The Full-Stack Story Of Building Your Superb Portfolio Website

//Note: Watch the video version here

Dear Next.Js Aficionado

If you want to build an amazing portfolio website that’s beautiful and looks professional…

A website that helps you get the best job offerings and makes your friends a little envious of your high skills to create such valuable “assets” from start to finish, then the following few paragraphs will be the most important thing you’ll discover today.

I’m starting a tutorial series to share all my knowledge on creating websites and making them work for you 24/7.

My most recent CV tells the story of a web developer with three years of professional experience, but I’ve been building sites since 2006.

Mainly for personal needs…

And now I’ve decided to talk about the ups and downs, the easy stuff, and the hard stuff. The pitfalls, the omissions, the errors, the failures, and, of course, the success I’ve experienced.

What can you expect from this tutorial series?

  • We will make a plan that will lead us to the best portfolio website
  • We will learn how to set up our Next.JS project for success
  • We will use a lot of React.Js to create reusable components and pages
  • We will integrate Firebase as a home for the content of our website
  • We will learn about Markdown and how to use it to publish well-formatted articles
  • We will use Firebase to implement some basic user authentication
  • And finally, we’ll deploy our website on Vercel, so it’s accessible to all
  • We will create a truly amazing portfolio website, and we have a lot of work to do, so let’s get our hands dirty…

First, it’s important to define our stack

This exhaustive tutorial focuses on demonstrating how to use Next.Js properly. But Next.Js can’t be used in isolation. There are some prerequisites that you need to have before you accept the challenge.

It would help if you had a clear understanding of HTML, CSS, and JavaScript. These are non-negotiable. Everything we will do is built on top of these technologies, and if you’re a total novice, I strongly advise you to put this tutorial for later.

Learn the basics and then come back.

The purpose of your portfolio website is to help you get the best job offerings, but no matter how good is it, you will fail to get hired if you don’t know the basics.

So first things, first.

Next, we will use React.js

You can definitely learn this JavaScript library while creating your portfolio. Next.Js is a react framework, so there’s no reason to delay using it. You can master them both at the same time.

And finally, there is a right and wrong way to set up your project. There is a right and wrong way to approach the creation of a website. There’s much stuff that only a pro with years of experience can know about.

I have created many websites with a plethora of technologies. I have been playing this game for years, so I clearly understand what the “end result” should be and will gladly share everything I know with you.

In the following video, we’ll apply some “project management.”

I’ll reveal a strategy to help you discover what your website should look like. We’ll plan its structure, sections, navigation, and DB document types. And I will explain why we’re doing what we’re doing.

Ok. Let’s wrap it…

  • We talked about what you can expect from this tutorial series on building your portfolio website
  • We talked about the stack and prerequisites you need to complete the project successfully
  • And we talked about some of my experience that allows me to share with you “insider stuff.”

Cheers,
Sashe Vuchkov

Top comments (0)