Portfolio links
FRONT END EXAMPLES...
Lions Tour 2017 (Rugby Union) entry form - Internal (ASB) | (HTML5, CSS) | With the Lions Tour in New Zealand this time around, we have decided to run a competition to engage our customers to renew their term deposits by giving them a chance to win game tickets. Our external design agency proposed a map of New Zealand with the regional prizes showing in the actual region on the map. Here is the final product code folder. Next job is to refactor my Javascript as it�s not optimised at all.
https://www.dropbox.com/s/iftsb3lgouso8a7/Lions%20form.zip?dl=0
Credit Card form experiment | (HTML5, CSS3, JS) | This is an idea I sketched up while thinking of experiments to challenge my knowledge and research capabilities. Still in progress but the basic functionality I proposed are there. User input, with browser auto complete, is mimicked on the cards, credit card font, back of the credit card is updated too just in reverse. Next steps are to add labels to the for fields to make this more accessible (as well as other accessibility additions), add some animation to the cards by only showing the back of the card once focusing on the Security code field. This is also built in expanded Javascript so the next step is to refactor the entire codebase, HTML, CSS and JS. Then once that is done, I will try to build this in React, my chosen JS framework I really want to gain experience in.
Please keep an eye on this project as I update it.
http://codepen.io/Nivicious/pen/yJBPdY
Daffodil Day donation page � ANZ (Touchpoint) | (HTML5, CSS3(LESS), JS) | Form was built by back end developers, in Java and then I was tasked with laying out the site structure and styling to look like the design provided, including custom checkboxes, select inputs and radio buttons. - Not live yet but a local version is here: https://www.dropbox.com/s/y2fchu0rho4c2eq/Daffodil%20Day%20Donation%20Page%20-%20ANZ.zip?dl=0
Fertility Associates register form build & styling (Touchpoint) | (HTML5, CSS3(LESS), JS and JS fall backs) | Form was built by back end developers, in Java and then I was tasked with laying out the site structure and styling to look like the design provided - http://info.fertilityassociates.co.nz/register/index.html - iFramed on: http://www.fertilityassociates.co.nz/book-a- free-nurse- consultation/
EMAIL EXAMPLES...
My first example is a very recent promotional build for ASB Bank. Fully mobile responsive, including Gmail, tested in multiple email clients, on multiple devices:
https://www.dropbox.com/s/nu58zzcrl4adn0v/Example%20-%20ASB%20-%20Tertiary%20FGF.html?dl=0
An email designed by our outsourced design agency that I was tasked with building for an annual cultural festival we were sponsoring:https://www.dropbox.com/s/7q7jdptrwyvt77c/Example%20-%20ASB%20-%20Polyfest.html?dl=0
An email I redesgined for one of our internal comms release. This is actually an Outlook template, so as well as designing and building this email, I had to keep in mind the fact that this needed to be a reusable template, editable by our not so technical staff:https://www.dropbox.com/s/nu58zzcrl4adn0v/Example%20-%20ASB%20-%20Tertiary%20FGF.html?dl=0
A newsletter I built for Udacity, using the Hybrid technique to ensure the email rendered mobile responsive in all email clients:
https://www.dropbox.com/s/2q1xq6sodvnqaqb/Example%20-%20Udacity.html?dl=0
A build I completed for Samsung New Zealand. Fully mobile responsive and fully tested in multiple email clients, on multiple devices. You can download from here: https://www.dropbox.com/s/rgr7huimqml9no6/Example%20-%20Samsung.html?dl=0
CODE REPOSITORIES�
Codepen: http://codepen.io/Nivicious/
Github: https://github.com/Nivicious
DESIGN REPOSITORIES�
Dribble: https://dribbble.com/Nivicious