Jon Packer's Online Portfolio

I'm Jon, a web & mobile developer from Brisbane, Australia. This is my portfolio, where you can browse a whole lot of interesting stuff I’ve had a hand in making. Looking for something more formal?

Check out my CV.

Or head on over to the Contact Page and find a way to say Hi!

BAM! Festival is a 3 day festival held just outside Brisbane. I created this website by using the Joomla CMS, and writing a new template from scratch. Implementing this website provided me with numerous challenges, such as:

It was my first time working with Joomla, so I had to learn how the system worked and what was involved in implementing a custom template.
I had to implement a completely transparent layout, so that the background could be changed at any time, and show through the entire body.

BAM! Festival

A Joomla based website, with a custom made template and features.

I wrote this for internal use at Creative Intersection as it was something we needed.

Originally, it was just for iPad. The original idea is that it pulls down project time data from toggl and displays the time currently spent on a project in relation to how much time was quoted. It also breaks this down on a per-person basis.

When I got into it, I found that Toggl's API doesn't provide the time spent for a certain project. For this data, I wrote a middleware Node.js server that spoofs user login on Toggl, and scrapes the data from each project's page. For this reason, it's not suitable for wide release (unauthorised data scraping, insecure use of user details).

I also wrote a native Android version of this app to better familiarise myself with that platform.

Project Monitor

Monitoring of Toggl project timelines for iPad and Android Tablets.

This website was created for a few different services:

RSVP - allows guests to RSVP online
Directions - Provides directions to each of the venues from the home address of the guest
Information - Provides an information resource about the time and format of each of the events

Because of the obvious privacy concerns, each user was given a login code with their wedding invitation that they could use to log in to the website. This meant that each user is greeted personally, and also granted the ability to provide personalized directions using the Google Maps API.

Bee & James

A wedding website which providing information and services for wedding.

Pseudo-FTP was a project I did in my final semester of TAFE. It used C++ to implement a file transfer server on a unix based system, and wxWidgets to implement a file transfer client on a windows based system. The aim of the project was to learn the concepts of networking in relation to C++ (using Berkeley sockets & wxSockets), and comprehensive GUI implementation using wxWidgets.

This project was done in a team; I implemented the unix file server entirely, and completed major portions of the windows client.

Pseudo-FTP

An academic implementation of network file transfer.

As a fun side project for myself, I wrote this iPad app to view the Troms� webcam served by Universitetet i Troms� at weather.cs.uit.no.

It uses a few different components to pull down different data:

The image itself pulled directly from the weather.cs.uit.no server, and updated every 30 seconds
The basic weather information (current, only one measurement), is scraped by a PHP script on demand. Of course, this is cached, so the actual scraping only happens once every 30 seconds.
The weather information from the graph (last ~6 hours, hundreds of measurements) is served as static JSON file. A node.js process is run every 10 minutes on a cron job which updates the data in this file by scraping the raw data logger on weather.cs.uit.no

Tromsø Now

Webcam and weather viewer for UiT's Tromsø Webcam

Motivational Australia was the name of my final individual project at TAFE. It was an event management system, with every feature you would imagine on an real-world counterpart, such as:

User registration/Account maintenance
Shopping cart complete with a timeout ticket reservation system
Interactive venue seating plan representation - users can see where their seat is in the venue
Recommendations Engine
Privacy Policy
Search

All of these features were implemented from scratch, using Java (JSF), Hibernate (among other frameworks), JavaScript and MySQL. Eclipse was used as the IDE, and ANT was used as a build and deployment tool.

Apart from all of the features, we were required to fully plan the project beforehand, which included creating:

Site Map & Site Flow Diagram
Domain Model
Database Model
User Interface Prototypes
Unit Tests
Suite Tests
User Stories
Package Layout, Class, Responsibilities & Collaboration Table and Project Structure Diagram
Project Release Plan
Ant Build File

I then had to implement the project to the release plan, which proved a challenge.

For more information, you can download the project's final documentation here.

Motivational Australia

A feature-complete Java & Hibernate based event management system.

This project was a relatively simple game, implemented in order to teach Test Driven Development. It was implemented in Java, using JUnit to perform unit tests.

The project was implemented in a team of two people. We took turns at first writing an exhaustive testing regime, and then having the other person write the class to satisfy the tests.

Hiring Game

A simple Java game implemented to teach test driven development.

The Cargo Manager was another relatively simple project that was implemented in order to put test driven development into practice, especially in the context of a user interface. In this project, we also had to create a test plan through which our GUI must pass, as well as writing the whole project in a test driven manner.

I worked in a team with one other person to implement this project. This was another part of learning test driven development, where we took turns to write the tests and implement the classes. I wrote all of the GUI for this project.

Cargo Manager

A Cargo loading manager written to teach test driven development with GUIs.

uimg is a simple convenience application I wrote to save myself some time. It is very simple, but it has come in handy countless times since I wrote it. It takes an image that is currently on the clipboard, such as a screenshot, uploads it (via FTP) to my web hosting, and replaces the item on the clipboard with a url to the uploaded image. This especially comes in handy when chatting to someone and needing to show them a screenshot.

It is intended to be used by an application launcher such as Launchy or SlickRun (similar to Quicksilver on mac). In the above screenshot it is seen being launched by SlickRun.

uimg

A clipboard manipulator that replaces images with a url.

My Last.fm Activity Chart was a personal project which I created using the Last.fm Developer API (REST) because I wanted a good looking Last.fm chart for my deviantArt account, and the official provided charts did not fit my needs. Some of the features I implemented include:

List of the 10 most recently played tracks
Currently playing track (if any)
Weekly top 10
Randomly chooses between a set of 5 backgrounds
Caches that last 30 seconds to reduce server load

The project was written in PHP, and the page return in an image format, so the chart can be placed anywhere extremely easily. For example, here is the current live chart:

Last.fm Activity

A customized Last.fm chart using the Last.fm API.

The Online Alerts manager was an industry project which I completed at Uni. The aim of the web service was to upgrade old functionality that was previously handled with text documents. It performed the following main functions:

Allowed users to send new alerts
Allowed users to upload and parse the old format text files so their alerts can be input into the new database
Allowed users to browse alerts
Allowed users to search for alerts, and subscribe to a feed matching that search, so that every time an alert matching that search query was added, their feed was updated.

The project was implemented using C#, ASP.NET and Linq to SQL in conjunction with MS SQL.

Online Alerts

Web service for managing, adding, searching and sending alerts via RSS.

While at Creative Intersection I was given the opportunity to develop this colouring in app for Debbie Neale - an artist who creates beatufiul designs for kids to colour in. You can find it on the App Store under Click 'N' Colour or Click 'N' Colour Premium.

Click & Colour

Kids iPad app for colouring in designs.

After the floods hit Brisbane, my boss at Creative Intersection came up with the great idea of creating a site to aid small businesses in networking to share their assets and help each other recover. It came naturally, since we were already housing one of our clients after the CBD lost power for a few days.

On the technical side of things, the entire site was rapidly developed by myself and a designer over the course of two days. The backend was written on a LAMP stack, and the frontend was based on jQuery and Knockout.js.

Knockout is a front-end javascript data binding tool. I had been waiting for a chance to use it so when this opportunity presented itself, I jumped at the chance. It's used to handle the multi-select searching on the 'Find a Business' page, to template the data for each business into each one of those expandable boxes, and for the whole sign up and edit process. Using dependent observables makes it ludicrously easy to have tickbox to entirely change what search results were presented to the user. After this experience, I'm already working on a new project with knockout.

Save A Business

Business networking tool to aid recovery after the 2011 Brisbane Floods.

UberGloss was a final year uni project in a team of 5 people. I worked heavily on both the back and front ends. The task was to turn the given software (a very basic glossary with barely any interface, that handled word adding) into something more. We added the ability to browse the site as a guest, upvote/downvote definitions and translations, link words to other words, search for definitions, and cross reference large passages of text with the site's database. We totally redesigned the site, and added heavy social media aspects. Where the original system was just a glossary, we gave it mission, a purpose, social incentives and business model.

Behind the scenes, we incorporated Hibernate (the original software simply used inline SQL), and wrote a whole system allowing the frontend to communicate with the backend asynchronously. On the frontend we made many of the common tasks asynchronous, and generally improved the user experience.

Ubergloss

Glossary handling many languages, translations and cross referencing.

Another solo uni project, I came up with the idea for this Freelancing website aimed at the Australian market (this was before freelancer.com.au).

It is written from the ground up on a LAMP stack, with the front end using Prototype.

Feel free to explore it yourself, you can see a live version of the site at jonpacker.com/freelancemarket

Freelance Market

A fully-featured freelancer networking site.

I wrote all of the code for the iPhone and iPad version of this app for a client while at Creative Intersection.

It allows a spectator to track the location of a player on the field. At the end of the game, the user can view a slew of statistics based on the data recorded.

The app was originally written for iPad, and a well thought-out MVC implementation allowed us to easily extend to a universal app when the time came.

Coachbuddy

Soccer player tracking and statistics in a universal iOS app.

When Opera first released their developer preview allowing the addition of speed-dial extensions, I quickly wrote this. It displays your Twitter home timeline within your Opera speed dial.

This extension won the Opera Team-Up award for best speed dial extension.

It implements an OAuth Consumer in JavaScript, and consumes the Twitter REST api.

The preferences page was implemented using Knockout.js, which allowed me to bind the inputs on the page directly to the persistent extension settings.

Timeline

An award winning Opera speed-dial extension for Twitter.

This Opera speed-dial extension shows a local weather radar.

The way the data is retrieved is interesting. Since BOM (Australian public meteorology service) do not publish a generic API of any kind, I had to get creative.

Since I cannot do generic cross-domain ajax requests thanks to security restrictions, James Padolsey's Cross Domain Ajax library was used. This allowed me to scrape the web page, filter the data I needed using some regular expressions, and publish it on the page.

This is done every 30 seconds or so, to keep the feed up to date.

The settings page also uses some creative JavaScript--since some radars are spread over two states, they appear twice on the list. Thanks to the way I implemented the persistent preferences using Knockout JS, every element with a certain value attached to it is selected when one of them is. The end result means there's an elegant solution to one option appearing twice on a radio-style mutually exclusive list!

Radardial

Live Australian weather radars in your Opera speed-dial.

Motivational Australia

Beacon

Tromsøbrua and the Arctic Cathedral in Tromsø, Norway.

Temperate

A transition of seasons in Rovaniemi, Finland

Fall

Frosty colours over a lake on verge of freezing in late autumn.

Frost

Morning frost in Autumn in Rovaniemi, Finland

Kemijoki

The Kemijoki and the Jätkänkynttilä bridge in Rovaniemi, Finland

Vøringfossen

The Vøringfoss in Eidfjord, Norway.

Spectral

Reflections on the fjord from Samnanger, Norway

Into Saltfjellet

On the E6 heading into a freshly snowed Saltfjellet, Norway.

Nordland

On the E6, east of Rana, Norway

Samnanger Shed

A shed perched on a rock in Samnanger in Hordaland, Norway

Eidfjordsvatnet

Reflections on Eidfjordsvatnet in Norway.

Brisbane Under Fog

Sunrise from Mt Coot-tha in Brisbane, Australia - 3 shot panorama.

Stor Dragonheim

Bare cloven rock in Geirangerfjord, Norway

Dugurdsnatten

The mountain Dugurdsnatten and the river Hallingdalselve in Hallingdal, Norway

Tweed River

The Tweed River after sunrise in Northern Rivers, NSW, Australia

Overseer

The view from the top of Mt. Warning, in Northern Rivers, NSW, Australia

Atlanterhavsveien

Storseisundet Bridge on the Atlantic Highway, Norway

Lom Stavkirke

An 800 year old Stave Church in Lom, Norway

Under and Over

Train tracks piercing the rock in Hallingdal, Norway

Autumn Snow

Early snow in north Norway.

Korkea Jehkkas

The first Finnish fell that comes into view upon leaving Norway.

Eidfjord

From the ferry port of Brimnes on the Eidfjord, Norway

Saana

Saana from Kilpisjärvi, Finland

Isterdalen

Isterdalen valley from above Trollstigen, Møre og Romsdal, Norway

Vaattunkiköngäs

A trail near the Vaattunkiköngäs rapids north of Rovaniemi, Finland

Store Kongeriket II

Geirangerfjorden in Autumn, Norway

Store Kongeriket

Geirangerfjorden in Autumn, Norway

Kondolilla Forest

Picabeen Palms in the forest leading to the base of the Kondolilla Falls, north of Brisbane, Australia.

Kondolilla Forest 2

Kondolilla National Park, north of Brisbane, Australia

Fallen

A fallen tree in Kondolilla National Park, north of Brisbane, Australia

Kondolilla Forest 3

A waterfall in Kondolilla National Park, north of Brisbane, Australia

Still Life

Water droplets in the sunset from my home in Brisbane, Australia

Precipice

The view over the precipice of Queen Mary Falls, Main Range National Park, southwest of Brisbane, Australia

Lake Moogerah

Lake Moogerah and the northern ramparts of Main Range National Park, south west of Brisbane, Australia

Impact

The base of Queen Mary Falls, Main Range National Park, south west of Brisbane, Australia

Gorge

The precipice and following gorge into which Queen Mary Falls flows, Main Range National Park, southwest of Brisbane, Australia

Queen Mary Falls

Queen Mary Falls, Main Range National Park, southwest of Brisbane, Australia

Cedar Creek

The final waterfall and rock wall of Cedar Creek in the Samford Valley, north west of Brisbane, Australia

Coolangatta

Coolangatta beach on a January summer day. South of Brisbane on the Gold Coast, Australia

Bunya Rainforest

Flowing creek and forest in the rain at Bunya Mountains national park, west of Brisbane, Australia

Submerged

Deep in the rainforest on a wet December day, at Bunya Mountains national park, west of Brisbane, Australia

Misty Mountains

A low mist hanging over the forests atop the Bunya Mountains, west of Brisbane, Australia

O'reilly's

The view toward Main Range and Mount Barney national park from O'reilly's, in Lamington National Park, south of Brisbane, Australia. The prominent peak is Wilson's Peak.

Ferie

Milford Road, Eglington Valley, Fjordland National Park, New Zealand

Down with the Sun

Lake Pukaki, New Zealand

Mt Cook Evening

Mt Cook, Canterbury, New Zealand

Mt Cook

Mt Cook & the Tasman Valley, Canterbury, New Zealand

Milford Sound Morning

Milford Sound, New Zealand

Matka

Lake Hawea, New Zealand