1 files changed, 226 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6e8ebd7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html>
+<head>
+<title>Jules LaPlace</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+<style type="text/css">
+html,body { width: 100%; height: 100%; margin: 0; padding: 0; }
+body { background: #f6f8fd; overflow: hidden; font-family: 'trebuchet ms'; }
+#container { width: 100%; height: 100%; position: absolute; top: 0; left: 0;
+  transform-origin: 50% 50%;
+  perspective: 50;
+  -webkit-perspective: 50;
+}
+#parent { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
+#parent div { position: absolute; top: 0; left: 0; width: 90px; height: 20px; opacity: 1.0; } #parent div:nth-child(10n+0) { background: #f12; } #parent div:nth-child(10n+1) { background: #ff3; }
+#parent div:nth-child(10n+2) { background: #f83; }
+#parent div:nth-child(10n+3) { background: #38f; }
+#parent div:nth-child(10n+4) { background: #def; }
+#parent div:nth-child(10n+5) { background: #ccf; }
+#parent div:nth-child(3n+0) { height: 10px; }
+#parent div:nth-child(3n+1) { height: 20px; }
+#parent div:nth-child(3n+2) { height: 30px; }
+#parent div { background: #fff; }
+#content {
+  position: fixed;
+  top: 40%; left: 50%;
+  transform: translate3d(-50%,-50%,0);
+  z-index: 2;
+  font-size: 13px;
+  min-width: 400px;
+  border: 1px solid #fff;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.4);
+}
+@media (max-width: 700px) {
+  #content {
+    min-width: 350px;
+    width: 95%;
+    top: 40%;
+  }
+  #inner {
+    padding: 10px 0px;
+    transform: translateZ(0);
+  }
+  #parent div {
+    opacity: 0.1;
+  }
+}
+#inner {
+  padding: 30px 50px;
+  margin: 2px;
+  background: white;
+  box-shadow: 0 0px 2px rgba(0,0,0,0.4);
+}
+h1 {
+  margin-top: 5px;
+  font-family: georgia;
+  font-weight: normal;
+  font-size: 18px;
+}
+h2 {
+  font-family: georgia;
+  font-style: italic;
+  font-size: 13px;
+}
+#links {
+  line-height: 1.5;
+}
+#links > a {
+  display: block;
+}
+#asdf {
+  margin-top: 0;
+  padding-top: 10px;
+  font-size: 10px;
+  border-top: 1px solid #ddd;
+}
+small {
+  font-style: italic;
+  color: #222;
+  float: right;
+}
+a, a b { color: #02f; text-decoration: none; }
+a:hover { text-decoration: underline; }
+a:visited { color: #208; }
+.right { float: right }
+</style>
+</head>
+<body>
+
+<div id="container">
+<div id="parent"></div>
+</div>
+
+<div id="content">
+<div id="inner">
+<h1>Jules LaPlace</h1>
+
+<p id='links'>
+<a href="https://asdf.us/asciiblaster/">
+ASCIIBlaster
+<small>advanced ASCII art tool</small>
+</a>
+
+<a href="http://panke.gallery/exhibition/streamInstreamOut">
+Stream In / Stream Out
+<small>panke.gallery, april '18</small>
+</a>
+
+<a href="https://flufrecs.bandcamp.com/album/aa0004" target="_blank">
+AA0004
+<small>two track ep on fluf</small>
+</a>
+
+<a href="http://asdf.us/harp/">
+Harp
+<small>draw your own instrument</small>
+</a>
+
+<a href="http://asdf.us/triangle/">
+Triangle
+<small>mystical lambdoma matrix</small>
+</a>
+
+<a href="http://vvalls.com/">
+VValls
+<small>draw yr own 3D art gallery</small>
+</a>
+
+<a href="http://scannerjammer.com/">
+ScannerJammer
+<small>Second Internet chat</small>
+</a>
+
+<a href="http://wheresthepixel.com/">
+Where's the Pixel?
+<small>the pixel that went viral</small>
+</a>
+
+<a href="http://pomme.us/">
+Pomme.us
+<small>Apples to Apples with gifs</small>
+</a>
+</p>
+
+<div id="asdf">
+<span class='right'>
+<a href="http://asdf.us/"><b>asdf.us</b></a>
+</span>
+<a id="address">@</a>
+<a href="https://soundcloud.com/juleswelter">sc</a>
+<a href="https://github.com/julescarbon">gh</a>
+<a href="https://twitter.com/cosmicsands">tw</a>
+</div>
+</p>
+</center>
+
+</td></tr>
+</table>
+<script>address.setAttribute("href", "mailto:julescarbon&#x40;gmail.com")</script>
+</div>
+</div>
+
+</body>
+<script type="text/javascript" src="/grid/util.js"></script>
+<script type="text/javascript">
+
+var c = document.getElementById("container");
+var p = document.getElementById("parent");
+var squares = [];
+var squareCount = 150;
+
+var mx = 0.5;
+var my = 0.5;
+function init(){
+  var i = squareCount;
+  while (i--) {
+    populate();
+  }
+  loop();
+  document.addEventListener('mousemove', function(e){ mx = e.pageX/window.innerWidth; my = e.pageY/window.innerHeight })
+}
+function populate () {
+  var ww = (randInt(150) + 10)
+  var d = document.createElement("div");
+  var x = randInt(window.innerWidth - ww);
+  var y = randInt(window.innerHeight - 30);
+  var z = randInt(-400) + 50;
+//  var translation = "translate3d(" + [x,y,z].join("px,") + "px)";
+  var r = randWidth(20) - 10;
+  var translation = "translate3d(" + [x,y,z].join("px,") + "px)" // scale3d(" + [x,y,z].join("px,") + "px) rotateY(" + r + ")";
+  d.style.webkitTransform = translation;
+  d.style.width = ww + "px"
+  d.style.height = (randInt(20) + 10) + "px"
+  p.appendChild(d);
+  squares.push({ div: d, translation: translation });
+}
+
+var r = 40000;
+var start = r * 0.5;
+var mmx = mx, mmy = my;
+function avg(a,b,n){ return (b*n+a)/(n+1) }
+function loop(t){
+  requestAnimFrame(loop);
+  t = t;
+  start = start || t;
+  mmx -= (mmx - avg(mx, mmx, 15)) / 10;
+  mmy -= (mmy - avg(my, mmy, 15)) / 10;
+  var dt = start - t + r * 0.4
+  var rotation = -1 * (dt / r * 360 / 20 + 10*(2*mmx-1) + 5*(2*mmy-1)) % 360;
+  c.style.webkitTransform = "rotateY(" + rotation + "deg)"
+  // p.style.webkitTransform = "translateZ(5000px)";
+  // p.style.webkitTransform = "rotateY(" + 360-rotation + "deg) translateZ(500px)";
+  for (var i = 0; i < squareCount; i++) {
+    squares[i].div.style.webkitTransform = squares[i].translation + " rotateY(" + (360-rotation) + "deg)";
+  }
+}
+
+function randInt(n) { return Math.floor(Math.random()*n); }
+function randWidth(n) { return randInt(n) - n/2; }
+
+init();
+
+</script>
+</html>
+