In this post, following up on the previous article, I'll explain the process of actually building the portfolio website.

1. The Beginning: A Treacherous Journey

It wasn't a specific point in time where I said, "Okay, let's start building now." Rather, as I gradually learned FE technology stacks, I started to think, "I can start building this bit by bit."

However, I wanted to avoid designing the entire website from scratch myself. Since I had absolutely no experience in this area, I was in this state:

I didn't even know what I didn't know...

I had never done any website planning or design work before. I was at a loss even deciding whether to place the menu at the top or on a left sidebar. It was also difficult to grasp what the current design trends were and how to best arrange design components based on users' device sizes. It wouldn't be easy to start learning all of this from scratch.

One of the initial reasons for starting this project, "I want to build it myself from the ground up," felt like a pretty daunting task.

And I cautiously suspect that some of you reading this might want to create your own web service and, if you haven't done it before, you might be facing similar concerns. And I also think this isn't a matter of how long or short your developer career is.

It might be inevitable if you're caught up in the whirlwind of company work after getting a job as a developer. Especially for backend developers like myself, these concerns are unavoidable.

The rest of this article describes how I overcame these concerns and, more importantly, how I turned them into a source of enjoyment.

2. Starting with the Simple Things

One of the things I mentioned in the previous article was that I watched clone coding videos on YouTube to learn FE technologies. After getting a handle on TypeScript and React (Next.js), I started watching clone coding videos.

Since the first thing I decided to build was a portfolio website, I searched YouTube using keywords like "Portfolio" and "React portfolio" and found over 10 videos. I chose these 10 videos based on their thumbnail images and view counts.

My plan was to pick just one of these 10 videos, build it exactly as shown, deploy it, and even purchase a domain. I felt that having a visible result would motivate me more.

YouTube clone coding videos are generally similar, but they follow a certain pattern. Most videos start with a demo. They introduce what features or services will be built.

So, I watched the demo sections of all 10 videos I had selected and chose the one that demonstrated the demo I most wanted to build.

It's this 5 hour and 20 minute video.

The video description even includes a link to free portfolio resources, and the comments are full of people thanking the creator, saying they built their portfolio websites based on this video. I thought it would be okay to follow along.

Since I had already established the basics before starting the clone coding, I didn't have much trouble following the video. Also, this portfolio code focuses heavily on rendering the screen and doesn't include much complex logic. So, I didn't feel overwhelmed starting out.

I remember it took me about 7 hours to watch the entire 5-hour video. This is because I paused the video from time to time to try implementing things myself or to study TypeScript and CSS concepts I was curious about. Also, I skipped the latter part of the video, which covers animation using CSS.

So, I was finally able to complete the portfolio page to a certain extent. The video uses mock data as portfolio content. It creates a portfolio with data for a fictional person and projects. Once the code was somewhat complete, I removed this mock data and entered my own real data.

Below, I'll showcase the results after adding my introduction, experience, and details about the projects I've worked on.

Hero section

• I wanted to include an impactful phrase, but I couldn't come up with anything, so I used ChatGPT.

Projects

• This section introduces the projects I've participated in. The description is on the left, and the image is on the right.

Career & Tech stacks

• Cards introducing the three companies I've worked for are horizontally scrollable.
• It introduces the languages and frameworks I'm familiar with and the tools I use.

Contact

• These are my social links.
• Contact will likely become an independent top-level menu in the future.

What's Next?

I felt a sense of accomplishment after completing my own portfolio. Especially after spending some time writing about my career and past projects, it started to look pretty good.

So, I immediately decided to deploy it to a remote hosting server.

Vercel

Vercel is the company that created and maintains Next.js. Therefore, it makes deploying Next.js applications incredibly easy. I deployed my project code by uploading it to GitHub and connecting the repository to Vercel. For detailed deployment instructions, refer to this document.

Vercel also provides a service for purchasing domains and connecting them to the deployed code. I was able to do this without even reading the guide documents, which I attribute to Vercel's very clear UI/UX. The domain purchase cost is $14 per year. This is the amount I spent on purchasing the domain and connecting it to the project.

Finalizing the Portfolio

Even after deploying to the server, I mainly focused on modifying the portfolio content (e.g., career details, project descriptions), and I also continued to make minor design adjustments. The video does explain how to apply responsive design to fit different screen ratios, but I also tested various screen ratios myself and checked for any awkwardness, making small adjustments along the way.

3. Raising the Difficulty a Bit

After completing the portfolio functionality, I gained a bit of confidence.

I immediately started developing the blog feature. I had considered the blog feature to some extent from the beginning of this project. Therefore, I was able to start without feeling any psychological pressure. In fact, I even enjoyed thinking about how to develop it.

Things to Consider When Implementing Blog Functionality

Before diving into blog implementation, I thought about how to manage the blog posts. The goal of the service I'm building is for me to write blog posts and publish them. Since other people won't be logging in to write posts, I didn't need WYSIWYG-based writing functionality.

However, blog posts shouldn't just display text simply. Various means of expression are needed for readability. It should be possible to clearly display main headings, subheadings, and minor headings. In addition, I thought it should be possible to insert images, videos, and code in various programming languages. For example, effects like these:

def greet(name):
    return f"안녕하세요, {name}님!"

print(greet("박진영"))

• Syntax highlighting for a specific language
• Line numbers + highlighting specific lines + highlighting specific keywords

So, I started researching various technical documents. I asked related questions to Claude and ChatGPT to get a sense of how these requirements could be implemented. I searched with keywords like Next.js + Blog, Blog CMS, etc.

Starting Blog Implementation!

With a rough idea of how to implement it, I once again searched for YouTube videos. Some videos were lectures that simply explained how to build a blog system with Next.js, while others were clone coding style videos.

The video introduced below was very helpful as it thoroughly covers implementing a blog service based on Next.js. As mentioned earlier, I had considered the blog from the beginning when planning the initial service development, so I chose this blog development video among many Next.js lecture videos on YouTube.

This video is a little over 7 hours long. The first 5 hours cover developing the blog system, and the last 2 hours introduce additional features like image optimization and SEO.

The reason for the length is that this video also covers the entire implementation from start to finish. So, I skipped some parts unrelated to blog implementation while watching.

Blog Complete!

Instead of working directly on my existing portfolio module, I created a new module and wrote the code there while watching the video. However, this caused some minor issues. The blog management library (Contentlayer) introduced in this video doesn't work with the latest Next.js version. My portfolio module was using Next.js v14, but Contentlayer is not currently maintained and doesn't support the relatively latest Next.js.

I realized this when I was almost finished watching the 7-hour video and was about to migrate the blog code to my original portfolio module, which caused a slight mental breakdown.
However, I eventually managed to complete it by attaching a different blog library to the portfolio module. I remember spending about half a day extra on this. (I plan to introduce the details related to this part in the next article, probably).

While adding the blog functionality to the original portfolio module, I also reorganized the screen.
I added a Blog menu to the top menu of the existing portfolio and also created a separate Home page.

• Home (route: /)
  • Introduces the most recent blog post.
• Blog (route: /blog)
  • A screen where you can view all blog posts. Searchable by blog title and tag.
• Blog article (route: /blog/{slug})
  • The body content of the corresponding blog post.
• About (route: /about)
  • Contains the existing portfolio content.

With this, the basic portfolio + blog feature implementation was completed.

4. Oh, This is Doable!

A journey of a thousand miles begins with a single step.

Like all works, this project is also progressing by starting with very simple things and gradually adding more. At first, I created a very simple self-introduction page, and then I tweaked the design little by little in the direction I wanted. I implemented the blog functionality and added multilingual support.

Developer Experience

I definitely feel that the development environment has improved compared to before.

• With just the combination of React (Next.js) + Tailwind, simple features that aren't too complex can be implemented in half a day.
• I have Github Copilot and CLINE installed in VS code. When I got stuck during development, I could easily solve the problem using these two tools. Of course, this is the same experience I have when working as a backend developer at a company.
• Code deployment and domain connection are possible using only the Vercel service. Connecting a GitHub repository to Vercel takes only about 2-3 minutes. After that, pushing code to the main branch automatically deploys it.

Fun is the Best Ingredient

I have a separate TODO.md file in the project module to manage the to-do list. It's very enjoyable to write down things that come to mind spontaneously and implement them one by one. This is probably because I'm creating what I want to create, rather than doing work to earn money at a company.

As I'm writing this, there are over 10 to-do items in the TODO.md file. Every morning, when I sit at my computer desk, open VS code, and open this project module, I feel a thrill wondering what I'll implement today.

If any of you reading this have never created your own web service like me, I encourage you to try making your own.

This is the end of this article.

In the next installment of this series, I plan to cover more technical details. In particular, I'll discuss the libraries I'm using for blog creation, the reasons for using them, and so on.

Thank you for reading this article. Have a nice day 👋