I have seen numbers of websites using parallax-scrolling effect to introduce their products, companies, etc. It's a fantastic way to show information and ideas. I was wondering if I could use this magnificent way to display my portfolio. So, I began to work on it and tried to make the parallax effect come true.
With efforts, I finally established and completed this portfolio website with parallax scrolling effect, which I am obsessed with! I also learnt how to use Google Maps API to show up cities I have traveled. I am so excited about it!
I started this redesign by sketching on my sketchbook, which includes structuring my website, selection of colors, introducing myself, etc. Meanwhile, I also redesigned the logo of my portfolio. The shape of 'M' in my first name inspired me to represent it with a cartoon figure of a fox, which is one of my favorite animals. It took me a few hours to design my logo on paper and took one night to make it alive by Photoshop.
Whenever I completed one section, I could always learn some new from it. I decided to try some new techniques: Html5, CSS3, jQuery and Ajax (which I never used before). After applying Html5 and CSS3 to construct the appearance of website, I started to read books about JavaScript, jQuery and Ajax. Thanks to Head First series, they are very interesting and easy to understand. Learning these programming languages enhanced my font-end ability, so that I can make various interesting effects displayed on website. JQuery helps me to "fix" the navigation bar to the top and change its color when users are scrolling on the different section of the website, and Ajax helps me to display my works asynchronous so that users do not need to refresh the website with a new page to see them.
Thanks to authors of these plug-ins, which I used to implement this website:
Additionally, since traveling around the world is one of my big dreams, I want to share with you which cities I have been to. When mentions about travel, Google Maps is always the best way to show it. So, what I need to do is create a travel footprint section in my website with the help of Google Maps API. Unfortunately, it was not easy as I thought. I took pains and found ways to fix lots of issues, such as how to disable mouse scroll-wheel so it won't prevent the webpage scrolling, how to place markers at particular coordinate with information windows, how to prevent user drag the map into the grey area, etc. It took me a few days to optimize the map since the Google Maps idea came out. Although it was a hard time, I think it is worthwhile and love it.
I very enjoyed the process of constructing my website. When problems were resolved, it gave me a sense of achievement and accomplishment.