Not too long ago I decided to re-design and re-launch my personal website. I didn’t know it would coincide with the new year, but with change comes….more change, I guess!
I felt that I outgrew the old design. It was literally the first full site I ever made. And while it was good all those years ago, both myself and the web development world have grown and evolved.
So let’s talk about the new site. First off I used (but heavily modified) a theme from Styleshout. They have amazing themes FOR FREE! They just ask for some love (AKA a link-back) somewhere on the site. To be specific I used the Ceevee theme.
My previous site was technically a “one-page” site, but with some fancy javascript that gave the illusion of different pages. Ceevee is also a one page theme. So naturally, that is the first thing I changed. Don’t ask me why, but I pretty much hate single page sites. Mostly as a design, but also for the programming. Too much scrolling is annoying, and so is not being able to cater each page specifically how you want it made.
So I separated all the pages, gave them each their own containers and their own links. But then I realized I needed a header, a navigation bar and a footer for each page. Want to change the page title, add something to the menu or change the copyright text? Make sure you remember to do it in all the pages! That isn’t very convenient so the next step was converting the HTML site into a PHP site.
Using PHP I was able to create individual files for header, nav and footer and each page now “includes” each of those files. That means that by simply changing the one relevant file, changes will be made across the entire site.
The method I used to create each PHP page was to call the page in the links. So http://chris.waldau.ca/?p=resume would bring up my resume page. I would also be able to use this in PHP to determine what page I am on and dynamically change and adjust certain things, such as the page title (seen in the browser tabs, for example you should see “Blog | Christopher Waldau” in this tab). But having question marks and equals signs are not very user-friendly in a URL so I created a .htaccess file to redirect the “ugly” links back to “pretty” ones.
I wanted my site to be a little more interactive and programming oriented so I found an amazing JQuery plugin called typed.js by Matt Boldt. I used it to make my home/landing page more fun by having my name and an intro blurb get typed out when the page loads.
The original contact page did not include any sort of captcha so I figured it would be best to implement one. But a captcha can be pretty annoying for a user who just wants to enlist my services. As oppose to having a captcha that requires the user to validate themselves, I implemented one that lets robots invalidate themselves. They are called honeypot captcha’s and the idea is that a robot spammer is not smart enough to distinguish a real form field from one we have hidden from view. The robot spammer will read the website source code, ignore the CSS that says a form field is hidden and simply fill out the entire form. When I process the form I check if the honeypot has been filled out or not. If it has been then it was more than probably a robot spammer and I reject the form. Don’t worry though, I still send back a nice response explaining the situation, in case something went wrong and an actual user has seen and filled in the honeypot field.
I also added a blog, since the original Ceevee template did not include one. I used styling cues from the “about” page in the original template so that my blog could still match the rest of the website. This very blog is actually powered by Tumblr. I am using the Tumblr API and a PHP class built by Dhruv Govil (again, something I heavily modified) to interface with Tumblr. Unfortunately I can’t find the original script anymore (my Google-Fu has failed me!) but it is a pretty basic script that requests all the posts from a specified user and displays them. There is no functionality for creating/editing posts through the PHP class itself, so when I want to write a new post I go to Tumblr and write one from there. The advantage being that Tumblr is already set up to be made for blogging and has all sorts of great features that I would otherwise have to build myself. When a new post is made public on my Tumblr blog, it is instantly also available on my personal website.
Other changes to the original Ceevee template include text (obviously!) the landing page background (Montreal represent!) and other CSS changes (mainly the colour scheme). Oh, and I also swapped out the “latest tweets” for “latest blog post” on the contact page since I don’t use Twitter.
All in all I am very pleased with the result as well as my increasing skill with all things web development. Found a bug? Want to make a suggestion? Use my brand new contact page!
P.S. For legacy sake, I have left my old site available at http://chris.waldau.ca/old. Lets all go laugh at it!