CINXE.COM

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"/> <title>was.tl</title>  <link rel="stylesheet" type="text/css" href="https://was.tl/topbar.css"/> <script src="https://was.tl/topbar.js"></script> <link rel="stylesheet" type="text/css" href="/assets/style.css"/> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="me" href="https://hachyderm.io/@ericwastl" /> <style type="text/css"> body { margin: 0; overflow: auto; width: 550px; height: 550px; } area { display: block; } #background { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1000; background: url(assets/background.png) #000000 center no-repeat fixed; animation-duration: 1s; animation-timing-function: cubic-bezier(0,.5,1,.75); animation-name: fadein; } #hexes { position: fixed; left: 50%; top: 50%; width: 0; height: 0; overflow: visible; } .hex { position: relative; width: 200px; height: 174px; margin-left: -100px; margin-top: -87px; overflow: hidden; } .hex img.hex_img { animation-duration: 1s; animation-name: fadein; } .hex .hex_contents { animation-duration: 1s; animation-name: fadein; animation-timing-function: ease-in; } @keyframes fadein { from { opacity: 0; filter:alpha(opacity=0); } } .hex_ring_0 img.hex_img { opacity:0.8; filter:alpha(opacity=80); animation-timing-function: cubic-bezier(0.0, 0, 0.0, 1); } .hex_ring_1 img.hex_img { opacity:0.8; filter:alpha(opacity=80); animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); } .hex_ring_2 img.hex_img { opacity:0.8; filter:alpha(opacity=80); animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); } .hex_ring_3 img.hex_img { opacity:0.9; filter:alpha(opacity=90); animation-timing-function: cubic-bezier(0.8, 0, 0.8, 1); } .hex_ring_4 img.hex_img { opacity:1.0; filter:alpha(opacity=100); animation-timing-function: cubic-bezier(1.0, 0, 1.0, 1); } .hex_menu img.hex_img { opacity:0.6; filter:alpha(opacity=60); } .hex_hover img.hex_img { opacity:0.3; filter:alpha(opacity=30); } .hex_contents { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: .4; filter:alpha(opacity=40); color: #ffffff; } .hex_hover .hex_contents { opacity: 1; filter:alpha(opacity=100); } .hex_label_major { position:absolute; left:-75px; width:150px; margin-top:-.5em; text-align:center; font-size:20pt; } .hex_label_minor { position:absolute; left:-55px; width:110px; bottom:-78px; text-align:center; font-size:12pt; opacity: .5; filter:alpha(opacity=50); } a.hex_label_minor { color: inherit; text-decoration: none; } .icon { position: absolute; width: 120px; height: 120px; left: -60px; top: -60px; line-height: 120px; text-align: center; } .icon img { vertical-align: middle; margin-top: -.3em; } </style> <script type="text/javascript"> var hex_ox=0, hex_oy=0, hex_cur=null, hexcur_lastupdate=0, hexcur_timeout=null, hexes=[], hexpos=[], mousex=0, mousey=0; window.onload = function() { var nodes = document.getElementById("hexes").childNodes; hexes = []; for (var i=0; i<nodes.length; i++) { if (nodes[i].nodeName.toLowerCase() !== "div" || !nodes[i].className.match(/\bhex\b/)) continue; hexes.push(nodes[i]); } document.getElementById("hexmap_area_lt").onmouseover = function(e){ hex_offset( 1, 1); }; document.getElementById("hexmap_area_rt").onmouseover = function(e){ hex_offset(-1, 1); }; document.getElementById("hexmap_area_lb").onmouseover = function(e){ hex_offset( 1, -1); }; document.getElementById("hexmap_area_rb").onmouseover = function(e){ hex_offset(-1, -1); }; document.getElementById("hexmap_area_md").onmouseover = function(e){ hex_offset( 0, 0); }; hexpos_update(); }; function hexpos_update() { for (var i=hexes.length-1; i>=0; i--) { hexpos[i] = findpos(hexes[i]); } } document.onmousemove = function(e) { if (e) { mousex = e.pageX; mousey = e.pageY; } else { try { mousex = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; mousey = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } catch(e) { return; } /* really, ie8? */ } hexcur_update(); }; function hex_offset(ox, oy) { hex_ox = ox; hex_oy = oy; } function hexcur_update() { var now = (new Date()).getTime(); if (hexcur_lastupdate > now - 16) { if (hexcur_timeout === null) hexcur_timeout = setTimeout(hexcur_update, hexcur_lastupdate + 16); return; } if (hexcur_timeout !== null) clearTimeout(hexcur_timeout); hexcur_lastupdate = now; var found = false; var hovering = false; hex_cur = null; hexpos_update(); for (var i=hexes.length-1; i>=0; i--) { var hex = hexes[i]; var pos = hexpos[i]; var exp_ox = mousex >= pos.x+100 ? 1 : -1; var exp_oy = mousey >= pos.y+87 ? 1 : -1; if (!found && pos.x < mousex && pos.x+200 > mousex && pos.y < mousey && pos.y+174 > mousey && (!hex_ox || hex_ox == exp_ox) && (!hex_oy || hex_oy == exp_oy)) { found = true; hex_cur = hex; if (!hex.className.match(/\bhex_menu\b/)) continue; hex.className = hex.className.replace(/ hex_hover\b/, "") + " hex_hover"; hovering = true; } else { hex.className = hex.className.replace(/ hex_hover\b/, ""); } } document.body.style.cursor = hovering ? "pointer" : "default"; document.getElementById("hexmap_area_lt").style.cursor = hovering ? "pointer" : "default"; document.getElementById("hexmap_area_rt").style.cursor = hovering ? "pointer" : "default"; document.getElementById("hexmap_area_lb").style.cursor = hovering ? "pointer" : "default"; document.getElementById("hexmap_area_rb").style.cursor = hovering ? "pointer" : "default"; document.getElementById("hexmap_area_md").style.cursor = hovering ? "pointer" : "default"; } document.onclick = function(e) { if (!hex_cur) return; if (hex_cur.className.match(/\bhex_menu\b/)) { var links = hex_cur.getElementsByTagName("a"); if (links.length) { if (e) { e.preventDefault(); } else { event.returnValue = false; } location.href = links[0].href; } } }; function findpos(obj) { var x=0, y=0; do { x += obj.offsetLeft; y += obj.offsetTop; } while (obj = obj.offsetParent); return {x:x,y:y}; } </script> </head> <body> <header id="wastl-topbar"><h1><a href="https://was.tl/">wastl</a></h1><nav class="nav-local"><ul ><li><a href="/projects/">Projects</a></li ><li><a href="/contact/">Contact</a></li ></ul></nav ></header> <map id="hexmap" name="hexmap"> <area id="hexmap_area_lt" name="hexmap_area_lt" shape="poly" coords="0,0,50,0,0,87"/> <area id="hexmap_area_rt" name="hexmap_area_rt" shape="poly" coords="200,0,200,87,150,0"/> <area id="hexmap_area_lb" name="hexmap_area_lb" shape="poly" coords="0,87,50,174,0,174"/> <area id="hexmap_area_rb" name="hexmap_area_rb" shape="poly" coords="200,87,200,174,150,174"/> <area id="hexmap_area_md" name="hexmap_area_md" shape="poly" coords="50,0,150,0,200,87,150,174,50,174,0,87"/> </map> <div id="background"></div> <div id="hexes">  <div class="hex hex_ring_0" style="position:absolute; left: 0px; top: 0px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_1 hex_menu" style="position:absolute; left: 0px; top: 176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/> <div class="hex_contents" onmouseover="hex_offset(0,0)"> <div class="icon"><a href="/contact/"><img src="assets/menu-contact.png" alt=""/></a></div> <a href="/contact/" class="hex_label_minor">Contact</a> </div> </div> <div class="hex hex_ring_1 hex_menu" style="position:absolute; left: 0px; top:-176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/> <div class="hex_contents" onmouseover="hex_offset(0,0)"> <div class="icon"><a href="http://hexatlas.com/"><img src="assets/menu-hexatlas.png" alt=""/></a></div> <a href="http://hexatlas.com/" class="hex_label_minor" style="font-family:SourceCodePro,monospace; font-size:14pt;">hexatlas</a> </div> </div> <div class="hex hex_ring_2" style="position:absolute; left: 0px; top: 352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left: 0px; top:-352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 0px; top: 528px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 0px; top:-528px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 0px; top: 704px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 0px; top:-704px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div>  <div class="hex hex_ring_1 hex_menu" style="position:absolute; left: 151px; top: 88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/> <div class="hex_contents" onmouseover="hex_offset(0,0)"> <div class="icon"><a href="https://bsky.app/profile/was.tl"><img src="assets/menu-bluesky.png" alt=""/></a></div> <a href="https://bsky.app/profile/was.tl" class="hex_label_minor">Bluesky</a> </div> </div> <div class="hex hex_ring_1 hex_menu" style="position:absolute; left: 151px; top: -88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/> <div class="hex_contents" onmouseover="hex_offset(0,0)"> <div class="icon"><a href="https://github.com/topaz"><img src="assets/menu-github.png" alt=""/></a></div> <a href="https://github.com/topaz" class="hex_label_minor">GitHub</a> </div> </div> <div class="hex hex_ring_1 hex_menu" style="position:absolute; left:-151px; top: 88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/> <div class="hex_contents" onmouseover="hex_offset(0,0)"> <div class="icon"><a href="http://search.cpan.org/~topaz/"><img src="assets/menu-cpan.png" alt=""/></a></div> <a href="http://search.cpan.org/~topaz/" class="hex_label_minor">CPAN</a> </div> </div> <div class="hex hex_ring_1 hex_menu" style="position:absolute; left:-151px; top: -88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/> <div class="hex_contents" onmouseover="hex_offset(0,0)"> <div class="icon"><a href="/projects/"><img src="assets/menu-projects.png" alt=""/></a></div> <a href="/projects/" class="hex_label_minor">Projects</a> </div> </div> <div class="hex hex_ring_2" style="position:absolute; left: 151px; top: 264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left: 151px; top:-264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left:-151px; top: 264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left:-151px; top:-264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 151px; top: 440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 151px; top:-440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-151px; top: 440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-151px; top:-440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 151px; top: 616px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 151px; top:-616px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-151px; top: 616px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-151px; top:-616px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div>  <div class="hex hex_ring_2" style="position:absolute; left: 302px; top: 0px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left:-302px; top: 0px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left: 302px; top: 176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left: 302px; top:-176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left:-302px; top: 176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_2" style="position:absolute; left:-302px; top:-176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 302px; top: 352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 302px; top:-352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-302px; top: 352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-302px; top:-352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 302px; top: 528px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 302px; top:-528px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-302px; top: 528px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-302px; top:-528px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div>  <div class="hex hex_ring_3" style="position:absolute; left: 453px; top: 88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 453px; top: -88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-453px; top: 88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-453px; top: -88px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 453px; top: 264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left: 453px; top:-264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-453px; top: 264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_3" style="position:absolute; left:-453px; top:-264px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 453px; top: 440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 453px; top:-440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-453px; top: 440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-453px; top:-440px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div>  <div class="hex hex_ring_4" style="position:absolute; left: 604px; top: 0px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-604px; top: 0px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 604px; top: 176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 604px; top:-176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-604px; top: 176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-604px; top:-176px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 604px; top: 352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left: 604px; top:-352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-604px; top: 352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> <div class="hex hex_ring_4" style="position:absolute; left:-604px; top:-352px;"><img src="assets/hex.png" class="hex_img" alt="" usemap="#hexmap"/></div> </div> </body> </html>