diff --git a/assets/css/main.css b/assets/css/main.css
index e1925ca..16154e9 100644
--- 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
new file mode 100644
index 0000000..3d7fa16
--- /dev/null
+++ 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 = `
+
+ 
+
+`
+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.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
index 6258c1d..3a62415 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
+