Why Create a Portfolio?

As I enter my 10th year as a developer, I started reflecting on what I have accomplished so far.

I've worked diligently on company projects, developing partial functionalities as part of a large organization. However, I realized that I had never built a complete service from start to finish. By "complete service," I mean participating in the entire process, from writing the initial skeleton code to delivering value to users, leading the project autonomously.

To sum it up in one sentence:

I want to have my own service, a website that I built.

Then why a portfolio? 🧐

• I wanted to start with something that I could build easily.
• I also thought it would be a useful promotional tool if I linked it to my LinkedIn or Facebook profile page.
• Lastly, there are countless tutorials on portfolio creation. Searching for portfolio website on YouTube returns hundreds or even thousands of videos. Watching these videos naturally led me to start creating my portfolio.

What comes after the portfolio? ✍️

• Building the portfolio itself wasn't too difficult. The question was, what to do next?
• Many developers naturally move on to creating a blog after completing their portfolio. A blog aligns well with the nature of a personal website—it’s neither too simple nor too complex to implement.
• So, I decided to create a blog. In fact, I'm still working on its functionality. I’ve set up the basic structure, but I needed at least one article to populate it, which is why I’m writing this now.

To kick off my personal blog and document what I learned while developing my personal web service, I plan to write a series called Developer Portfolio Journey. In this article, I will introduce the frontend technology stack I used as a backend developer and explain how I studied it.

---

What Technology Stack Did I Use, and Why?

I have about 10 years of experience as a backend developer. Most of my work involved building server APIs, infrastructure, and DevOps, with limited frontend experience. In fact, I had virtually no experience working on frontend development at a production level.

My Previous Experience with Web Frontend Technologies

• JavaScript (TypeScript)
  • Familiar with basic syntax only.
• React (Next.js), AngularJS
  • Used these for simple back-office (admin) functions. Recently, I built a very basic web page using Next.js for an internal company project, but I didn't dive deep into it.
• AWS, GCP
  • Primarily used AWS for operating company services and recently worked with some infrastructure functions in GCP. However, my focus was always on backend engineering, with minimal interaction with frontend-related aspects.

Final Technology Stack Selection

TypeScript

• I wanted to learn TypeScript in more depth and understand how it differs from Java’s type system.
• I also believed it would help with long-term maintenance of my project.

React (Next.js)

• React is one of the most popular web development technologies, and Next.js is the most widely used React framework.
• I had some prior experience using it, albeit briefly.
• I considered AngularJS, but since my previous experience with it was outdated, I assumed it would require significant effort to learn properly.
• For state management, I chose Zustand and TanStack Query. I had used Redux before but found it to be a poor developer experience. Since there are now many lightweight alternatives, I selected these two after some consideration.

Vercel

• Finally, I needed to decide where to deploy and host my portfolio web page.
• Since I had chosen Next.js, Vercel naturally came to mind as the cloud platform to use.
• I also considered Netlify, but many of the YouTube tutorials I watched for learning Next.js used Vercel for deployment, making it feel more familiar to me.

---

How I Learned Frontend Technologies

1. Watching Tutorial Videos (YouTube)

• There are countless free programming tutorials on YouTube, making it much easier to study development than before.
• Once I started searching for relevant topics, YouTube’s algorithm began recommending videos that matched my interests. I created a playlist called "Portfolio Creation" and focused on watching those videos.

2. Clone Coding (YouTube)

• YouTube has clone coding videos ranging from 2-3 hours to over 10 hours long.
• These videos don’t just explain concepts; they walk through building an entire feature from scratch to completion.
• I followed these videos in real-time by splitting my screen—YouTube on the left and VS Code on the right.
• I watched clone coding videos ranging from 2 hours to as long as 50 hours.
• Before starting, I had watched a React tutorial, and since I had some prior experience, keeping up wasn’t too difficult.
• However, I didn’t just blindly copy the code. I paused the video at times to implement features differently or deleted and reimplemented certain parts without watching the video again. This helped reinforce my learning.

3. AI Coding Assistant

• For the first time, I installed the GitHub Copilot plugin in VS Code.
• When I encountered something I didn’t understand in the tutorials, I pasted the code into Copilot and asked questions in natural language. It provided clear answers, making it an excellent learning tool.
• Besides explanations, it also generated example code, which made it easier to grasp new concepts.
• However, I disabled Copilot’s code auto-completion feature while studying.
• The reason is that learning code involves structured exercises, and if auto-completion suggests the entire code before I even think through the logic, it defeats the purpose of learning.

---

This concludes this article.

In the next article, I will introduce the development process of my developer portfolio in detail.