External Web Projects


Completed and ongoing projects for other folk
Gallery Example One Gallery Example Two Gallery Example Three Gallery Example Four

About these projects:


TamZawalich.com

This was a BCIT project to design a pro-bono website for a client. Tam is an artist from Seattle and was looking for a website in order to show her work.

This amounts to a personal website built primarily in HTML, CSS, JavaScript, and PHP, with room to expand if required by the client at a later date.


Harpspectrum.org: (Ongoing)

Harp Spectrum is a non-profit organization that was looking to migrate its website to WordPress. The website runs on a lot of legacy code, and requires an updated appearance. This is accomplished by both manually updating sections, as well as stripping and replacing various tags throughout the process.

This is primarily a WordPress migration, and an incomplete one at that, so it will not be discussed in the technical talk section.

Technologies used:


JavaScript: TamZawalich.com utilizes JavaScript heavily for image viewing, layout control, and gallery navigation.

PHP: PHP is used on TamZawalich.com in the context of contact forms. In the Harp Spectrum site it is used for customizing and creating the WordPress PHP files used to control, add, and remove page content.

Technical Talk:


The HTML & CSS

The HTML on most of the pages on tamzawalich.com is relatively straight forward. It is either used in conjunction with CSS to show content, or in the case of the gallery, to hold content generated by JavaScript.

The only real exception to this is the home page slideshow. The slides are not true images, as the client wished for them to cover the entirety of the page that was not already covered by the header and footer sections. Images tend to have trouble being fully responsive when they are not allowed to maintain their set ratios. Their default nature is to want to shrink, resize, skew their appearance terribly, or remove uneven portions of the content. I needed an image that was completely flexible, but would also (more or less) stay centered when resized into strange dimensions. What I found worked best was to set the background-image of an empty div set to fill 100% of the space. The background image keeps itself centered, and is fairly accepting of its div being resized while still filling 100% of the area. The slide controls then change the background image of the div rather than switching out true images.

The JavaScript

Much like the HTML and CSS on the client's site, the JavaScript is relatively straightforward. The only exception is an implementation of my Gallery Builder project (this one right here) on the site's gallery page. You can check out the technical explanation of the script on the Gallery Builder page if you'd like to know the nitty gritty of why it does what it does.

The PHP

PHP on the site is used only on the contact form. It's a simple mail function that validates and collects the information in the field, sanitizes the entries, and then mails it off to the site owner.

The contact form is also sticky—it "remembers" entered data in case one of the fields fails to validate and the user needs to re-enter something. No one likes having to fill the entire form out due to a typo in the email address line.