The Canadian International Autoshow is an annual event held in Toronto, Canada. I developed a promotional mobile microsite for GNR8R in conjunction with AutoLife.

Initial visual designs were provided by a dedicated designer. Though lacking a back-end, I built the site to be dynamic, taking into account the user's date/time and timezone to avoid showing past events and ended prize draws while the show was running.

Furthermore, I was solely responsible for the visual and UX design of the map function and shuttle timetables. For the map I designed an clickable floor map in an abstract modern style to blend in with the previous designs, while for the shuttle timetables I used public transport timetables as a reference for communicating times clearly.

AutoLife is a Canadian automobile and lifestyle site created by GNR8R as an antidote to pre-existing sites which were seen as having a singular focus, being very sales-driven and lacking in transparency.

I was brought in take over front-end development from an offshore team, and to develop the motion design of the site, build new features and maintain existing features. As part of this process, I created functional prototypes of the animation and features and consulted with dedicated designers.

Following the launch of the MVP, I took a greater role in the design of new features, leveraging and extending the existing design language to lay out and build new pages.

Bridge was a startup developing a web app for tradesmen and contractors to manage their workflow. They contracted me as a front-end developer to help get them to MVP and beyond.

With my background in design, I was able to refine the look-and-feel of the existing codebase to bring it in line with the designers' vision, while adapting the designs where necessary and providing suggestions and feedback to the designers. In addition I worked with other front-end and back-end developers to fix bugs and build new features for launch.

From start to initial release, I was integral to the front-end development of an AngularJavascript adaptive online ordering site for the Australian national fast-food chain, Red Rooster.

In the first phase I took responsibility for the realisation of the tablet/desktop UI, developing a custom touch-driven menu and user-flow, separate from the mobile user-flow.

On the basis of my performance, I took over as primary front-end developer on the second half of the project, being responsible for diagnosing and implementing all front-end fixes and enhancements.

My second personal website, skeletonclock.digital was inspired in name and visuals by skeleton clocks - these are clocks where the ornamentation is provided by the innards and movements of the clock itself.

I designed the site as a stack of cards which is navigating using static arrow buttons and a set of tabs at the top of the page. Each card slides in or off from the side of the screen and contains a category of my works, which can be scrolled vertically just like any conventional page. I also included separate interstitial pages like plates in a book, as a canvas for interactive animations I had developed.

The whole site was built on the ASP.NET CMS Umbraco, with lots of modular Javascript on the front-end to manage transitions.

The design studio EightyOne came to me with the ambition to make an "award-winning" website for their client DOT.

The site would feature advanced interactive animations, page transitions and visual effects, while still being fully responsive and functional on mobile devices and older browsers.

Through the project, I was involved in the design process and made key contributions to the animation design, interactivity and usability.

Implementation was undertaken solely by me using a variety of web animation techniques and technologies including WebGL for 3D animation, CSS animation and Javascript-based SVG animation. The backend of the site is powered by Silverstripe CMS.

EightyOne is a design and production studio with which I have had a long working relationship.

Due to my expertise in web and UX, I was involved early in the process of creating a website to represent them.

With my design input, they created visual layouts which I was then responsible for turning into a living, fully responsive website.

The final site was built on Silverstripe CMS, using a lot of custom PHP and Javascript code to adapt it to different devices. And to give the site visual dynamism, I incorporated CSS animations to make elements slide or fade in as required.

On behalf of Xequals, I oversaw the design and development of a responsive web app for Remarkit, an IT equipment recycling company.

Remarkit needed a portal for their clients, including major telecommunications businesses, to manage the reselling of refurbished devices such as smartphones and tablets.

As lead developer, I helped scope and was responsible for all front-end development, wireframing and some visual prototyping. The web UI was developed entirely by me using AngularJavascript, in liasion with a developer from Remarkit who built the back-end.

Key features of this app include ordering and order tracking, reporting and custom client theming. It is fully responsive, to be accessible both on-site and in the office.

In conjunction with iLuvNZ.co.nz and Buy NZ, the digital production studio Xequals wanted to build a Facebook game to promote New Zealand brands.

Xequals brought me on to be involved in all aspects of the design and development process.

In addition to contributing to the multiple aspects of the game and interaction design, I was one of the primary developers, using the web game development tool Construct, as well as plenty of custom javascript and PHP to build the game.

The final game forms the basis of an active marketing campaign aimed at driving brand recognition and engagement, with the support of numerous local brands who contributed prizes for top players.

The production studio Prod required a new website as a point of contact with clients and potential clients. I helped them design and was responsible for implementing this site.

Due to the nature of their working partnerships it is not always possible to publicly present work they have done. So they decided to use the site to convey a sense of taste and open possibilities through the showcasing of interesting imagery. The site also included a secure area for clients to log in and view the progress of jobs for which the studio was performing work. For this I was responsible for both the UI design and implementation.

For this I implemented and laid out the functionality for displaying a different image and text each day of the week. And through the use of dynamic CSS and SVG graphics, I provided the means to coordinate the colour scheme of the site with the imagery, right down to the colour of the company logo.

Team Sports Australasia is a Nike sportswear distributor for the Australian and New Zealand markets.

I was responsible for implementing a new website design for them, from provided visuals.

For this I designed and implemented advanced interactivity to enable the browsing of products, display store locations relative to the user's location, amongst other things. Most of this interactivity was built to adapt to a wide range of devices, from desktops to smartphones. All of this was built on the Silverstripe CMS, using much custom Javascript and PHP.

This website build was deployed to form both the Australian and New Zealand websites. The finished Australian site in particular was commended by Nike itself as a model distributor website.

For a startup I was involved in (Spoink Games!), Hungry Piggies was redeveloped as a 2.5D Flash game designed to integrate with Facebook.

In this instance I was responsible for the bulk of the development work, as well as some UI design.

To develop my web design and development skills, but also to showcase the design projects I have completed, I built my first website.

Through this website I wanted to present the broad range of work I had done to that point, and convey my experience across the whole design-development continuum. I also specifically wanted the site to be fully responsive as is expected from a modern website, and to express some of my aesthetic sensibilities.

The site design went through several iterations, and was built from scratch in ASP.NET, together with HTML5, Javascript, and Sass/CSS for styling.

For my third personal website (this site), I decided to focus on modern simplicity and good typography, with simple, clean motion design. The idea was to put the focus on my projects rather than distract from them.

I chose to develop it using NextJs (a first for me), to gain the benefits of both server-side rendering and isomorphic React development. In addition, I learned react-spring to implement natural looking animations in a modern way.

For testing and documentation purposes, I created a Storybook. You can view the Storybook for this project here.