This website uses LAMP stack to provide service. I also took advantage of the fascinating JavaScript library jQuery to power the animation of my website. I did not use existent frameworks like Bootstrap, but rather wrote everything from scratch. That is why sometime things got really messy. But anyway I eventually managed to make a good-looking website.

Features

• Homepage - The PHP code randomly selects a horizontal photo from the photo database and displays the photo as the background image. Then jQuery animation reveals other parts of the web page (header, footer, etc.). I also included a brief introduction of the background photo. (And that is why I had to teach myself some basic knowledge about MySQL.) If visitors are found from Mainland China, a warning box would pop up to notify the visitor that some features of the website may not load normally due to the block of Google's services in this area.
• Resume - An online version of my resume. I also put a link to download a PDF version of it.
• Photos - I spent about 40% of my time to write this online album from scratch. The page first loads all photos' thumbnails to the page in reverse order of date. The sizes of thumbnails are adjustable (3 to 7 thumbnails per line). The arrangement of thumbnails also fit automatically when window size changes. When thumbnail is clicked, a view window would pop up to show the whole photo and information of it. Specifying the coordinates of each photo and using Google Maps API, I also included a map showing where the photo was taken. Also, visitors can switch to previous or next photo by clicking the arrows or pressing the left or right key.
• Projects - A place to show off my projects.

Design

• Color Palette - I used the color palette "Beautiful Blues" provided by Color Hex (url: http://www.color-hex.com/color-palette/1294).
• Typefaces - Google Fonts is a fantastic place to find open-source typefaces. I used Open Sans with 2 weights as my sans-serif typeface. For serif typeface, I chose Lora with 2 weights and the regular weight with italic. For monospace typeface, which I am not using heavily at the time, I picked PT Mono with one weight.

Special Thanks - Thanks to Wenxuan "Marlon" Liu, who inspired me and gave me the idea of creating a personal website. Also thanks to Tian "Tommy" Yang, who took time to answer my questions as a newbie during the construction of this website. At last, w3schools.com provided me with wonderful reference on nearly all aspects of this site when I was working on it.

Finally put my website online. It was kind of complicated to configure the server even with the guide provided by DigitalOcean. According to their suggestions, I set up the SSH key and the firewall. However, I got a feeling that I have to learn more systematically about network security to provide my server and website from attack.

In order to monitor the traffic of my site, I embedded Google Analytics and Baidu Statistics (in order to catch traffic in Mainland China, no more explanation) in my site. Though I found out that literally nobody visited my site except me, my family members, and some of my closest friends (no surprise), I got puzzled when Baidu Statistics reported that my site was visited from another domain name. Tommy told me that it was probably because the IP I got from DigitalOcean was previously assigned to other people. I don't know what's the intention (if there is any) of the owner to point her/his domain name to my IP, I still think that it is good to restrict the visiting of my site to my own domain name and provide a redirection page for all other forms of access. This forced me to learn how to configure my virtual host. The editing of the .conf file was pretty straightforward, but it took me 30 minutes struggling to figure out why my new setting didn't word after I enabled it using a2ensite command only to realize that I had to restart the server.

Originally I used FileZilla to transfer my files between my local machine and my cloud server, but soon I thought that it would make my life easier if I can have version control over all my files. Then Apache SVN popped up in my brain. The problem was, however, that albeit the fact that I've been using it to submit my CS course homework and projects, I had no idea about how it works on the server side. In order to get a quick start, I used a "quick guide" I found on Google. As a result, it took me a while to learn that I cannot cd into my repository directory and see my files svn added to it. But it turned out that this fact was explained in a crystal clear way in the manual. This taught me a lesson: read the manual. Finally after an hour and a half, I set up my repository and got things work.

As I am learning more about Django, I find it a really easy-to-use framework to power my website. Currently considering to migrate onto it. Also this will provide me with a hands-on practice for my future migration of the "Green Again" website, another project I am working on.