Portfolio

Sakri.net

sakri.net website icon

In the year 2000, sakri.com was already taken, so I bought sakri.net . This is probably version 7. The goal was to create a new online "business card" to promote my focus on more visual, interaction and animation oriented work.

The concept is simple :

The site is still in progress, I've taken a "start up approach" : Complete an MVP (minimum viable product), release (August 17, 2018), then improve the site while promoting it, and looking for new customers.

The "pixel guy" has been my sites identity/icon since the start, it's also been recycled for avatars, profile pics etc. on my various social media profiles.

I spent time reading Googles Material Design documents while designing/building the prototype. The approach works great for me : Wearing designer/developer hats simultaneously only serves to distract and slows the process down. Following material principles reduced the amount of design decisions and allowed me to focus on the code.

Google Material Design Card doc

Some feature highlights:

Loader

I wanted a lightweight, yet attractive "first impression". The "pixel guy" comes from a .png sprite sheet whose source is embedded in javascript. The loader uses a query selector to discover a list of images to load and observes them, represented by the coloured circles. Conceptually the "pixel guy" codes them on his computer, typing faster and faster as he nears completion.

Cards Menu

An html canvas replicate of the mobile OS "recent apps" menu, with the aim of "native like" performance. The app reads the "section" tags from the mark up, then makes "screenshots" of them, and passes these to the menu for scrolling (the original dom content is discarded). When a card is opened, it zooms in and is rendered in html (to enable text scrolling and selection of text/images).

Responsive design

The menu supports different layouts for horizontal and vertical orientation. It's designed to render, function correctly, and look good in *every* screen dimension. When the screen is resized, layout calculations are repeated, and the app updates itself accordingly.

Stats Module

This is a showcase for a minimal app, with some data visualization and animation. Users are asked to complete a set of tasks on the website, and are rewarded with a Pixel Confetti Animation. A standalone version of the Stats Module can be tested here : stats module

No Javascript version

I wanted the html markup to be as clean as possible, and to look good for browsers with javascript turned off. The markup is clean, but the "no js" version is still at the MVP stage ;) See it by turning off javascript in your browser, or by opening the page with a noJs=true param.

http://www.sakri.net?noJs=true

Navigation options

The cards can be scrolled with touch, mousewheel and keyboard (up, down, enter)

Grunt build script

Minifies and concatenates all the javascript and css files, then embeds them into the html pages to remove unnecessary calls to the server, speeding up page load. All the pages are currently under 100kb including all html, javascript and css. I am planning to move to webpack as soon as a number of javascript classes (intend to be released as separate libraries) have been developed further.

Year : 2000 - 2018

Client : Sakri Rosenstrom Technologies : Javascript, Html5, Canvas, css, Grunt, photoshop Sources : SakriDotNet github Moodboard : pinterest moodboard

Centomedia Digital Signage

Screenshot of centomedia

Centomedia is a Belgian Digital signage company with clients ranging from Airports (Brussels Airport, Dubai Airport), Multinationals (Nike, Engie, 3M), Universities (UAntwerpen, KULeuven) to local companies like KBC, BASE, Telenet, Spar and local municipalities). Their main product: Centoview “Screen communication made easy”, is a cloud hosted CMS system for custom designed Digital Signage slide shows. I was hired to assist with their transition from their Flash based Digital Signage approach to modern HTML5 solutions.

Year : 2014 - 2018

Client : Centomedia Technologies : Javascript, Polymer, Adobe Flash

Lotje childrens games

Screenshot of Lotje website homepage

Lotje is a well known series of Belgian childrens books by Lieve Baetensen. In the past, the site hosted a number of popular games built with Adobe Flash, which mobile users could no longer access. I was asked to create 3 new Html5 games which would work across all browsers and devices, aimed at kids between 3-7 years old.

I participated and gave technical consulting from start to finish. The games are customizable by a wordpress set up which allows the site admin to create new "versions" of the games by simply uploading new sets of images. To appease impatient kids, I created a lightweight micro game framework, mostly handling user interactions and game state.

I had fun with particles, as seen in the loaders and game interactions. Lotje illustrations heavily emphasize on "light" and "atmosphere", the particles are meant to emulate such a magical environment.

Year : 2017

Client : Lotje In collaboration with : Monokroom Technologies : Html5 Canvas, Javascript Play Games : Lotje Games

Knuckle Tattoo Generator

Screenshot of knuckle tattoo generator app

I was hired by Brighton based photographer Edward Bishop for a feature to accompany the website for his new book "Knuckles". Using Html5 Canvas, I created a knuckle tattoo generator, where users can enter their own text and choose a font in an html form, which is then rendered as a .png image, which can be shared on Facebook and Twitter.

Year : 2014

Client : Edward Bishop Photography Technologies : Html5 Canvas, Javascript In collaboration with : Tom Hole Visit site : Knuckle Tattoo Generator Projects instagram

Canvas Text Effects

Screenshot of Canvas Text Effect

I gave a talk at FITC Amsterdam in February 2014 and another one at Belgiums Multimania in Kortrijk on the topic of "Text Effects With Canvas". For these talks, and for research into the Html5 Canvas, I wrote a number of demos on codepen.io using tricks which I've accumulated up my sleeve over the years. The idea was to focus on performance and effects requiring pixel level manipulation, which cannot be done with css. Many of the demos allow the user to enter their own text.

Year : 2014

Technologies : Html5 Canvas, Javascript View demos at CodePen

Happy Metrix

Screenshot of Happy Metrix

Happy Metrix was a revisit back into start up world. The app lets you create easy-to-use dashboards, collecting validated data from diverse data sources. I built a custom set of charting components from scratch with the intent of making them easy to use, performant and lightweight enough for the iPad version of the app. I implemented a number of "data sources", working with the APIs of Twitter, Facebook, Instagram, Google Analytics, various URL shorteners/trackers and Tumblr (to name a few). On top of working on the app, I also took part in the promotion: speaking/visiting conferences and events, even spending days on a stand promoting the app at a trade show.

Year : 2013

Technologies : Flash, Flex, Html5, Javascript, OAuth, various social media APIs Visit site : Happy Metrix

Pioneer Kuro

Screenshot of Pioneer Kuro Flatscreen TV showcase

I collaborated with thesedays.be and Patrick Pietens on a flash based "Experience website" promoting Pioneers Kuro TV sets, one of the higher end flat screen tv's of 2008. In retrospect this occurred at an interesting moment in time: On one hand flash was maturing to the point of having solid architectural frameworks and 3D was the HOT topic (thanks to libraries like as Papervision3d and Away3d). On the other hand, the iPhone had just been released, and was soon to kill off Flash, with no mercy or remorse. The site had a distinctive 3d cube navigation, and was using some (at the moment) advanced management of video and interactive content. The project won several awards including the webaward.org.

Year : 2008

Client : Pioneer Technologies : Flash, Flex, Papervision3d webaward.org page for :Kuro Agency : Thesedays Antwerp Design : Valentijn Destoop In Collab with : Patrick Pietens

Bikkembergs Football

Screenshot of Bikkembergs Football experience site and online store

Bikkembergs Flash driven online store. The frontend connected to an Ogone backend for transactions. The project was a very fancy affair at the time, using FAMES (Flashout, ASDT, MTASC, Eclipse and SwfMill), or in other words an attempt at "open source flash". This set up allowed developers to code AS3 (programming language of Flash) with an editor superior to Flashbuilder or the Flash IDE, and export .swf movies from the command line. The project also featured a 3D video intro by Joost Korngold. This project won a webaward.org.

Year : 2007

Client : Bikkembergs Technologies : AS3, Fames, Ogone webaward.org page Agency : Thesedays Antwerp Design : Valentijn Destoop In Collab with : Nicolas Lierman 3d video by : renascent.nl

Help Joe

Screenshot of Henkel Help Joe tooth whitening paste viral campaign

Henkel wanted to try a viral approach to promoting their new tooth whitening paste called Express White. Nascom produced a "guitar hero" like game, where videos of a comedian brushing his teeth could be scrubbed with a users mouse. I was responsible for implementing the game mechanics and video "scrubbing". One the funnest projects I've worked on, and winner the FWA site of the day award.

Year : 2005

Client : Henkel Technologies : AS3, Flash, php, mysql fwa.com page for Help Joe Agency : Nasom

Aibo Newsletter CMS

Screenshot of Sony Europes AIBO robotic dog newsletter cms tool

My first web app! A basic CRUD tool for the Aibo marketing departments newsletters released in 2003. Using Object Oriented techniques learned from Actionscript, I built the front end using css and javascript, connecting to an ASP backend. Users could create new newsletters, save and edit them, then publish files ready to use for their monthly newsletter for the European Market.

Year : 2003

Client : Sony AIBO Technologies : Html, css, javascript, asp