Sakri Rosenstrom portfolio :

Posted by: Sakri Rosenstrom

Last updated on website icon

In 2000 was already taken, so I bought . This is probably version 7, the goal is an online 'business card' to promote my focus on visual, interaction and animation oriented work.

The site is in progress, adopting the "start up approach" : Complete an MVP (minimum viable product), release (August 17, 2018), then improve it while promoting 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.

Some feature highlights:


A lightweight attractive "first impression". The "pixel guy" comes from a .png sprite sheet whose source is embedded in javascript. A query selector fetches a list of required images and observes their load, represented by the coloured circles. Conceptually the "pixel guy" codes the server request on his laptop, typing faster as he completes and serves the page.

Cards Menu

An html canvas replicate of the mobile OS "recent apps" menu. The app reads the "section" tags from the mark up, 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).

"Deep linking" within or outside the app is supported by the menu, for example :

visit contact page

Responsive design

The Canvas 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

Essentially a 'tongue in cheeck' excuse to include some data visualization and animation, built with Vue.js. 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

Navigation options

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

Grunt build script

On top managing, Minifying and concatenating js/css files, the release build functions as a "static site generator", outputting all the cards as html files.

Year : 2000 - 2018

Client : Sakri Rosenstrom Technologies : Javascript, Html5, Canvas, css, vueJS, Grunt, photoshop Sources : SakriDotNet github Moodboard : pinterest moodboard
Copyright 1998-2018.

- by and Sakri Rosenstrom Front End Developer. All Rights Reserved.

All content, scripts and graphics on this web site are the property of Sakri Rosenstrom.