How I built my site v3.0 in 24 hours (non-continuously)
Tags: showdev, design, portfolio, dev
Published: 2017-11-27 06:41:16

---
title: How I built my site v3.0 in 24 hours (non-continuously)
published: true
description: I redesigned my portfolio again
tags: 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.

### Nov 2017 [rattanakchea.github.io](https://rattanakchea.github.io)
![porfolio 2017](https://raw.githubusercontent.com/rattanakchea/rattanakchea.github.io/dev/src/assets/portfolio2017.png)
![porfolio 2017-work](https://raw.githubusercontent.com/rattanakchea/rattanakchea.github.io/dev/src/assets/portfolio2017-2.png)

### 2016 
![porfolio 2016](https://raw.githubusercontent.com/rattanakchea/rattanakchea.github.io/dev/src/assets/portfolio2016.png)

### 2014
![porfolio 2014](https://raw.githubusercontent.com/rattanakchea/rattanakchea.github.io/dev/src/assets/portfolio2014.png)