StimulatingSolutions · pianojet · Jul 6, 2017
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1345,3 +1345,36 @@ h3.big {
   font-size: 175%;
   font-weight: bold;
 }
+
+
+
+/**** skillmil ****/
+
+#skillmill {
+  width: 814px;
+  height: 670px;
+  text-align: center;
+  margin: auto;
+}
+
+#skillmill #mill {
+  margin: auto;
+  text-align: center;
+  position: relative;
+}
+
+#skillmill #mill span {
+  position: absolute;
+}
+
+#skillmill #info {
+  margin: auto;
+  position: relative;
+  top: 85px;
+}
+
+.rotisserie {
+  width: 150px;
+  height: 100px;
+}
+
diff --git a/assets/js/skillmill.js b/assets/js/skillmill.js
@@ -0,0 +1,124 @@
+/*
+ *
+ * SKILLMILL - a circling windmill of portfolio images that
+ *             highlight skills in the center upon hover
+ *
+ * Justin Taylor, July 2017
+ *
+ *
+ */
+
+(function($){
+
+var circleImages;
+var ci;
+var numImages;
+var angle;
+var angleIncr;
+var xOffSet;
+var yOffSet;
+var radius;
+var x;
+var y;
+var intval;
+var timer;
+// todo: auto discover images
+var images = ['placeholder01.png','placeholder02.png','placeholder03.png','placeholder04.png','placeholder05.png','placeholder06.png'];
+var imagePath = 'media/portfolio/';
+
+
+var template = `
+  <span>
+    <img class="rotisserie" src="{{__IMG__}}"  />
+  </span>
+`
+var ci = $('#mill');
+
+$('#info').hide();
+
+// setup the area
+function init()
+{
+
+  var ci = $('#mill');
+  $.each(images, function(key, imageFile) {
+    thisSpan = template.replace('{{__IMG__}}', imagePath+imageFile);
+    ci.append(thisSpan);
+    console.log(key);
+    console.log(imageFile);
+
+  });
+
+
+  $('.rotisserie').hover(function(event) {
+
+      // fade image in
+      $('#rotisserie-platform').remove();
+      stop_Int();
+      var img = $('<img id="rotisserie-platform">');
+      img.attr('src', event.currentTarget.src);
+      img.appendTo('#info');
+      clearTimeout(timer);
+      $('#info').stop(true, true).fadeIn(1000);
+
+    }, function() {
+
+      // fade image out
+      start_Int();
+      $('#info').stop().fadeOut(1000);
+    }
+  );
+
+  numImages = images.length;
+  angle = (2*Math.PI)/numImages;
+  angleIncr = 0;
+  xOffSet = 230;
+  yOffSet = 140;
+  radius = 480;
+  x = 0;
+  y = 0;
+  intval;
+  start_Int();
+}
+
+// mathy stuff to calc thumb locations
+function displayThumbs()
+{
+  var ci = $('#mill');
+  ci.children('span').each(function(i) {
+    x = (radius * Math.sin(angleIncr+(angle*i))) + xOffSet;
+    y = 0.5*(radius * Math.cos(angleIncr+(angle*i))) + yOffSet;
+    console.log("i="+i+";  x="+x+";  y="+y+";  angle="+angle+";  angleIncr="+angleIncr+";");
+    ele = $(this);
+    ele[0].style.left = x+"px";
+    ele[0].style.top = y+"px";
+    ele[0].style.display = 'none';
+    ele[0].style.offsetHeight;
+    ele[0].style.display = '';
+  });
+}
+
+
+//
+// timers & helpers
+//
+function commenseRotation()
+{
+  angleIncr = angleIncr + .002;
+  displayThumbs();
+}
+
+function start_Int()
+{
+  intval=setInterval(function() {commenseRotation();},20);
+}
+
+function stop_Int(p)
+{
+  clearInterval(intval);
+}
+
+
+init();
+
+})(jQuery);
diff --git a/index.html b/index.html
@@ -21,6 +21,7 @@
   </head>
   <body>
       <span id="top">
+
     <!-- Header -->
       <header id="header">
         <div class="inner">
@@ -474,6 +475,14 @@ <h3>Our Values</h3>
         </div>
       </section>
 
+      <section id="skillmill" class="wrapper">
+        <div id="mill">
+        </div>
+        <div id="info">
+        </div>
+      </section>
+
+
       <section class="wrapper blur special company-contact"></section>
       <!-- Contact -->
       <section id="contact" class="wrapper special contact">
@@ -511,6 +520,7 @@ <h3 class="email">Email: <a class="email" href="mailto:team@stimulating-solution
       <script src="assets/js/util.js"></script>
       <script src="assets/js/banner.js?cachebuster=4"></script>
       <script src="assets/js/scrollTo.js?cachebuster=4"></script>
+      <script src="assets/js/skillmill.js?cachebuster=2"></script>
 
   </body>
 </html>
diff --git a/media/portfolio/placeholder01.png b/media/portfolio/placeholder01.png
diff --git a/media/portfolio/placeholder02.png b/media/portfolio/placeholder02.png
diff --git a/media/portfolio/placeholder03.png b/media/portfolio/placeholder03.png
diff --git a/media/portfolio/placeholder04.png b/media/portfolio/placeholder04.png
diff --git a/media/portfolio/placeholder05.png b/media/portfolio/placeholder05.png
diff --git a/media/portfolio/placeholder06.png b/media/portfolio/placeholder06.png