For version 2.0 of x0dus.com, I’ve opted for a very minimalistic look, simple because I felt version 1.0 was too magazine-like, and did not really feel like an actual blog to me. Hence it’s back to a standard blog layout, where posts are showed chronologically on the first page. Comes with a sidebar containing post categories, links to personal friends’ blogs etc and also an about me section. In terms of SEO, my blog pops up as the first link on Google, when my name is searched for in Google. Take a look at the site.

Features

• TimThumb script for automatic resizing of pictures to be thumbnails
• Lightbox Plugin for Image Overlay
• Gravatar Enabled
• Minimalistic View For Easy Navigation
• Prominent About Me Section

Full View of Site

Click on the image for a larger view.

Image Overlay (Lightbox Plugin)

Image overlay (lightbox plugin) in action!

Features

• jQuery Featured Post Slider, click on number to navigate through featured articles
• Live Twitter Updates from our shared twitter account
• TimThumb script for automatic resizing of pictures to be thumbnails
• Lightbox Plugin for Image Overlay
• SEO-friendly (includes configurable h1 tag, description and keywords)
• Gravatar Enabled

Full View of Site

Click on the above picture for a full size view of the site.

Image Overlay (Lightbox Plugin)

Image Overlay in action.

I am contracted by Health Sciences Authority (HSA), a Singapore government board, to design a second site for them, after the 1st site for them was approved went LIVE. This 2nd site is meant for the Asian Forensic Sciences Network 2nd Annual Meeting & Symposium, which is an event that will be held in Brunei during the month of June. I was requested to incorporate a large wide banner at the top of the page, and I did several revisions to the template before I was eventually satisfied with the current look. You can view the 2nd website here.

Full-View Of Site

Click on the above picture for a full size view of the site.

You can view the site here: http://asianforensic.net/2010

Features

• CSS-style Horizontal Menu that can be customized to show any colours (Comes with Internet Explorer 6 Fix)
• Customizable top banner
• Customizable sidebar
• Image overlay. Upon clicking images, screen would grey out and the image will appear in it’s original size.
• A single click is needed to update a single change on all the different pages (Dreamweaver Template function)
• Sitemap under footer

Image Overlay (Lightbox Plugin)

Before clicking on image.

After clicking on image.

WatchWhat? is a movie review site that I set up just for the fun of it. The site has no content and is just for experimental purposes. I have always felt that the Singapore movie review websites on the web are simply too hard to navigate. I believe people searching for movie reviews, are only after three things, the user reviews, ratings and the Movie Trailer. Watch What? gives the users what they are looking for in a format that is simplistic yet really elegant. I am looking to develop the website with real content if the chance arises in the future.  You can view the site by clicking here.

Features

• A Giant Banner-area for movie posters and banners, that will have the excerpt of the review displayed over the movie image
• Able to scroll through unlimited movie posters by pressing the arrows at the side
• Embedded video code will resize the video nicely just so they fit in every single page regardless of the size of the source video
• Allows user to rate a movie upon 5 stars, and most popular ones get displayed at the sidebar

Full-view of Site

Click on image for a full view.

As you can see, the giant movie banner can be changed by pressing the scroll arrows on the side.

Other more recent movies are displayed as thumbnails, together with their ratings upon 5 stars.

Embedded Movie Trailer at Top of Review

Above every movie review, the movie trailer will be embedded nicely in a black background for optimal viewing. All you have to do is paste the embed code and you are good to go!

Done using Drupal, the site is still being worked on by me and a few other friends on a weekly basis. Drupal is chosen as it is arguably the most flexible Content Management System (CMS) and allows multiple users to edit the site simultaneously. This is also my first website done using Drupal. Learning Drupal required a lot of trial and error on my part, because the Drupal online community is not quite as developed as that of Wordpress or Joomla. You can view it by clicking here.

Features

• Dropdown Menu
• Blocks (widget-like objects) that are displayed at the side. Colour of the blocks are up to the user to choose
• jQuery image slideshow at the front page
• Allows for multiple users to edit anything on the site simultaneously

Full-size Look of Site

Click on the image for a full size view of the site.

Multiple Logins at the same time

Drupal allows for multiple logins at the same time. Every user will have access to the above settings, which makes editing the site simultaneously a real breeze.

This website is done purely out of my own interest. In my spare time, I used play a game called Football Manager 2010, where one play as the manager of a soccer team. It is one of my most successful websites, ranking on the 6th on google out of 21 million hits for “Football Manager 2010 blog” and “Football Manager blog” after only 1 month, and ranking 1st for certain keywords related to the game. In addition, I am earning a steady revenue from Google Adsense based on this site. It is definitely by far, my most successful site in terms of SEO. You can view the site by clicking here. 

Features

• Logo that matches colour scheme of site
• 2 column layout. Sidebar fully customizable with any widget, be it displaying the latest post to your latest twitter comments
• Gravatar enabled (Users can choose to display their picture whenever they comment on your website)
• Tabbed section that includes Most Popular Posts, Recent Comments and Recent Posts to save space
• Image overlay. Upon clicking images, screen would grey out and the image will appear in it’s original size
• Previous posts will appear in neat thumbnails
• Highly ranked on Google only after 1 month of going LIVE

Full-size look of site

This is how the upper half of the site looks like. Click on image for the full size view.

This is the lower half of the site. You can also see that the recent posts are displayed in the form of thumbnails.

Gravatar

This is a picture of Gravatar in action. The next time the same user posts on the site, their display picture will automatically be called up again.

Image Overlay

Before clicking on image.

After clicking on image.

Tabbed Section

Includes most popular posts.

Includes recent comments.

Includes recent posts.

Extremely Well-Ranked On Google

As you can see from the image, my site is ranked 6th out of the 27 million hits on Google for the search term “Football Manager Blog” , I have an average of 300 unique visitors each day, and I am earning a steady source of revenue via Adsense from this site.

In addition, due to personal time issues, I am managing a group of writers who write content for the site, although I am still in charge of everything related to the website.

The fact that almost all of my traffic comes from search engines shows that the site is adequately search engine optimized. The screenshot will also tell you other detailed statistics regarding traffic to the site.

I was contracted by the Health Sciences Authority,  a Singapore government board, to design a website for the Asian Forensic Sciences Network which is made up of members from all over the world. I was required to come up with a fully functional site within 3 months. This site was a good platform for me to practice my CSS skills, because the site undergo numerous revisions before the final approval, and I had to change everything from colour schemes, to font sizes. An invaluable experience for me!  Take a look at the site.

Features

• CSS-style Dropdown Menu that can be customized to show any colours (Comes with Internet Explorer 6 Fix)
• 920 X 158 customizable top banner
• Image overlay. Upon clicking images, screen would grey out and the image will appear in it’s original size.
• Photo Gallery displayed in the form of thumbnails
• A single click is needed to update a single change on all the different pages (Dreamweaver Template function)
• Sitemap under footer

Full-size Look of Site

Click on the image for a full size view of the site.

Image Gallery Displayed as Neat Thumbnails

Image galleries are displayed in neat tables as thumbnails.

Image Overlay

Image overlay occurs when you click on any image thumbnail. It also allows you to click next and previous to scroll to the next full size image in the gallery.

This site is my personal domain and functions as my personal blog. The website is no longer in use, and has been overtaken by a new look. This old look had a magazine-style look to it, and it was my very first experience with using Wordpress as a CMS tool. I learnt a lot about tweaking Wordpress templates from my first site. I also used it heavily in testing new theories I was learning at that time about Search Engine Optimization (SEO) I was successful in getting a couple of articles to rank highly on Google, and that eventually paved the way for mastery in SEO.

Click on image for a full size view of the site.

Features

• A Headline section, where the most eye-catching post is displayed (Changed from time to time)
• Featured Section, where posts that I think worth a read are displayed regardless of how old they are
• A Sidebar that is widget ready. It can include anything from your latest Twitter comments, Facebook photos, Flickr feed, Links, Most Popular Post. You name it.
• 5 Categories that will change in colour upon mouseover (read below for more details)
• Image overlay. Upon clicking images, screen would grey out and the image will appear in it’s original size.
• Footer that includes Most Commented Posts, Recent Posts and Most View Post

Footer

This is how the footer looks like. Recent Posts, Most Commented and Most Viewed are neatly boxed up.

Categories

A highlighted Category will look like this.

Image Overlay

Before clicking on image.

Chun Rui

After clicking on image.