Portfolio website

Over mij

Profiel

Al van jongs af aan ben ik bezig met de programma’s binnen handbereik te kijken wat ik er allemaal mee kan en probeer ik er alles uit te halen.
Daar ben ik niet mee opgehouden en met mijn opleiding Multimediavormgeving en met mijn opleiding Creative Media & Gaming Technologies (voorheen Kunst & Techniek) ben ik daar voornamelijk op het gebied van internet mee verder gegaan en heb ik op het laatst focus gelegd op programmeren en VR.
Ik ben leergierig, heb over het algemeen een programma snel onder de knie en hou mezelf graag up-to-date.

Opleiding

Software kennis

PhotoshopDreamweaverInDesignFlashIllustratorPremiereAfter Effects

Ik heb ervaring met Brackets en een groot deel van de Creative Suite van Adobe, Visual Studio en het Office pakket en van Microsoft, Unity en overige software als WordPress, Bootstrap, Node.JS, Corel Draw, Sound Forge en Vegas.

Software talen kennis

HTML5CSS3JavaScriptPHPC#

Verder heb ik ervaring met object georiënteerd programmeren en SASS, jQuery, Git, Gulp, MySQL en Action Script 3.

Hobby’s

Naast scripting (front- en backend) en programmeren maak ik foto’s en video’s en bewerk ik deze. Daarnaast game ik, kijk ik films en series en luister ik graag naar muziek tijdens de andere hobby’s. Dit gebeurt allemaal veel op de computer waarvan ik het bouwen en onderhouden ook als hobby beschouw.

Portfolio

OrchestraVR Unity / VR

OrchestraVR

Afstuderen

In het laatste jaar van mijn opleiding Kunst & Techniek is deze samengevoegd en is daaruit de opleiding Creative Media & Gaming Technology voortgekomen. Voor mijn afstuderen heb ik in de vorm van een Smart Solution Semester een Immersive Media project gedaan voor de duur van een half schooljaar in samenwerking met The Virtual Dutch Men en Sense Glove bij Saxion.

Opdracht

De opdracht was het maken van muziek instrumenten die zo intuïtief mogelijk in VR bespeeld konden worden zodat echte muziekkanten er gemakkelijk mee overweg zouden kunnen. Het VR systeem wat we gebruikten was de HTC Vive en voor controllers niet die van de Vive zelf maar prototype VR gloves van Sense Glove. Om de applicatie te bouwen hebben we Unity gebruikt.

Team & taken

Ik heb tijdens dit project samengewerkt met twee internationale studenten (een Unity developer en een 3D artist). Omdat dit project voor mij het afstuderen was heb ik een onderzoeksverslag gemaakt over het ontwerpen van VRMI (Virtual Reality Music Instruments) voor VR Gloves. Daarnaast was ik projectleider en lead programmeur.

Resultaat

Het was de bedoeling dat het uiteindelijke product tentoongesteld werd door muzikanten in een demonstratie video die online gedeeld zou worden. Dit is uiteindelijk niet gelukt zoals de bedoeling was vanwege complicaties. Daarover en nog veel meer valt te lezen in mijn (Engelstalige) afstudeerverslag.

Proof video

Aan het einde van mijn afstudeerperiode was de voortgang zoals te zien in de ‘bewijsvideo’ die bij mijn verslag hoort.

 

Ondanks dat ik afgestudeerd was heb ik nog een paar weken tijd in het project gestoken om mijn groepsgenoten voort te helpen en het project meer af te maken. In de video hieronder is het kleur verschuiving effect te zien die ik nog afgemaakt heb. Wanneer je de lage noten aanslaat wordt het beeld warmer en de hoger noten maken het beeld kouder.

 

In de volgende video worden de effect pads voor pitch en delay gedemonstreerd.

 

Uiteindelijke beelden

In de showreel hieronder is de voortgang van het project in beeld gebracht en is de uiteindelijke versie van het project te zien. Hier kan je ook zien dat de spectrum bars aan de horizon nog een upgrade gekregen hebben.

 

En hieronder nog een video van een instrument demonstratie in de uiteindelijke versie.

 

VR Training Simulator Unity / VR

VR Training Simulator

Ter vervanging van mijn focusfase (specialisatie) die normaal gesproken bestaat uit allerlei opdrachten ben ik gegaan voor één grote opdracht van een half schooljaar in de vorm van een Immersive Media project als voorloper van de Smart Solutions Semesters bij Saxion.

Team

Het internationale multidisciplinaire team waar ik deel van uitmaakte bestond uit 7 studenten van verschillende opleidingen. We hebben voor het prototype wat we gebouwd hebben gebruik gemaakt van de HTC Vive en Unity.

Opdracht

De opdracht van Thales aan ons was het bouwen van een VR training simulator voor monteurs in opleiding. De schepen van de Koninklijke marine waar het om ging zijn veel op missie dus is er niet veel tijd over om de monteurs ervaring op te laten doen. Om meer wegwijs te worden op het schip en de systemen die ze onder handen moeten nemen alvast leren kennen.

De eis van de marine was om een ruimte zo realistisch mogelijk na te bouwen. Om ons werk te kunnen laten zien (vanwege geheimhouding) hebben we gekozen voor de boegschroefruimte en hebben we met het team de basis en het schip mogen bezoeken.

Taken

Mijn deel van het programmeren was het hiërarchie system. Dit script systeem zou toe te passen moeten zijn op elk object wat uit elkaar gehaald zou moeten kunnen worden. Halverwege het project werd automatisch het samenvoegen van code van anderen en het optimaliseren er van aan mijn taken toegevoegd.

Het hiërarchie systeem

In de video hieronder valt het systeem in werking te zien, het wordt aangestuurd door het menu. Het systeem verandert het uiterlijk van objecten (normaal, transparant en verborgen) en verzorgt de outlines. Het systeem houdt ook bij of objecten bij elkaar horen wanneer ze in of vast aan elkaar zitten, welk objecten geselecteerd zijn en waar dat object bij hoort voor wanneer het verplaatst wordt en het uit de hiërarchie gehaald wordt. Dit maakt het mogelijk objecten te kunnen resetten.

Als het script toegepast zou worden op een machine met interne onderdelen zou het de mogelijkheid geven er in te kunnen kijken en het demonteren van het apparaat.

 

Dit project was voor mij de eerste keer echt programmeren, de eerste keer in aanraking met C# en de eerste keer object georiënteerd programmeren. Ik heb tijdens deze periode extra lessen programmeren gevolgd van de Gaming opleiding van Saxion.

Showreel

Ons prototype is ook gebruikt voor een demonstratie aan de Belgische marine.

Fotoboek Design

Fotoboek

Vanwege eigen terughoudendheid maar ook een paar andere redenen was ik niet toegekomen aan het ontwerpen van websites tijdens mijn stage bij Catapult.

Eigen opdracht

Omdat ik ontwerp keuzes beter wilde kunnen onderbouwen ben ik deze eigen opdracht gaan doen voor Individual Focus voor de focusfase (specialisatie) van de opleiding Kunst & Techniek. De focusfase is de eerste helft van het laatste schooljaar en bestaat uit 4 Individual Focus opdrachten en voorbereiding op het afstudeerverslag. Met deze opdrachten is het mogelijk jezelf nog bij te spijkeren in onderwerpen naar keuze voor het afstuderen.

Ik heb het boek Beeldtaal (ISBN 9789462365155) bestudeerd en vervolgens een fotoboek gemaakt waar beeldelementen uitgelegd worden aan de hand van foto’s. Voor het ontwerpen heb ik gebruik gemaakt van InDesign en Photoshop.

Fotoboek

Het resultaat kan zo naar een drukker gestuurd worden (ik heb het ontworpen als rechtopstaande spread) maar hier de link naar de web vriendelijke versie: Beeldelementen (PDF).

Stage webdeveloper Verslag

Stage webdeveloper

Catapult creëert

Tijdens mijn opleiding Kunst & Techniek heb ik stage gelopen als webdeveloper bij Catapult, een communicatiebureau gevestigd in Hellendoorn.

Tijdens deze stage heb ik gewerkt aan WordPress websites, splash pagina’s, meer statische websites (vaak tijdelijke voorversies voor de dynamische websites) en sites met meer maatwerk. Ik heb ook onderzoek mogen doen naar hoe een moderne Node.js workflow met bijvoorbeeld Gulp en SASS zou kunnen passen binnen het bedrijf.

Voor het stageverslag heb ik een aparte site waar je bijvoorbeeld gemaakt werk kunt zien.

Portfolio Website

Portfolio site

Als minor voor tijdens de opleiding Kunst & Techniek heb ik gekozen voor de minor Skilled. Bij deze minor kon ik zelf inrichten waar ik aan wou en werken binnen een bepaald raamwerk.

Minor Skilled

De minor begon eerst met het invullen en plannen van de 4 fases: de inception, elaboration, construction en transition fases. Aan de hand daarvan krijg je een coach toegewezen die bekend is met het vakgebied. Mijn invulling voor de Minor was het bouwen van mijn portfolio website.

Inception phase

In deze fase ben ik vooral gaan bijspijkeren in de onderwerpen:

  • HTML5 (semantics)
  • CSS3 (SASS)
  • Javascript
  • PHP
  • Responsive webdesign
  • Webdevelopment workflows (Node.js, Gulp en meer en een beetje Git)
  • WordPress
  • Software als Dreamweaver en Photoshop

Elaboration phase

Aan het eind van deze periode was het responsive design zo goed als af. Hieronder zie je bij de eerste 3 stroken van links naar rechts hoe het ontwerp er zou moeten uitzien op grote, middelgrote en de kleinere apparaten. Rechts zie je het ontwerp hoe het eruit moet zien als een portfolio item is uitgeklapt.

Mockups

Construction phase

Het bouwen van de website, eerst statisch. De workflow met Node.js en Gulp waardoor SASS automatisch omgezet werd in CSS en met dat ik een aanpassing opsloeg de site al opnieuw geladen werd was een verademing. Hoewel ik juist nog tutorials had gevolgd voor Dreamweaver ben ik juist Brackets (ook van Adobe) gaan gebruiken.

Transition phase

Deze fase had ik gereserveerd voor het dynamische deel, het bouwen van het WordPress thema, het afwerken en het testen.

Voor meer informatie over wat ik gedaan en geleerd heb tijdens de minor en mijn reflectie kan je mijn (Engelstalige) verslag van de minor hier inzien.

De vlinderboom Website

Huisrestaurant ‘de Vlinderboom’

Voor huisruistaurant de Vlinderboom heb ik de website ontworpen en gebouwd.

De website is hier te bezichtigen.

Om de website te realiseren heb ik onder andere Photoshop, Dreamweaver, WordPress en WAMP gebruikt.

ScreenshotScreenshotScreenshotScreenshot

Pop!casa Website

Pop!casa

Project ‘de verleiding’

Aan het einde van het tweede jaar Kunst & Techniek zat een project wat het hele kwartiel in beslag nam zonder dat we daar nog vakken naast hadden. In groepen van 6 moesten we werken aan een installatie die geplaatst zou moeten worden bij één van de deelnemende winkels. Ieder lid kreeg ook een functie toegekend als art director en scrum master en had voor dat vakgebied dan ook de verantwoording, ik had de functie developer.

Comicasa

Als winkel kregen wij Comica toegewezen. Naast de installatie (frame, body, solderen, etc.) moesten we ook werken aan een website, een (haalbaarheid)onderzoek, technische tekeningen, ontwerpdocument, promo film en de aansturing (met Flash of Unity).

Aan het eind van het kwartiel was er een onthulling en moest de installatie het drie dagen uithouden.

Website

In het begin van de periode werkte ik aan het bouwen de website die door een ander groepslid was ontworpen. De website moest een CMS bevatten en heb ik gekozen om een WordPress theme te bouwen met het Foundation framework.

De site zelf is inmiddels offline, hieronder zijn browser screenshots te zien.

De image slider met de schuine onderrand te zien op de eerste afbeelding was even iets om uit te vogelen.

Screenshot

De achtergrond wisselde willekeurig van kleur met dat je een andere pagina bezocht met behulp van CSS en een PHP script.

Screenshot

De klikbare elementen hadden allemaal een fade animatie en wanneer je bijvoorbeeld met de cursor over de items op de procespagina ging schoof een excerpt in het zicht zoals hierboven te zien.

Screenshot Screenshot

 

Drukwerk Website

Project Conceptipedia

Project Conceptipedia was een project in het eerste jaar van Kunst & Techniek waar studenten duo’s een onderwerp uit een lijst moeten kiezen. Ik en mijn medestudent hadden als onderwerp: drukwerk.

Onderzoek

We moesten een verslag maken over het onderwerp en dat diende ook gelijk als de content voor de site.

Product

Ik heb het ontwerp gedaan van de site en het verslag en de scripting van de site in XHTML, CSS3 en PHP. Om uitmuntend te behalen hadden wij al vroegtijdig beslist om CSS media queries te gebruiken om ook smartphones te ondersteunen.

Voor dit project heb ik gebruik gemaakt van Photoshop, Dreamweaver en InDesign.

De website is live te zien, onderaan de site is meer informatie te vinden over het ontwerp.

Screenshot

Replato Website

Replato

Tijdens mijn baan bij Replato kreeg ik op een gegeven moment naast mijn normale werkzaamheden ook de opdracht om de nieuwe website maken.

Ontwerp

Hieronder valt het ontwerp te zien die ik ook als WordPress thema aan het ontwikkelen was maar lukte het niet om af te maken voor het aflopen van mijn contract. Voor het ontwerp heb ik gebruik gemaakt van Photoshop.

ScreenshotScreenshotScreenshotScreenshotScreenshot

Mijn andere werkzaamheden

  • Uittekenen presentaties bewegwijzering op schaal en in perspectief
  • Vormgeving en uittekenen typeplaten, naamplaten, stickers, panelen en meer
  • Aansturen fleetmarking afdeling met plotters en een grootmedia printer
  • Aansturen drukkerij met het maken van films voor zeefdruk
  • Aansturen graveer afdeling
  • Aansturen laser afdeling (graveren / frezen)
  • Beheer van een printer speciaal voor het printen op materialen als aluminium en plastic

Tijdens mijn baan heb ik een probleem met kleuren benadering opgelost bij de printer voor aluminium en plastic met kleurcalibratie. Daarnaast heb ik monitoren binnen het bedrijf gekalibreerd. Verder heb ik bij verschillende afdelingen bepaalde import & export processen weten te optimaliseren.

Alberts Grill Website

Alberts Grill

De gele kleur en het logo waren al bepaald, de rest van het ontwerp en het ontwikkel werk was mijn taak. Hiervoor heb ik gebruik gemaakt van Photoshop en Dreamweaver.

De website is hier te bezichtigen.

Screenshot Screenshot Screenshot Screenshot

Stukadoor Dogger Website

Stukadoor Dogger

Mijn eerste WordPress website. Hiervoor heb ik het ontwerp en het ontwikkelwerk gedaan en daar heb ik Photoshop, Dreamweaver en WAMP voor gebruikt.

De website is in 2009 online gegaan en is hier te zien.

Screenshot

Cinet Website

Proeve van bekwaamheid

Eindopdracht

Voor de eindopdracht van mijn MBO opleiding Multimediavormgeving had ik het idee bedacht om een (fictieve) internet bioscoop te maken voor de minder populaire filmpjes als in machinima video’s.

Ik heb de site ontworpen en gebouwd met een eigen CMS. Software die ik daarbij gebruikt heb zijn Photoshop, Dreamweaver, Flash, After Effects en WAMP.

Het eindresultaat valt hier te bezichtigen.

Screenshot

Oude portfolio’s Website

Oude portfolio websites

Screenshots van mijn portfolio website’s van voor de huidige versie, van oud (2007) naar nieuw.

Screenshot Screenshot Screenshot  Screenshot Screenshot Screenshot Screenshot

Contact