---

Motivation

Why I started to build a portfolio website?

• I have wanted my website when I first learned front-end developing.

• It’s a hub that connects platforms I use, such as github, leetcode, notion and hashnode blog.

• The website also works as an individual workspace where I can record my careers, projects, and tech stacks.

• A portfolio website is a great way to show what I have achieved and created so far as a software developer.

• I am currently building this website in South Korea military, which means the time and environment is extremely limited. Due to security issues, computers do not store any files and software downloads.

  • So I used goorm IDE, which stores source code!

---

How I Planned Developing - Overview

If this were a team project or a service, I would adapt agile model for fast developing, and good user experience. However, it’s going to be a website that shows who I am, so I have planned it like this:

1. Requirements

• First thing I did was identifying requirements.

  • Q. What do I want to show?

  • Q. What are some essential sections? - About page & Project page?

  • Q. Who are the target audience?

---

2. Design

• I used Framer, which is a design and prototyping tool that allows designers to create interactive, high-fidelity prototypes for websites.

  • Q. Is it going to be a single-page-application? Or do I want more than one page?

  • What are some design requirements?

  • Q. What would be a theme color?

  • Q. How am I going to design the layout? Flex or Grid?

InnoJation Prototype made with Framer: InnoJation Prototype

---

3. Development

Front-end

• I was not able to use powerful IDEs, such as VsCode because of working in military. So, I used a cloud IDE like goorm IDE.

• I first started to build it with HTML, CSS and Vanilla JS.

  • But then I realized how powerful React.js is. I was copying and pasting tons of elements with just a little change on styles and text.

  • With React.js, the website can be more optimized with reusable components.

• One of my ultimate goals was making interactive websites, having scroll animatoins.

  • I used GSAP, which is a JavaScript animation library.

Back-end

• Portfolio websites do not really retrieve data from a server; however, I wanted to have back-ends.

  • Brainstorming:

    • Chat-bot

---

4. Review

• Making sure that the code is optimized and organized.

---

5. Deployment

• From local to public, I will give the website a domain name.

---

* This blog post is to be updated continuously until I finish building the website.