Weather Cams: Mayan Island

This was a project that was part making the website and part making the Unity Weather cam. The WebGL webbuild shows a Unity3D scene where the user can switch between camera’s of the so called “Live Weather Cam”. Inspired by Time Square Cams . Time is taken from the user’s local computer time and interesting events happen based on that time. Buttons are done via Unity Canvas GUI buttons. Cam2 has several postprocessing scripts attached to it. If the WebGL doesnt load you can watch a Youtube Video of it here.

Tags: Unity WebGL, Unity3D, Autodesk Maya, Unity Tree Builder, Html, CSS, flexbox, SCSS,
SCSS Mixin, SCSS Variables, SCSS Nesting, SCSS Darken/Lighten.


Project RSVP (Javascript)

This project was about creating something usefull with Javascript and improving my skills further on that subject. Inspired by the paid TreeHouse Javascript track i followed this website lets you create a invitee list for your event. The user can add names to the list and check and uncheck who is coming to the event. The list can be sorted to only show people that are attending and in the top there is a counter of  confirmed/unconfirmed. There is also datavalidation on the user input to prevent empty inputs or inputs that woudnt make sense. The names on the list can also be edited or just removed from the list. If i decide to pick this project up again perhaps i can implement some form of google Agenda of facebook events intregration. A shared “What date is good for you” is also an option im thinking about.

Tags: Html, CSS, flexbox, javascript, TreeHouse.


Playground Test: Replica 42functions website

This was just a fun project where i tried replicate the 42functions website without trying to look at their sourcecode. Since they work with wordpress for some customers i decided todo the same and work within the bounderies of wordpress but with my own html and css. Usage of Css lists (ul, li etc) for nav menu, svg logo with usage of wordpress plugin since svg is a security risk so i needed a plugin to make it work on wordpress. Background video with a image filter over it. Also looked into css filters, but the repeating image overlay was easier. Also some usage of Font Awesome for the phone, search and email icons. Inspired by 42functions website .

Tags: html, css, font awesome, css lists, svg, :before/:after, flexbox, html video.


42functions: Demo sinterklaas assignment

This project was made for 42functions as a test of some webdev abilities, it was a really fun assignment to make with a ton of creative freedom. (Which i took to heart) i would like to imagine this could be a beginning for an actual “sinterklaas journaal” website for something. Usage of javascript for the opening and closing of the popup, css keyframes for the popup animation(with transform scale), usage of javascript to play an audiofile on opening the popup, and a png corner image by using an absolute position with a transform rotation (and one onhover), different css properties based on viewing device (@media) based on screen width, and finally some fun links to actual “Sinterklaas” related websites or products. (Some are now inactive since its not the season anymore)
Here is The assignment.

Tags: html, css, css lists, favicons, gifs, javascript buttons, css keyframes,
javascript audioplay, corner images, mobile css, flexbox.