How I built my site v3.0 in 24 hours (non-continuously)

#showdev #design #portfolio #dev

Goals

Build a minimalist, maintainable, and FREE website quickly to showcase my work.
Make use of new technology where appropriate.

Building my new website was actually more challenging and took me longer than I anticipated. To keep it short, let me jump straight to the challenges when working on it.

1. Which framework should I choose? Or should I use none?
I have looked into the options of React, Angular 4.0, and Yeoman web app generator for JavaScript library and Bulma, Boostrap, Material for a CSS framework. It was a difficult decision because there were so many choices. On one hand, I want to learn something new. On the other hand, choosing a new technology stack will not only slow down my development, but also make the project much more difficult to manage, especially when working in a one-man team. Working on UI, the application logic, and learning about new technology at the same time is difficult, counter-production and can be frustrating. After back and forth tests and trials, I chose Angular 4.0 + Bootstrap mainly because I have some experience with these two more than the others and I was happy with development speed. Personal satisfaction equals increased productivity.

2. How to get a functional website up in as little time as possible without a UI prototype?
I wanted to get my new site up in as little time as possible. I did not have enough time and photoshop/sketch skills to polish a clean UI with color themes, beautiful fonts, etc, nor I wanted to spend time on it. I only drew a simple quick wireframe on a paper for UI mockup. I reused some of most common UI components I could find on Bootstrap so that I could focus on some of my design ideas and the application logic. It was challenging to work on development without solid prototype in mind. However, I was happy with final outcome that I can iterate on in future version.

3. How to make the site maintainable, and the cost is still FREE?
I think one of the most important aspects of any websites/applications is that it is maintainable. It means that the code is organized and easy to understand. It requires few steps to update and deploy a new version. When the project is self-explanatory, and requires minimal time to understand, it will be more maintainable and surviving in many more years. In this project, I have to do two steps (can be combined to one) npm run pre-deploy, then npm run deploy to deploy the site to Github page which is free to host static sites.

Check out my current and previous websites below. Which one you like better? Leave comments and feedbacks; i love to hear.