harrymt
diff --git a/‎css/style.css‎
Lines changed: 1 addition & 1 deletion b/‎css/style.css‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎css/style.css.map‎
Lines changed: 2 additions & 2 deletions b/‎css/style.css.map‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎development.html‎
Lines changed: 11 additions & 0 deletions b/‎development.html‎
Lines changed: 11 additions & 0 deletions
diff --git a/‎img/bg_back.jpg‎
56 KB b/‎img/bg_back.jpg‎
56 KB
diff --git a/‎index.html‎
Lines changed: 3 additions & 3 deletions b/‎index.html‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎main.pde‎
Lines changed: 27 additions & 0 deletions b/‎main.pde‎
Lines changed: 27 additions & 0 deletions
diff --git a/‎scss/style.scss‎
Lines changed: 28 additions & 0 deletions b/‎scss/style.scss‎
Lines changed: 28 additions & 0 deletions
@@ -24,12 +24,19 @@
 
 </head>
 <body>
+
+  <canvas data-processing-sources="main.pde"></canvas>
+
+  <div class="cover-gradient"></div>
+
+
   <div class="container">
     <div class="cover">
       <div class="cover-inner">
 
         <img class="avatar" width="160" height="160" src="img/bg_player.png" alt="Harry Mumford-Turner">
 
+
         <p>Harry Mumford&#45;Turner</p>
 
         <h1 class="bio">
@@ -63,13 +70,17 @@ <h1 class="bio">
           </li>
         </ul>
       </div>
+
     </div>
   </div> <!-- ./container -->
 
   <!-- build:js inline -->
   <script src="/js/main.min.js"></script>
   <!-- /build -->
 
+  <!-- Processing js -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.min.js"></script>
+
 </body>
 </html>
 
 
@@ -0,0 +1,27 @@
+
+PImage img;
+int smallPoint, largePoint;
+
+void setup() {
+  size(window.innerWidth, window.innerHeight);
+  img = loadImage("img/bg_back.jpg");
+  smallPoint = 4;
+  largePoint = 40;
+  noStroke();
+  background(68);
+}
+
+void draw() {
+  int number = 0;
+  while(number < 5) {
+    number++;
+    int maxSizeOfRectangles = 500;
+    int minSizeOfRectangles = 10;
+    float pointillize = map(random(minSizeOfRectangles, maxSizeOfRectangles), 0, width, smallPoint, largePoint);
+    int x = int(random(0, window.innerWidth));
+    int y = int(random(0, window.innerHeight));
+    color pix = img.get(x, y);
+    fill(pix, 128);
+    rect(x, y, pointillize, pointillize);
+  }
+}
@@ -59,6 +59,23 @@ ol, ul {
 }
 
 
+.cover-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    opacity: .4;
+
+    background: rgba(0, 0, 0, .9);
+
+    filter: alpha(opacity=30);
+
+    @include transition(all .3s $ease-out-quad);
+    @include transform(translate3d(0,0,0));
+}
+
 .cover-inner {
     display: table-cell;
     vertical-align: middle;
@@ -114,6 +131,17 @@ ol, ul {
 
 
 
+//*****************************************************
+
+//
+// Canvas
+//
+canvas {
+    position: absolute;
+}
+
+
+
 //*****************************************************
 
 //