Stan Williams stanwmusic

Piano

Fully functional piano plays Ludovico Einaudi - Una Mattina. This is not an audio track! It plays live : )

If you know a webaudio library that reads notes with the correct timing please let me know. Original soundtrack here : https://www.youtube.com/watch?v=0Bvm9yG4cvs

For this analog clock, I used JavaScript only for getting the current time at load then used CSS animation to run the clock from there.

Just for experimenting with dynamic contact form validation using AngularJS

A hamburger menu that reveals its contents in a 3D-like way. Also designed to look like a real hamburger!

Update 6/4/19: Sass refactored

	<header>
	<form id="search">
	<input id="search-box" type="search" placeholder="Find something...">
	<input id="search-btn" type="submit" value="Search">
	</form>
	<nav>
	<ul>
	<li class="current">
	<a href="#home">Home</a>
	</li>

	<nav>
	<ul>
	<li>
	<a href="#">
	<!-- SVG code for Home icon -->
	<svg class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
	<polygon fill="#fff" points="15,0 0,10.5 4.5,10.5 4.5,30 11.35,30 11.352,17.626 18.55,17.609 18.55,30 25.5,30 25.5,10.5
	30,10.5 "/>
	</svg>

	- var ticks = 120;
	- var tickLabels = 12;
	- var tickInc = ticks / tickLabels;
	main
	.speedometer
	.speedometer-inner
	- for (var i = 0; i < ticks + 1; ++i) {
	.tick
	- for (var j = 0; j <= tickLabels; ++j) {
	- if (i == tickInc * j) {

	.app
	.no-int
	nav
	button(tabindex="0",data-home)
	.btn-cnt(tabindex="-1")
	svg(class="icon",xmlns="http://www.w3.org/2000/svg",viewBox="0 0 32 32",x="0px",y="0px")
	g
	polygon(points="16,2 2,12 2,30 30,30 30,12 16,2")

	span="Home"