#Sparky69

[tootidalwavemaker]

You can have your Deep Tissue Massage here at Amazon Wellness Massage 💯

[marksleatorblog-blog]

IXD303 - HTML/CSS Prototypes

Prototype #1

http://codepen.io/Sparky69/pen/qmEyMW?editors=1010

This was a code academy exercise that I used to get to grips with some simple Javascript! It is very basic but helped me get familiar with using APIs.

Prototype #2

https://htmlpreview.github.io/?https://github.com/marksleator/Aurora-Weather-App/blob/master/prototypes/prototype_two/weather%20app%20prototype%202/index.html

This was another tutorial I followed on Udemy (would not recommend using this resource) which allowed me to expand into the different API sections available on OpenWeatherMap including the current forecast, hourly forecast and daily forecast. This taught me certain ways of getting the information and displaying it.

Prototype #3

https://htmlpreview.github.io/?https://github.com/marksleator/Aurora-Weather-App/blob/master/prototypes/prototype_3/current.html#

This was based on the last prototype, for my example I needed all the information to be shown on one page so I had to convert the above example with trial and error. I also learned how to convert info from the API into actual human readable information eg UNIX timestamp to hours, months, years etc.

FOR ALL EXAMPLES PLEASE FOLLOW THESE INSTRUCTIONS - 

“...go to the browsers search bar and you should see an icon of a shield with a red X through it. Click on that and "Load Unsafe Scripts". This will display the site.” 

-Hannah Sharp, 2017!!! 

[marksleatorblog-blog]

Digital Prototypes for Elements Site

Atom Animation #1 

http://codepen.io/Sparky69/pen/mOjbEp

If I recall I didn’t actually design this myself but was greatly inspired by this example. It was this example that lead to me creating the rest of these examples.

Atom Animation #2

http://codepen.io/Sparky69/pen/mRJwjM

This is a more complex example of the previous and was quite a trial by fire to get to work correctly. 

Atom Animation #3

http://codepen.io/Sparky69/pen/OWVgdv

Another variation of the atom animation. This one serves a different function, there are no flashy animations, it simply only works when its being hovered over. Furthermore the pathways a stripped back and is used to show the path of the atoms around the core.

Splash Page Animation

http://codepen.io/Sparky69/pen/RKPgMV

The final variation of the atom animation. No more hover states, no more flashy design. Just a constant spin and no real clickable interaction. It is simple and thus works well as a background image.