//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 this section…

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

NextJs Tutorial 02: What Should Your Superb Portfolio Website Look Like For The Best Results?

//Note: You can watch the video version

There are fabulous portfolio websites, and there are some plain ugly ones. There are “arty” ones. Minimalistic ones. And so on, and on.

Web developers are especially keen on building “out of the ordinary” projects. Sometimes they do it on purpose. More often, it just happens that way because the developer didn’t prepare well.

Didn’t write their homework…

As I mentioned, we are about to build a SUPERB portfolio website for you that:

  • Helps you get the best job offerings
  • It makes you look cool in other people’s eyes
  • And that works for you 24/7.

But first…

What do I mean when I’m saying “SUPERB”?

That’s the question I answer with this short tutorial.

I will start answering by showing you a couple of good examples. I won’t show you bad ones because I want to imprint in your mind the proper “end result,” and I don’t wish to pick on someone and make them angry.

Example 01: The Website Of Josh Comeau

I like this one a lot because it’s arty and full of content. Right away, you can tell that its owner knows what they’re doing well. Although it’s not a “portfolio,” it’s one of the best personal websites I’ve ever visited.

The homepage is a simple one. It shows the latest blog posts, which help the author build some authority in the eyes of the visitors.

By reading a few of the latest entries, the reader concludes that Josh Comeau is not a skillful web developer only, but they are a really knowledgeable and good communicator.

The last one is important if you want to get ahead quickly in your career.

Often the wild success isn’t a matter of technical skills but a personal brand and soft skills.

Example 02: The Website of Robin Wieruch

The next one comes from Germany. It’s a good primer for a “marketing machine” that helps its owner achieve career and business success.

The website has a complex homepage…

It welcomes the user with a beautiful picture of a desert, plus the web developer’s name.

Right below it, we find a picture of Robin, their short bio, social media profiles, and a call to action “GET TO KNOW ME BEFORE YOU DIVE INTO MY CONTENT.”

The next page section is titled “What I Offer.”

Not every portfolio website needs to talk about “offers.” We can replace that section with a “My Skills” or “My Philosophy” Section and put the same cool-looking snippets with icons that briefly mention more information about us.

Below “What I Offer,” we find a “Portfolio ” section. Robin Wieruch is really productive, so they list here not individual projects but CATEGORIES of projects.

We can start with individual projects and later transition to listing categories.

And the last important section of the homepage is titled “Vita.” It’s a sleek vertical timeline that lists some major life events of the site’s owner. I consider it to be “the cherry on the cake.”

Example 03: My Portfolio Website

My portfolio website is something I created recently without much thinking about it. I used WordPress, and I didn’t optimize it for better performance.

It took me 4 hours (blog posts not included). I needed something quick to “mark my place on the internet.”

In the past, I had several freelance websites under different domains, which were way more sophisticated, but they aren’t online anymore.

Anyway…

I’m showing you sashevuchkov.com, not because of the used technology.

WordPress, not Next.Js, powers it.

I’m showing it to you because of the website structure and the content.

It has a complex homepage that welcomes the user with a playful message:

Then it introduces me:

Then it talks a little bit about my country of origin:

“I live in Sofia, the capital of Bulgaria – a crossroad where Western Pragmatism meets Eastern Wisdom.
So we are always on the fence…
Drinking wine and listening to melancholy songs in a desperate attempt to forget about the inevitable and painful fall that constantly threatens us but actually never happens.”

Just below, it mentions my core skills:

Then it talks about my working process, and finally, it lists some links to my blog posts

Cool right?

How should your superb portfolio website be structured?

You will notice some commonalities if you analyze Robin Wieruch’s website and mine. Both have complex homepages about the web developer – their skills, projects, blog posts, etc.

Both have dedicated blog archive pages, and both of them showcase some past or current projects.

That’s how your portfolio should be structured and look.

And one more thing…

No matter your next project – never start from a “clean slate.” Use the strategy I’ve just demonstrated to you in this article.

Find some good examples. MODEL, but not COPY, the best part of them… and you will never again struggle to produce something above average.

In the following video, I will share a shortcut to a website of equal or better quality. It will look fast and sleek. High-grade, professional asset.

So stay tuned…

What did we talk about in this tutorial?

  • Three good examples to learn from
  • Why do I consider them good examples
  • A strategy that will help you always produce above-average stuff

NextJs Tutorial 03: A Shortcut To A Superb Portfolio Website With Next.Js

//Note: Get the video version of this section

I know you can’t wait to start coding. In the end, we’re web developers, and we love doing it.

And yet, here we are…

This tutorial is the third installment of my series for building a superb portfolio website, and I still don’t have an intention to make you open your favorite code editor.

We’ll do that the next time…

When we’ll set up our Next.Js project for success.

But now I want to talk with you about one common big mistake. It’s so widespread that even sessional professionals fall victim to it no matter their high achievements or years of experience.

Once they go for their own website, often they create something ultra-functional and well-coded, but something with…

ZERO marketing or design value

That happens because we like to think of ourselves as extraordinary guys who can handle every possible challenge related to web development.

But that’s far from the truth…

We’re web developers, but we aren’t DevOps engineers, web designers, UX experts, SEO specialists, etc.

So by trying to be one of these, too – web designers, for example, we’re making a big mistake that leads to a not-so-visual-appealing website. Not that the world has never seen a specialist who is both a web developer and a web designer, but most often, that’s not the case.

That’s not the case when we’re talking about me…

And if that’s not the case when we’re talking about YOU, then we must approach the design challenge more strategically…

How To Approach The Design Challenge More Strategically

We’ll use a template!

Now, there is a fad to search for a template that matches your choice of technology. For example, “react templates,” “nextjs templates,” and so on.

You should know that a template advertised like created for Next.Js can often have a low code quality. It’s beautiful, but it’s not appropriately sliced into components and pages, so you will need to do a lot of refactoring.

It’s better to get an “HTML template” or “UI Kit”…

If you have some dollars to spend, I advise you to do it. The Internet is full of free templates, and you can definitely find something worthy (after a lot of browsing), but you’ll have a way bigger choice if you go the paid route.

Anyway…

I will use a free HTML template.

I liked the one named “Ollie” on page 3 of free-css.com. It’s not quite what I need as a website structure, but I like it as a visual appeal.

So I’ll use its visual appeal and structure my new website like sashevuchkov.com and/or robinwieruch.de. That means I will still need to develop custom components and sections that are not part of the template, but it will be easier than creating everything from scratch.

In the following tutorial, we’ll set up a Next.JS project the proper way, and in the tutorial after it, we will start planning our components and pages.

So stay tuned.

Let’s wrap up what we talked about:

  • One big mistake that leads to many plain ugly websites
  • The right way to approach the web design challenge before us if we’re not web designers
  • And how to find a good HTML template or UI kit

Cheers,
Sashe Vuchkov

PS. You can get the next part of the tutorial, “Setting Up Next.Js Project Properly,” here