Grant Kiely

Web Developer
Work Portfolio
whalr image preview

Whalr Landing Page

Whalr
Design & Build
platejoy image preview

PlateJoy Mobile

PlateJoy
Build
joelfolio image preview

Portfolio Site

Joel Kennedy
Build
whalr image preview

Soundapt

Personal
Design & Build
Audimation preview

Audimation

Bluescope Steel
Design & Build
forza image preview

Forza 5

Microsoft
Build
nbn image preview

My Broadband Network

Shellharbour Council
Build
Spend your lunch well preview

Spend Your Lunch Well

ING
Build
uowfsae preview

UOW FSAE

University of Wollongong
Design & Build
amp super site preview

Super Comparison

AMP
Design & Build
lep site preview

Shellharbour LEP

Shellharbour Council
Build
spritely site preview

Spritely

Personal project
Design & Build

Whalr


browser top browser bottom

Client

Wharl CRM

URL

http://grant.io/whalr

Project Details

Designed and built a landing page for WhalrCRM

Tech Utilised

-SCSS
-Photoshop
-Illustrator

What I improved in my own development

This project really gave me a chance to improve my design skills.

I gained/improved the following skills:
-Creating a style guide
-Choosing a base colour
-Building a colour scheme
-Choosing fonts
-Considering layout options and sketching layout mockups
-Designing in photoshop
-Creating vector assets in illustrator.

PlateJoy Mobile


browser top browser bottom

Client

PlateJoy

URL

https://www.platejoy.com/

Project Details

Responsive mobile website for PlateJoy

Tech used:

-Sass
-Smacss

What I learnt from this project

This project was very heavily focussed on testing and code quality.

With a strict code review policy, this project allowed me to solidify my code quality and increase the reusability of my sass/css.

I also levelled up on my planning and time estimations thanks to guidance from @jmondo.

In addition to this I got to really dig into pseudo selectors and build some cool elements.

Joel Kennedy's Portfolio


browser top browser bottom

Client

Joel Kennedy

URL

grant.io/joelfolio/

Project Details

Portfolio site for Joel Kennedy

Tech Utilised:

-Sass
-JS
-Jquery
-Gulp
-Isotope/Masonry
-Touchswipe
-Modernizr
-Lightbox

What I learnt from this project:

This project was targeted at modern browsers, it allowed me to utilise modern css techniques, such as 3d transforms.

I also got to build a custom image slider that would utilise touch on mobile and a progress bar on desktop.
It also uses 3d transforms for added performance, it falls back to 2d to cover all modern browsers, and it's gorgeous!

Soundapt


browser top

Client

Personal Project

Project Details

A music app for sharing music you love online.

Tech Utilised

-Photoshop
-SCSS
-JS
-PHP

What I improved in my own development

I got to further improve my design skills and really streamline my design process on this project.

My NBN


browser top browser bottom

Client

Shellharbour City Council

URL

www.shellharbour.nsw.gov.au/nbn

Project Details

Implemented a NBN campaign website for SCC, included the following tasks:

-Perform Analysis of client requirements
-Specific UI focus for touch devices
-Research touch-based navigation (UI/UX)
-Collaborate with the graphic designer to develop site/graphics
-Create a survey, .NET forms & Video wall
-Mobile Development and testing
-.NET 3.5 and jquery development

Forza 5


browser top
Forza 5
browser bottom

Client

Microsoft

URL

http://vroooooooooom.com

Project Details

Promotional site for Forza 5.
This site utilises alot of GSAP and CSS3 animations.

The primary challenges when building the site were:

Spend Your Lunch Well


browser top
Love Your Lunch
browser bottom

Client

ING

Project Details

An ING Direct campaign to encourage Australians to spend their lunch well by taking part in exciting lunch-time activities. The campaign had over 3,000 entries and 30,000 visits.

The following technologies and techniques were utilised:

This project comprised a team of 3 developers and 2 designers. I was heavily involved with the front-end responsive development and in implementing a Kentico booking system for the events.

Audimation


browser top browser bottom

Client

BlueScope Steel

URL

http://audimation.net

Project Details

This online application was built for ISO Standard Auditing at BlueScope steel, but can be customised for any type of audit.

The following technologies were utilised:

This application is made up of two sections: an online administrators section and an auditor’s section.

The admin section allows users to create audit templates and schedule audits to be completed by auditors. The data is stored in a mysql database.

The auditor section provides a jquery.mobile form based UI that utilises HTML5 cache, JSON and localstorage to allow auditors to perform offline audits and produce a report suitable for document storage/email.

Worked with @Bryce1989, @peterpascuzzo, @StephyMom

UOW FSAE


browser top browser bottom

Client

University of Wollongong

URL

http://uow-fsae.com

Project Details

Developed and Implemented a site for the UOWFSAE team.

Involved the following tasks:

Super Comparison


browser top
Super Comparison site
browser bottom

Client

AMP

Project Details

This concept website provides users with comparative superannuation data about people in their geographical area and age group. It utilised over 100,000 database entries, and allows users to interact and gain insight about their super.

Technologies utilised:

Shellharbour LEP


browser top
Shellharbour LEP
browser bottom

Client

Shellharbour Council

URL

http://www.shellharbour.nsw.gov.au/lep2011/

Project Details

Implemented a site for the Shellharbour Draft LEP, included the following tasks:

Spritely


browser top
Spritely
browser bottom

Client

Personal Project

URL

http://spritely.io     Github

Project Details

The following technologies are being utilised: HTML5, CSS3, JavaScript, Jquery, PHP, ACE Editor.

This application seeks to provide a fast and intuitive Online IDE for web developers.
It’s main focus is speed, a rich feature set, and the ability to provide a universal development environment regardless of device.