Digital Portfolio
Personal Work Samples
These are samples of work I have done on my own time, mainly to improve my skills, or done in the process of learning new skills.
Websites
A prime example, of course, is this website. I didn’t write it personally - it’s run by the open-source blogging software WordPress - but I have spent time under the hood learning how it works, customizing it for my needs, and creating my own unique page design.
Another good example is my Heroes of Might and Magic fansite, HoMMWorld. I first learned about web design and development when building this site. It started off as a small project, and it eventually became a full-blown site. During this process, I learned about many things, including HTML, graphics, web design, style sheets, and javascript. Some data-intensive sections of the site have been done using PHP and MySQL.
Professional Work Samples
Following are samples of work done for an employer, partly for co-op work, and partly after completing my education.
Canadian Agricultural Economic Society
CAES - When I started working on the site, it’s appearance and contents were rather outdated. In consultation with CAES, the site was rebuilt with a more modern appearance and a slant towards accessibility and usability. Content was ported over from the old site, and new material is being added to the current site on a regular basis. The new main feature is a language toggle, a link on the upper right corner of the page that switches the English version to French, and vise versa.
WM Infomatics
WM Infomatics - set up a basic site, along with a templating system so the client can easily add and update content.
Strategic HR Intranet Site
The design of the older site was an old one, and was not a particularly aesthetically pleasing one. The colours did not match: black, purple, brown, and blue. Also, the navigation was not very intuitive, as the links showed no relation to each other.
The new site has a more modern look and feel, and is more of a pleasure to use. The colour scheme is better, as is the navigation scheme. The navigation sidebar now uses collapsible headers, one for each section, to group related links together.
The figure shows one of the collapsible headers currently open, showing links specific to that one section. The department staff are enjoying this feature as a much easier way to move around the site.
Finance & Administration Intranet Site
The front page for the original site was done in a fixed width, with a navigation column and content column. The difficulty in navigating the site lay in the links in the left column: they were just alphabetized by topic, and showed no relation to one another. Additionally, the menu was not even consistent across pages - different links were often in different places on different pages. The menu aside, the overall page was not very attractive, and it was desired to have the site with a more modern look and feel.
The index page of the new site shows an overall colour scheme - several colour schemes and page layouts were proposed, and the blue scheme and shown layout were chosen. All the links from the original side navigation were gathered into a collapsing menu on the left. The links are now grouped by department, so it is now easier to know what a particular link is for simply by knowing which department it is listed under. There is also a top menu which groups some of the most commonly-used links in one place. This is beneficial to those users who do not know what page they are looking for, since the user can check the most common links and go from there.
One of the sets of department links is revealed by clicking on the department header - clicking the header again hides that set of links. The top menu is also seen in action; it drops down a listing of relevant links when a link header is hovered over by the mouse.
BC Stats
BC Stats - This sample is a web application written to simplify data retrieval and display for a user. It uses data from a population statistics database, with the data divided by year, gender, age group, and location. Scroll to the bottom of the page, and choose one of the links: “Health Regions”, “Regional Districts and Development Regions”, or “School Districts & College Regions”. You will then be asked to fill out a form with the data you are interested in seeing. The results are displayed in an automatically-generated table on the page.
Academic Work Samples
The following samples of work are indicators of what I was learning while in the Computer Systems Technology program at Camosun College. They do not represent my entire courseload, since some some samples are easier to display on the web than others. They may not be professional grade, as I was learning at the time, but they do demonstrate that I know at least the minimum skills required to create each sample. Typically, my skills have since advanced from the point at which the samples were created.
Graphics
These graphics were created using POV-Ray, a software package that generates images from instructions written in a syntax similar to the C programming language. You may click on the images to see larger versions.
Java Applets
Button Click Counter - This applet counts and displays the number of times you click the button.
Change - Given a value in cents, the applet breaks it down into the least possible number of each denomination.
Cone - This applet allows you to resize an upside-down cone. The Browser shows the height and width of the cone, and it’s volume.
Pressure Gauge - In this applet, you can change the pressure in an imagined nuclear reactor. The main needle moves to show the current pressure, and secondary needles mark excessive pressure swings. Finally, the gauge’s background color changes with the pressure.
Random Walk - The applet simulates a person walking a random direction and distance. Click the button to do it again. The applet also shows the total distance traveled.
Faces - Creates 3 sad faces. When you click the button, one of the faces becomes happy and is colored red. Clicking the button will change the currently happy face.
Coordinates - Generates 2 random points, with a third one in between. Click on the button to generate two new points. The applet also displays the coordinates for all three of the points.
Random number arrays - Generates an array of random numbers. Then displays the minimum, maximum, and mean values, indicates whether a certain value is in the array, and shows a portion of the array.
Query strings - The applet starts with a query string (one that might be generated by a form) and extracts and displays the individual name/value pairs from the string.
Simple GUI - This applet has a simple GUI, where you can enter two numbers, and the program will generate an array of random integers with those dimensions. The applet will then indicate the mean of the array. The applet will print an error if you use dimensions that are too large, or are not whole or positive numbers, or are not numbers at all.
JavaScript
Javascript Greeting - A greeting, javascript style! The script asks for your name, then greets you.
Color Changer - You can click buttons to change the color of the page’s background and text.
Flash Animations
View lab 3 Part 1 - A basic bouncing ball which fades out of sight.
View lab 3 Part 2 - Same as above, except the ball changes size, shape, and color.
View lab 4 - Same as above, except with a seperate moving shape, a button, and sound effects. Note that the button is a broken link - I moved my pages and I lost the Flash file, so I couldn’t point the button elsewhere.
Perl Scripts
First Perl example - This first Perl sample has you input the name of a salesperson, the amount they made in sales, their bonus rate, then calculates and displays their commission.
First Perl lab - This first real Perl script deals with query strings. If you look in the address bar of the script page, you’ll see sets of values at the end of the URL. The script takes these values and prints them. Try changing the value after the = sign, click Refresh, and see what happens!
Pizza order form - This program simulates a pizza order form. Fill out the form, then click the button to see the order confirmation. If you leave one or more items blank, you will receive a warning.
Pizza order form - This ia a more advanced version of the previous program. For one thing, I have the code divided into subroutines now, instead of huge if blocks. Also, it now has more sophisticated error checking and warning.
Countries - Gets input from a text file containing a list of countries and their two-letter codes. It first displays the codes in alphabetical order; displays the country names in alphabetical order; displays the code: country pairs, ordered by country; given certain country names, shows their code equivalents; shows the first country where the first letter of it’s code and name are different; and finally shows how many countries have codes with a first letter that is not the same as the country’s first letter.
Count Words - Counts the number of unique words in a text file and displays their percentage of occurrence. Also shows the number of unique words, and the grand total of words in the text file.
Remove Tags - This is based on the previous Pizza Order Form above. The difference is that in the previous version, HTML tags entered in the textboxes were rendered on screen. In this version, the tags are not rendered, but just displayed.
Remove Bad Characters - Given a string, the script removes characters that are not allowed. Good characters include numbers, letters, and the following punctuation (. , ; : ? ‘ ” = _ -). The rest will be removed.
Assembly
To run these programs, you must have the Chasm assembler and the Craps emulater. Even if you don’t have these, you can still take a look at the source code. You might be surprised how much work you have to do to get something done in Assembly!
Reverse String - Program accepts a string from the user, then reverses it.
Palindrome - Program accepts a string, then indicates whether it is a palindrome. A palindrome is a string that reads the same both left to right and right to left.
Multiplication - Multiplies two numbers together. Quite a bit of work in Assembly!
Change String Case - Accepts an alphanumeric string, then changes the case of all letters in the string. Numbers are unchanged. The string is then reversed.