mike@michaeljpotter.com

Hi I'm Mike

Front End Developer & UX/UI Designer

Profile face

About

Now I know what you are thinking, Michael Jackson, Harry Potter, is this guy famous or what. Now I would like to say I can do a mean moonwalk or fly around on a broom stick, but sorry to spoil all the fun, I can't do either of those. At least not sober anyway. All jokes aside, I am a down to earth guy who loves his family and anything design & tech-related.

Starting my career at 16, I decided to become a qualified signwriter. Spending 25 years in this industry, I have found myself working my way up the creative ladder for a few different compaines. At the peak of my employment, I found myself managing a team of 25 employees. With reaching as far as I could in management, I decided to start my own graphic/signwriting business. Owning my business for 13 years, I can say I have seen, created and fabricated all weird and wonderful creations. I found myself being the can-do man to my longstanding client's design needs. While I was running my business, I was also regularly upskilling. Any creative software I could get my hands on, I would. This thurst leads me slowly to web design. I found designing websites quite satisfying; it ticked all the boxes.

In 2019 I sold my business and undertook further learning, in which I have just completed a diploma in UX Design/Web Development & a certificate in E-commerce. If you would like to work with me, please feel free to reach out and make contact. There's nothing better than sitting down and having a great chat over a good cup of coffee.

Mike in phone

Skills I have picked up along the way...

  • Time Management, Collaborative
  • Agile/Scrum Practices
  • Lean Insights
  • UX Design Process

Frameworks/Libraries:

  • Bootstrap
  • Foundation
  • React
  • jQuery
  • Anime JS
  • GSAP JS
  • Wordpress/CMS

Applications:

  • Photoshop
  • Illustrator
  • Indesign
  • Adobe XD
  • Figma
  • Sketch
  • Git/GitHub

Languages:

  • HTML 5
  • CSS
  • SASS/SCSS
  • JavaScript
  • PHP

Actively using:

  • React
  • Nextjs
Download CV

Projects

Over the last 25 years, I have spent many hours conceptualising, brainstorming and crafting all weird and wonderful works of art. I want to be able to show all my back catalogue but to be fair; I think I would end up boring you silly. Instead of that, I have presented some of my most recent work. And few of my favourites from the past. If you have any questions, feel free to get in contact.

Mobile app of Queenstown
Preschool website

1+1 Preschool

Website Design & Development(CMS)

Preschool website

Pets at Whitford

Website Design & Development

Preschool website

ADS Security

Website Design & Development

Queenstown app

Destination Queenstown

JavaScript App Prototype

Shubox app

Shu Box

React App Prototype

FOAC website

Friends of Animals Charities

Website Design & Development(CMS)

Containerplan website

Container Plan

Website Design & Development(CMS)

Coffee face image

Coffee?

There's always time for coffee & chat.

If you would like to know more about me or work with me, please feel free to send me an email.

mike@michaeljpotter.com
Website page images
Completed

1+1 Preschool, Auckland

CMS WordPress Custom Theme Development

1+1 Preschool is an Early Childhood centre base in east Auckland and can host up to 30 children ranging from 6 months to 5 years old. I approached the centre owners to help build a better website with a much clearer UX design approach. The owners were in the mindset that their current website was not portraying the centre's ethos.

With my skills in UX, I took some time to research their potential competition and analysed what they were offering and how they were offering it. I created a sitemap & user flow diagram for their new website, which helped me complete an initial design prototype. From here, the client was happy for me to proceed to build their new site.

Using Foundation as my framework of choice, I created a fully working website utilising HTML, SASS & JavaScript. From here, once all of my testings was complete, I made a custom theme using WordPress. I did this so my client in future could make changes to their site as required.

On completion of the site, I set up and managed all their hosting needs, including all companies' email addresses. The client was pleased.

Tools used:

  • Photoshop, Illustrator & Figma
  • Foundation Framework
  • WordPress (CMS)
  • HTML & SASS
  • JavaScript & jQuery
  • Git/Github
  • cPanel, MySQL
  • AOS
  • GSAP
  • SwiperJS
  • RellaxJS
  • Mapbox
Computer & phone with website Visit live Site

Website Before Images:

Website page images
Completed

Pets at Whitford

CMS WordPress Custom Theme Development

Pets at Whitford is a premier pet daycare and boarding facility in east Auckland. Pets at Whitford approached me to help build a better website with a much clearer UX design approach. The owner was not happy with how their website looked and how it portrayed their overall business.

With my skills in UX, I took some time to research their potential competition and analysed what they were offering and how they were offering it. I created a sitemap & user flow diagram for their new website, which helped me complete an initial design prototype. From here, the client was happy for me to proceed to build their new site.

Using Foundation as my framework of choice, I created a fully working website utilising HTML, SASS & JavaScript. From here, the website has been passed to the client for review and the delivery of the finished content for the site. Once the client has completed this process, the template will be made into a WordPress site so the client can easily add further updates to the site.

On completion of the site, I will setup and managed all their hosting needs.

Tools used:

  • Photoshop, Illustrator & Figma
  • Foundation Framework
  • WordPress (CMS)
  • HTML & SASS
  • JavaScript & jQuery
  • Git/Github
  • cPanel, MySQL
  • AOS
  • GSAP
  • SwiperJS
  • Mapbox
Computer & phone with website Visit live Site
Website page images
Completed

ADS Security

CMS WordPress Custom Theme Development

ADS Security is a company that specialises in CCTV, Access Control, Facial Recognition and much more. ADS approached me to help build a better website with a much clearer UX design approach. The owner was in the mindset that their current website was not delivering the companies products and services well.

With my skills in UX, I took some time to research their potential competition and analysed what they were offering and how they were offering it. I created a sitemap & user flow diagram for their new website, which helped me complete an initial design prototype. From here, the client was happy for me to proceed to build their new site.

Using Foundation as my framework of choice, I created a fully working website utilising HTML, SASS & JavaScript. From here, the website has been passed to the client for review and the delivery of the finished content for the site. Once the client has completed this process, the template will be made into a WordPress site so the client can easily add further updates to the site.

On completion of the site, I will setup and managed all their hosting needs.

Tools used:

  • Photoshop, Illustrator & Figma
  • Foundation Framework
  • WordPress (CMS)
  • HTML & SASS
  • JavaScript & jQuery
  • Git/Github
  • cPanel, MySQL
  • AOS
  • GSAP
  • SwiperJS
  • Mapbox
Computer & phone with website Visit live Site
Website page images
Development Assignment

Destination Queenstown

JavaScript App Prototype

Our project scenario: Tourism New Zealand works with the tourism industry to positively promote New Zealand internationally. They have a new campaign that is aimed at visitors staying for short periods, booking their accommodation and arranging their transport. Your task is to create an application that allows users to input information, validate the information and provide meaningful feedback when validation has failed or passed. Display accommodation or transport options to the user based on the information entered. Calculate and display either accommodation or transport costs to the user. Tourism New Zealand wants the app to have its distinctive look and feel (whilst remaining cohesive with the Tourism New Zealand brand.

This project was a summative assignment from Yoobee, whereas I had to pick a destination point from within NZ and create an app prototype to assist with the booking process. This project was focused on the new skills we had learnt utilising JavaScript & jQuery. Our project had a specific logic required that we had to meet in this assignment, hence the limitations within the final product.

I enjoyed this project a lot as I love designing and creating great UX/UI interfaces. I love playing with animations, which keeps my thirst for more knowledge in this area of front end development.

Tools used:

  • Photoshop, Illustrator & Figma
  • HTML & SASS
  • JavaScript & jQuery
  • Git/Github
  • AnimeJS
  • LightpickJS
Computer & phone with website

Figma Design Images:

Website page images
Development Assignment

Shu Box

React App Prototype

Our project scenario: C2C (consumer to consumer) platforms match buyers with sellers, this type of e-commerce comprises online classifieds or forums where individuals can buy and sell their goods. Your client wants to create C2C market space for their users to buy and sell their products (you can decide types of product or product categories). The seller should be able to post a product with its associated details; buyers should view, leave comments and ask questions about the product/s.

The solution requires the user to:

  • Create an item
  • View a list
  • View item details
  • Update or edit the item and delete an item

This project was a summative assignment from Yoobee, whereas I had to pick a C2C scenario and create an app prototype to assist with buying and selling our chosen product type. This project was focused on the new skills we had learnt utilising React. Our project had specific requirements in that we needed to complete at least 2 CRUDS (Create, Read, Update, Display). To better understand our app I decided to create wireframes, EML & ERD diagrams to support our intended user & database requirements. Based on the diagrams, I created a MERN stack and custom API to connect to our database. For this project, I decided to explore adding animations to my UI, which I did so by using React-Spring.

I enjoyed this project a lot as I love designing and creating great UX/UI interfaces. I love playing with animations, which keeps my thirst for more knowledge in this area of front end development.

Tools used:

  • Photoshop, Illustrator & Figma
  • HTML & SASS
  • React/JSX
  • Git/Github
  • Reach Router
  • Axios
  • React Transition Group
  • React-Spring(Animations)
Computer & phone with website

Figma Design Images:

Website page images
Development Assignment

Friends of Animal Charaties

CMS WordPress Custom Theme Development

Friends of Animal Charities is based in Wellington and is a charity organisation that collects donations to support various animal welfare charities. This project was a formative assignment from Yoobee were as I had to pick a charity that had a neglected website and build a new one. FOAC was not engaged at all in the build of this site, and the sole purpose was to understand the process to create custom WordPress websites.

With my skills in UX, I took some time to research their potential competition and analysed what they were offering and how they were offering it. I created a sitemap & user flow diagram for their new website, which helped me complete an initial design prototype. From here, I proceeded to build their new site.

Using Foundation as my framework of choice, I created a fully working website utilising HTML, SASS & JavaScript. From here, once all of my testings was complete, I made a custom theme using WordPress. I did this so my client in future could make changes to their site as required.

I set up and managed all the hosting on completing the site and decided to use Digital Ocean to handle this.

Tools used:

  • Photoshop, Illustrator & Figma
  • Foundation Framework
  • WordPress (CMS)
  • HTML & SASS
  • JavaScript & jQuery
  • Git/Github
  • Plesk, MySQL
  • AOS
  • AnimeJS
  • SwiperJS
  • MixitupJS
  • LeafletJS
Computer & phone with website

Current Website Images:

Website page images
Development Assignment

Containerplan

CMS WordPress Custom Theme Development

Our project scenario: Your client represents a small non-profit organisation that wants to increase awareness of their cause and further it through education and engagement. The organisation has two income streams that need to be accommodated for in the site. Visitors should be able to donate money, and they also need to be able to purchase products that may include merchandise from a curated online catalogue.

Our project scenario is close to the non-profit organisation as Container Plan plans to be a free downloadable resource; at least, it was when I was working on this project. Container Plan does ask for donations but currently does not intend to introduce a paid tear system. Container Plan is still now in the development phase.

This project was a summative assignment from Yoobee, whereas I had to pick a client and work with them over three weeks to design and build a website to suit their requirements. Given the scope of the intended project and what the client had on hand, I could not acquire all the site content to complete a robust process fully. The client indicated to me that the time frame would not be long enough to support this project fully. However, with the information I had, I went to work and created a sitemap & user flow diagram for the website, which helped me complete an initial design prototype. From here, I proceeded to build the site.

Using Foundation as my framework of choice, I created a fully working website utilising HTML, SASS & JavaScript. From here, once all of my testings was complete, I made a custom theme using WordPress. I did this because this is what the summative required to fulfil the awarded credits.

I set up and managed all the hosting on completing the site and decided to use Digital Ocean to handle this.

Tools used:

  • Photoshop, Illustrator & Figma
  • Foundation Framework
  • WordPress (CMS)
  • HTML & SASS
  • JavaScript & jQuery
  • Git/Github
  • Plesk, MySQL
  • AOS
  • GSAP
  • SwiperJS
Computer & phone with website