Technical progress

Time usage: 20 hours

The software that I using is Adobe Dreamweaver. This overall project is mostly focus on using pure CSS3 to build up all the transition and animation. Therefore, I able to use this opportunity to learn more on CSS3 code. 

Why use CSS3? 

As many browser in nowadays has implement part of CSS3 already.

Rocky Dev, 2012 mentioned in his article that , CSS3 are ease of usage, convenience and started to have more features. While CSS3 make the web page and its content load faster and accurate.Because CSS loads simultaneously with page loading as it is embedded in the web page, there wont be any additional time consumption.So all in all, CSS3 is a huge time saver and helps load web page faster.

Other reason is that for this project that has limited time for me to build my own portfolio website. CSS3 easy to learn and understand. It's very direct and because it's simple to understand therefore with this time limitation, I able to reach my achievement easily and rapid. 

The technical progress doesn't have face any big problems because I seek for the right tutorial that helps me on my understanding. 

First, I look for tutorial of doing parallax scrolling. In previous post, I have successful done my testing on using this tutorial. When click the specific menu button, it will auto scroll to specific page. For example, clicking the box 4 button it will scroll to page 4 content. 

Click here this link for view previous post: http://cfe-melissakmh.blogspot.com/2014/07/test-code.html 

However, I have apply all the test code in to actual code for my webpage. 

Therefore, I look for some of the tutorial on how to do fade in effect with CSS code.
I found this website has simple CSS code and fits in what I want.

I use this code apply in the fade in logo when user come in my webpage. 

Second tutorial I was looking for mouse over image with using pure CSS3 script. I found this website that has easy tutorial and I able to understand.

I apply this code in to the Works page with the mouse over effects.

I use my previous code to code for pop up window. But there is a minor problem that I have faced. I realize the pop up window does not  have scrolling feature. Therefore, it can be scroll but the scroll bar is too ugly for deliver my content. I look for some of the tutorial on customize scroll bar. 

I have make the scroll bar into invisible for less distraction and nice visual.

 For a minor animation in the About me page. I use this tutorial to make the smoke fade in and out.

Reference

Dev, R. (2012). What is CSS3? Why CSS3 is used? How to use CSS3?. [online] Theextremewebdesigns.com. Available at: http://www.theextremewebdesigns.com/blog/css3-what-is-css3-why-css3-is-used-how-to-use-css3/ [Accessed 31 Jul. 2014].

Technical tutorial reference

CodePen, (2014). CSS Image Hover Overlay. [online] Available at: http://codepen.io/ianfarb/pen/ikeAf [Accessed 31 Jul. 2014].

Jsfiddle, (2014). [online] Available at: http://jsfiddle.net/SO_AMK/VV2ek/ [Accessed 31 Jul. 2014].

Jsfiddle, (2014). [online] Available at: http://jsfiddle.net/FTLJA/261/ [Accessed 31 Jul. 2014].

Lou, M. (2011). Blur Menu with CSS3 Transitions | Codrops. [online] Tympanus.net. Available at: http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/ [Accessed 31 Jul. 2014].

Sharma, A. (2013). Customize Scrollbars using CSS3 - CodeProject. [online] Codeproject.com. Available at: http://www.codeproject.com/Tips/674478/Customize-Scrollbars-using-CSS [Accessed 31 Jul. 2014].

The Design Pixel, (2014). 20 Best jQuery Parallax Scrolling Tutorials. [online] Available at: http://thedesignpixel.com/best-jquery-parallax-scrolling-tutorials.html [Accessed 31 Jul. 2014].