Making a Portfolio with Next.js | Introducing

1. Prepare yourself from beginning

If you've found this article, chances are you're thinking about building your own website but aren't quite sure where to start.

Maybe you don't have any coding experience, or perhaps you've always thought building a portfolio website would be too complicated.

The good news is that you don't need to be a programmer to get your own website up and running.

In this tutorial series, we'll walk you through the process of building and publishing your own portfolio website, starting with the fundamentals of web technology. We'll assume that you know little to nothing about web development, and no prior programming experience or computer science knowledge is required.

We'll use a ready-made template and a one-click deployment tool, so you can focus on making the website your own instead of worrying about complicated technical setups.

A little note on using AI

Building a website has become easier than ever in 2026 and many of the tasks covered in this tutorial can now be completed simply by describing what you want to an AI tool.

However, you should always bare in mind that AI-generated code isn't always reliable or secure. Without understanding what the AI is doing, you might introduce bugs, security vulnerabilities, or unexpected behaviour into your website. That's why we've included additional guides to help you understand how to customise, maintain, and secure your website without relying entirely on AI.

While you could use AI coding tools to complete almost everything in this series, we strongly encourage you to try doing things yourself first, using AI to explain unfamiliar concepts, review your changes, or help troubleshoot problems.

After all, the goal of this tutorial isn't just to help you publish a portfolio website, but also to help you understand how it works.

Of course, if you're short on time and simply want a good-looking portfolio website, feel free to use whichever AI tools work best for you. And we also prepared AGENTS.md that might help you (and your coding agents).

2. What Is a Website?

We are now going to build a website, but what exactly a website is?

You probably visit dozens of websites every day, whether you're searching for something on Google, watching videos on YouTube, or reading an article online. But have you ever wondered what these websites are actually made of?

Websites and Webpages

First, let's clarify two terms that are often used interchangeably: website and webpage.

A webpage is a single page you can view in your browser. For example, the homepage of a portfolio, or a page showing a particular project.

A website, on the other hand, is a collection of related webpages and resources, usually accessible under the same domain name.

Think of a website as a book, and webpages as the individual pages inside it.

For example, your portfolio website might contain:

• Home — A brief introduction about yourself.
• Projects — A collection of your work.
• About Me — Your background, skills, and experience.
• Contact — Ways for people to get in touch with you.

Of course, not every website needs multiple pages. Some portfolio websites display everything on a single, scrollable page.

What Makes Up a Webpage?

Most modern webpages are built using three fundamental web technologies: HTML, CSS, and JavaScript.

HTML (HyperText Markup Language) defines the structure and content of a webpage. It tells the browser what elements exist, such as headings, paragraphs, images, and links.

CSS (Cascading Style Sheets) controls how those elements look. It determines things like colours, fonts, spacing, and layout.

JavaScript makes webpages interactive. For example, it can open a navigation menu, filter your projects, or update content when someone clicks a button.

You can think of them as building a house:

• HTML is the structure and the rooms.
• CSS is the decoration and interior design.
• JavaScript is the functionality, such as lights and automatic doors.

let age = 20;
age = "twenty"; // Valid JavaScript

let age: number = 20;
age = "twenty"; // Type error: string is not assignable to number

These technologies work together to create the webpages you see and interact with every day.

Don't worry about learning how to write HTML, CSS, or JavaScript just yet. Our portfolio template already includes everything needed to get started, and we'll explore these technologies as we customise the website in later chapters.

For now, just remember that a website isn't a single image or document. It's a collection of content, resources, and code that your browser uses to display webpages.

3. How does the web work?

Now that we know what a website is made of, let's explore how it actually works.

Imagine you want to visit someone's portfolio website. You open your browser, type https://mironchen.me into the address bar, and press Enter.

A few moments later, the website appears on your screen.

It seems simple, but do you know how your browser knows where to find the website and how the website gets delivered to your computer?

Browser

A browser, such as Google Chrome, Safari, or Firefox, is the application you use to access websites. It requests website resources and displays them on your screen.

In face the broswer itself could be as complicated as an entire operating system.

A server is a computer or software system that provides resources or services to other devices over a network. The web server responses to requests and sending back website content(HTML, CSS, JavaScript and media).

Think of it like ordering food at a restaurant:

• You (the browser) request something from the menu.
• The kitchen (the server) prepares and provides what you requested.
• The food (the response) is delivered back to you.

This is known as the Client–Server Model. Your browser acts as the client, sending requests to a server, which processes them and returns responses.

IP Addess and Domain Name

But how does your browser know which server to contact?

Devices communicating over the Internet use IP addresses (Internet Protocol addresses) to identify network interfaces and route data to the correct destination.

For example, an IPv4 address might look like this: 203.0.113.10

However, remembering a long string of numbers for every website would be inconvenient for ordionary users.

That's why we use domain names, such as this blog mironchen.me.

A domain name is a human-readable name that can be used to access a website or other Internet services. You could just type the domain name to any broswer, and the broswer will lookup the right server to serve for you.

DNS: The Internet's Address Book

When you enter mironchen.me, your browser needs to find out where to connect.

This is where DNS (Domain Name System) comes in.

DNS acts like an address book for the Internet. It helps translate domain names into IP addresses that computers can use to establish connections.

A simplified example looks like this:

mironchen.me -> DNS -> 76.76.21.21

In reality, DNS can involve multiple servers, cached results, and different types of records. But for now, you only need to remember one thing:

DNS helps your browser find the network address associated with a domain name.

We will explore more when introducing how do set up custom domain for your website.

HTTP and HTTPS: How They Communicate

Finding the server is only part of the process. Your browser still needs to ask for the webpage, and the server needs to know what to send back.

That's what HTTP (Hypertext Transfer Protocol) is for.

HTTP defines how browsers and web servers exchange requests and responses.

For example:

1. Your browser sends a request asking for a webpage.
2. The server processes the request and returns a response.
3. Your browser receives the necessary resources and renders the webpage on your screen.

You may also notice that most website addresses begin with https:// rather than http://.

The extra S stands for Secure.

HTTPS uses encryption to protect the communication between your browser and the website.

However, HTTPS does not guarantee that a website itself is trustworthy or free from security vulnerabilities.

We will explore more about HTTPS when signing up certificate for your website.

Putting It All Together

So far, we've learned what websites are made of and how they work behind the scenes.

We now know that HTML, CSS, and JavaScript are the building blocks of most websites, and that browsers communicate with web servers to retrieve and display webpages. We've also explored how domain names, DNS, and HTTPS help us access websites through familiar addresses and communicate with them securely.

You don't need to memorise everything we've covered. As we continue building and customising our portfolio, we'll revisit these concepts and see how they work in practice.

But there's still one thing we haven't done yet: put our own website on the Internet.

Having a website on your computer is one thing. Making it accessible to anyone, anywhere, is another.

Normally, this involves setting up a hosting environment, preparing your website for deployment, and configuring how people can access it. Fortunately, modern hosting platforms can take care of much of this work for us.

In the next section, we'll use Vercel and a one-click deployment template to get your portfolio online, without having to configure a server yourself.

Let's get your website online!