Sakri.net
In 2000 sakri.com was already taken, so I bought sakri.net . 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:
Loader
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 pageResponsive 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.
