In the Autumn of 2011, I decided that I should create my own website - and not just using a free site or a website builder, but coding my own site by myself. Enter version 1.0 of www. richmondywong.com
The first version of RichmondYWong.com
Utilizing PHP, CSS, HTML, and some Javascript, I put together a website that worked, though it was pretty static. Edits would have to made directly to PHP files (although I updated the resume section to pull from a MySQL database, to make updating that section easier). Still, it didn't have the flexibility that I had wanted. So a year later, I did a redesign, bringing around the new RichmondYWong.com.
Content
The content on the new site has been simplified. Before I had 5 sections (Home, Resume, On the Web, Music Composition, and Contact). Taking a second look at the information architecture, I realized Music Composition wasn't something that needed to be as promiment - it is something I enjoy as a hobby, but it is something that can be linked to on YouTube through the "On The Web" section. Besides that, the content is what one might expect - Home has basic information about me; Resume has a list of my previous experiences; On the Web has links to my other online presences such as blogs and social media accounts; Contact has a form that allows users to contact me.
Design
Horizontally, I tried to stay with the "golden ratio" with the two columns taking up approximately 2/3 and 1/3 of the screen, respectively.
Color-wise, I chose similar colors as the old site, using a compound color scheme with shades of red, white, and blue. I inverted the background, using a white background, which made the site feel cleaner and more bold.
Most excitedly, I've implemented responsive design by using CSS media queries to make the site "device agnostic." When the width of the screen is less than 900 pixels, the header and columns start scaling down based on the browser width. Under 500 pixels, the site becomes a single column, and buttons become larger, to make the site more usable on smartphones.
A narrower, scaled version of the site, when the screen width is less than 900px
On a narrow browser screen or iPhone, the site automatically switches to a one-column layout using CSS media queries. No special PHP detect functions or a separate mobile site needed!
Features
Besides the responsive design, there are also several other features on the site. First, part of the reason for doing the redesign was that the original site was hard to edit. Now, by utilizing a MySQL database, I've created an admin system that allows me to edit the HTML of each page, so I don't need to FTP every time I want to update the site!
These are just text boxes that allow me to edit my site's HTML - I used a plugin to mmake the editing screen look a little nicer
I also made use of jQuery in the resume filters. Clicking on one of the filters starts a quick animation of showing and hiding the relevant experiences to that filter category.
The filter "Research" shows any experiences related to research, and hides unlreated experiences. The show and hide actions are animated, so that the users can visually see what the filters do.
I also make use of RSS feeds from my blogs, and use PHP to pull recent posts into a list displayed on the site.
All in all, the new version of the site is a great improvement over the original, in terms of design, content, and functionality!
