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.