This move to a publicly accessible server heralded a change in the way my site was set up. Before this point I often typed an address of the form http://<My-Machine>.local/<Name_of_Project>. I didn't have an index file or any of the things that make a site usable by anybody except me. After I added an index file my site didn't change much beyond the addition or subtraction of content over time. The general form my site had is below:

Alex's Projects

Project A

Project B

When I stopped using Dreamweaver for writing page code and switched to BBedit and actually began to learn HTML, I added the Hacker Emblem in the upper right corner to represent that I respect their culture. The site now looked like this:

Alex's Projects

Project A

Project B

Current System

In the summer of 2009, I had some free time I decided that it was time to overhaul my website. I had recently seen a website that had a really cool looking design, and they just happened to have a downloadable archive of the code that runs their site in Perl. I has unable to get the site to actually function, but I decided to use their theme files and design my site around compatibility with their themes. I made the minimal changes required to convert their string variables to valid PHP variables I could populate in my code.

I wanted a site that I could actually be proud of the design. I also wanted to take the time to learn how to write dynamic web pages. As these goals were compatible, I began learning PHP and wrote a skeleton web site. This website lacked the basic navigational aids like links to child or parent pages but it proved that I could load the themes and output valid HTML. This milestone allowed me to write the CSS that was not included in the themes that would be required to actually make the theme appear correctly on screen. At this point the site looked similar to this (But with window decorations):

Pages in: Website

Site Map

I then wrote code to generate the page listings that provided a user the ability to select child pages to visit. I pulled the icon resources from a copy of Mac OS 9 for the buttons to each page and styled the text below to match that of OS 9's. I then aded code to arrange them in a four column table within the window context. As part of the directory listing code, I also had the site write out a site-map utility window to allow linking to sibling or parent pages. The biggest downside to the design of this site was the url for describing a page was the rather unwieldy "/index.php?dir=Products&page=Project". To avoid this problem, I configured my web-server (Apache 2.2) to rewrite the urls from the much cleaner "/Products/Project/" to the aforementioned form used internally.

The feature I added to really show off the fact that I wasn't just building a large set of static HTML pages was a theme switcher. The site I originally was inspired by had a selection of about ten different themes to make the site look like the users computing platform of choice. I added some code to display a theme menu and include the right theme files for each option. The site even remembered the choice across user visits. My site sans the window decorations and such looked like this:

Available Pages

A

B

C

D

E

F

Site Map

Links to other pages are here.

Theme Change

Select a Theme

First Revision

At this point my site visually looked similar to my site as it looks today. I was reasonably satisfied with its features, and it was some work I was proud of. At the start of my senior year, one of my teachers announced that we were required to have a personal website as a portfolio. That very day I showed him the website I had been working for the better part of a month on. The only change I had to make to accommodate the requirements was to create a chain version of the site running in a deeper directory tree to keep some of the sections from impinging on my Dated and organized by class home page. That requirement was satisfied by adding a segment of code that checked for a parameter with a directory to search in instead of the default.

As I updated the site during to beginning of the year I found certain actions to be clumsy in adding to my site. One of the biggest stumbling blocks was the creation of subdirectories. Making subdirectories was a process requiring the creation of a page that did nothing except redirect to the subdirectory. That stupid design decision was replaced by one that auto-detected if a page reference was actually a subdirectory and linked to the correct place. I also added code to list the contents of a subdirectory. and also show that listing in the site-map.

Second Revision

Right before our Winter Break, my class was informed that a portfolio presentation and review would be coming after Winter Break. Around this time I was facing the prospect of obtaining some real server space on someone's underutilized hosting plan. (This server is actually at my house.) With the possibility of a real server on the horizon, I began to update my code with an eye toward moving the site code to another server. To accomplish this end, I changed all of the hardcoded path references into variables that can be changed in the code in one place. I also just generally did some code clean-up to make my life easier in maintenance and to produce nicer HTML.

Unfortunately, the hope of server space fell through, and so I changed the code so that I could have caching and a lower bandwidth hit. I removed the theme changer to help minimize the different versions of code that had to be sent down the wire. The other reason for this switch was this blog. I wanted my site to be 100% cohesive, even across subsystems. As my blogging platform (Movable Type) is written in Perl that outputs static HTML, my PHP theme switching code would not be compatible and I would have to create a huge volume of hacks just to have a marginal benefit. More on this topic later.

Revision 2.1

Fast Forward to the middle of March. While working on some other project, I tested my site's browser caching. All of my work I did was for naught if I don't tell the browser to save the page. I also added a "Random Quote" feature that showed up on every page. This feature is just a wrapper around the classic fortune program. I also fixed a long standing CSS bug in the website version of my theme code. (Due to the way my blog's HTML was setup, the bug did not appear there.) The random quote box (or the theme change box on revision 1 and below) could, in pages where the content area is short, end up next to the site-map rather than below it.

Disclaimer: This post is based on my memory. Some details may be inaccurate.