@@ -5,13 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nick Anderson | Maker of Websites</title>
<link rel="stylesheet" href="css/foundation.css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700|Playfair+Display:700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/component.css" />
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/component.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/vendor/modernizr.js"></script>

</head>
<body>




<div class="parallax-background">
@@ -43,12 +45,13 @@ <h2>builder of websites.</h2>
<p><i class="fi-arrow-down"></i></p>
</div>
</div>

<div class="white_gradient"></div>
<div class="parallax-content">
<div class="row">

<div id="looking" class="row">
<div class="large-12 columns">
<h3>I am looking for new work.</h3>
<p>
<h3 class="callout">I am looking for <br />new work.</h3>
<p class="callout">
For the past two years I've been building iPad webview apps for multiple large brands in the pharmecutical industry.
I'm looking to mix things up a bit and get my hands dirty in some new technology.
</p>
@@ -70,52 +73,66 @@ <h3>What I'm bringing with me:</h3>
</p>
</div>
</div -->
<div class="row">
<div id="experience" class="row">
<div class="large-12 columns">
<h3>Where I came from:</h3>
</div>
</div>
<ul id="jobs" class="stage clearfix">

<li class="scene">
<h4>(March 2009 - February 2011)</h4>
<div class="movie" onclick="return true">
<div class="poster"></div>
<div class="info">
<header>
<h1>Active Website (Booj)</h1>
<span class="year">Product Dev</span>
<span class="year">March 2009 - February 2011</span>
<br>
<span class="year">Family-Oriented</span>
<span class="year">Design Lead/Web Designer</span>
<br>
<span class="duration">Pescatarian</span>
<span class="duration">Waste Management, Ebby Real Estate</span>
</header>
<p>
Sarah and Katy met when they were six years old, and it was friendship at first sight! They have been besties every since. Aside from Sarah's art skills, she can make anyone laugh with her jokes and she has a passion for weiner dogs and granola. Katy's favorite moment with Sarah was the day they wore a pizza hat and a lobster hat and volunteered to slather cream cheese on bagels for those in need.
After finishing school for
Interactive Media Design, I began
working for Active Website. My work
here included a webapp for Waste
Management and several ad
campaigns as Lead Marketing
Designer.
</p>
</div>
</div>
</li>

<li class="scene">
<h4>(March 2011 - September 2011)</h4>
<div class="movie" onclick="return true">
<div class="poster"></div>
<div class="info">
<header>
<h1>Zerista</h1>
<span class="year">Low-fi</span>
<span class="year">March 2011 - September 2011</span>
<br>
<span class="year">Startup</span>
<span class="year">Lead Front End Designer/Developer</span>
<br>
<span class="duration">Hectic</span>
</header>
<p>
Alyssa and Katy bonded a few years ago over whiskey, Santa hats and international travel. Alyssa is quite a lady- currently working toward her PhD at Brown University while also developing a flair for snow since there is so much of it in Rhode Island. Katy and Alyssa once created a Christmas musical sandwich around Nick, and that's the moment Katy knew that she couldn't have asked for a better sister-in-law.
In March 2011 I began working
for Zerista, where I designed and
developed their company site while
leading a campaign to improve the
UI and performance of their social
conferencing product.
</p>
</div>
</div>
</li>

<li class="scene">
<h4>(October 2011 - May 2013)</h4>
<div class="movie" onclick="return true">
<div class="poster"></div>
<div class="info">
@@ -128,12 +145,21 @@ <h1>Orange Collar Media</h1>
<span class="duration">Tequila Drinker</span>
</header>
<p>
Kim and Katy became instant friends in elementary school bonding over their mutual love of academics and life as only children. Kim is a multi-faceted gal with abilities ranging from acrobatic flying to calendar organization and much more. My favorite moment with Kim was two years ago when she tried to motivate my two cats to gallop like horses in order to shoot our Kanye West music video.
I started at Orange Collar Media in
October 2011, developing
eCommerce sites using the
Magento platform for a variety of clients,
including Bioware and Rovio’s
Angry Birds. I managed a small team
of inhouse and offshore developers
and coordinated their work with client
requests.
</p>
</div>
</div>
</li>
<li class="scene">
<h4>(May 2013 - Present)</h4>
<div class="movie" onclick="return true">
<div class="poster"></div>
<div class="info">
@@ -146,24 +172,74 @@ <h1>Blue Modus</h1>
<span class="duration">Tight Deadlines</span>
</header>
<p>
Robyn and Katy have been partners in crime ever since the day in fifth grade when they started charging a quarter for counseling services. Robyn is a master technology doer, wine drinker and knows how to break it down to 'Rude Boy' by Rihanna. Some of Katy's favorite Robyn moments were late nights when she was snuggled up to the back of Robyn while riding on her scooter with the wind whisking their hair about.
Currently I work at BlueModus, a
tech firm that has created web
solutions for the Bacardi family of
products as well as the
pharmaceutical companies Shire
and Astrazeneca. Here I lead the
development and delivery of complex
iPad webapps for doctors through
the Veeva platform. I manage a
small internal and offshore team and
coordnate delivery with clients in
multiple time zones.
</p>
</div>
</div>
</li>

</ul>
<div class="row">
<div class="large-12 columns">
<h3>My most recent work:</h3>
<p>
Is under strict NDA. I take confidentiality very seriously, so unfortunately the work I'm most proud of is not publically available.
However, if you email me, I can set
</p>
<!-- div class="seperator row">
<div class="large-12 columns"></div>
</div -->
<ul id="skills">
<li class="large-3 columns">
<hr />
<div id="pieChart-active" class="pie-chart">
<span class="design_label label">Design</span>
<span class="dev_label label">Development</span>
<span class="management_label label">Management</span>
</div>
</li>
<li class="large-3 columns">
<hr />
<div id="pieChart-zerista" class="pie-chart">
<span class="design_label label">Design</span>
<span class="dev_label label">Development</span>
<span class="management_label label">Management</span>
</div>
</li>
<li class="large-3 columns">
<hr />
<div id="pieChart-ocm" class="pie-chart">
<span class="design_label label">Design</span>
<span class="dev_label label">Development</span>
<span class="management_label label">Management</span>
</div>
</li>
<li class="large-3 columns">
<hr />
<div id="pieChart-bm" class="pie-chart">
<span class="design_label label">Design</span>
<span class="dev_label label">Development</span>
<span class="management_label label">Management</span>
</div>
</li>
</ul>


<div id="work" class="row">
<div class="large-12 columns">
<h3>My most recent work:</h3>
<p class="callout">
Is under strict NDA. I take confidentiality very seriously, so unfortunately the work I'm most proud of is not publically available.
However, if you contact me, I can set up a private and secure demo for you.
</p>
</div>
</div>

<div class="row">
<div id="testimonials" class="row">
<div class="large-12 columns">
<h3>What people have to say about me:</h3>
<ul class="small-block-grid-3">
@@ -200,7 +276,7 @@ <h3>What people have to say about me:</h3>
<div class="student">
<div class="photo robyn"> </div>
<p>Robyn Anderson</p>
<p>Co-Founder, <br/><a href="http://www.orangecollarmedia.com/" target="_blank">Orange Collar Media</a></p>
<p>Co-Founder, <br/><a href="http://www.orangecollarmedia.com/" target="_blank">OCM</a></p>
</div>
</div>

@@ -232,17 +308,32 @@ <h3>What people have to say about me:</h3>
</div>
</div>



<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/jquery.drawPieChart.js"></script>
<script>
$(document).foundation();

$(document).ready(function () {
$("#pieChart-bpd-1").drawPieChart([
{title: "", value: 48, color: "#eb5aa1"},
{title: "", value: 52, color: "#96989b"},
$("#pieChart-active").drawPieChart([
{title: "Design", value: 140, color: "#FFF"},
{title: "Dev", value: 25, color: "#d8d8d8"},
{title: "Management", value: 30, color: "#434345"},
]);
$("#pieChart-zerista").drawPieChart([
{title: "Design", value: 75, color: "#FFF"},
{title: "Dev", value: 75, color: "#d8d8d8"},
{title: "Management", value: 30, color: "#434345"},
]);
$("#pieChart-ocm").drawPieChart([
{title: "Design", value: 40, color: "#FFF"},
{title: "Dev", value: 100, color: "#d8d8d8"},
{title: "Management", value: 50, color: "#434345"},
]);
$("#pieChart-bm").drawPieChart([
{title: "Design", value: 20, color: "#FFF"},
{title: "Dev", value: 100, color: "#d8d8d8"},
{title: "Management", value: 60, color: "#434345"},
]);
});
</script>
@@ -0,0 +1,236 @@
/*!
* jquery.drawPieChart.js
* Version: 0.3(Beta)
* Inspired by Chart.js(http://www.chartjs.org/)
*
* Copyright 2013 hiro
* https://github.com/githiro/drawPieChart
* Released under the MIT license.
*
*/
;(function($, undefined) {
$.fn.drawPieChart = function(data, options) {
var $this = this,
W = $this.width(),
H = $this.height(),
centerX = W/2,
centerY = H/2,
cos = Math.cos,
sin = Math.sin,
PI = Math.PI,
settings = $.extend({
segmentShowStroke : true,
segmentStrokeColor : "#b5b5bb",
segmentStrokeWidth : 1,
baseColor: "#f5f5f5",
baseOffset: 1,
edgeOffset: 1,//offset from edge of $this
pieSegmentGroupClass: "pieSegmentGroup",
pieSegmentClass: "pieSegment",
lightPiesOffset: 12,//lighten pie's width
lightPiesOpacity: .0,//lighten pie's default opacity
lightPieClass: "lightPie",
animation : true,
animationSteps : 45,
animationEasing : "easeInOutExpo",
tipOffsetX: -15,
tipOffsetY: -45,
tipClass: "pieTip",
beforeDraw: function(){ },
afterDrawed : function(){ },
onPieMouseenter : function(e,data){ },
onPieMouseleave : function(e,data){ },
onPieClick : function(e,data){ }
}, options),
animationOptions = {
linear : function (t){
return t;
},
easeInOutExpo: function (t) {
var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
return (v>1) ? 1 : v;
}
},
requestAnimFrame = function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}();

var $wrapper = $('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>').appendTo($this);
var $groups = [],
$pies = [],
$lightPies = [],
easingFunction = animationOptions[settings.animationEasing],
pieRadius = Min([H/2,W/2]) - settings.edgeOffset,
segmentTotal = 0,
cachedDatas = {};

settings.beforeDraw.call($this);

//Draw base circle
var drawBasePie = function(){
var base = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $base = $(base).appendTo($wrapper);
base.setAttribute("cx", centerX);
base.setAttribute("cy", centerY);
base.setAttribute("r", pieRadius+settings.baseOffset);
base.setAttribute("fill", settings.baseColor);
}();

//Set up pie segments wrapper
var pathGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
var $pathGroup = $(pathGroup).appendTo($wrapper);
$pathGroup[0].setAttribute("opacity",0);

//Set up tooltip
var $tip = $('<div class="' + settings.tipClass + '" />').appendTo('body').hide(),
tipW = $tip.width(),
tipH = $tip.height();

for (var i = 0, len = data.length; i < len; i++){
segmentTotal += data[i].value;
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute("data-order", i);
g.setAttribute("class", settings.pieSegmentGroupClass);
$groups[i] = $(g).appendTo($pathGroup);
/*$groups[i]
.on("mouseenter", pathMouseEnter)
.on("mouseleave", pathMouseLeave)
.on("mousemove", pathMouseMove)
.on("click", pathClick);*/

var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
p.setAttribute("stroke-width", settings.segmentStrokeWidth);
p.setAttribute("stroke", settings.segmentStrokeColor);
p.setAttribute("stroke-miterlimit", 2);
p.setAttribute("fill", data[i].color);
p.setAttribute("class", settings.pieSegmentClass);
$pies[i] = $(p).appendTo($groups[i]);

var lp = document.createElementNS('http://www.w3.org/2000/svg', 'path');
lp.setAttribute("stroke-width", settings.segmentStrokeWidth);
lp.setAttribute("stroke", settings.segmentStrokeColor);
lp.setAttribute("stroke-miterlimit", 2);
lp.setAttribute("fill", data[i].color);
lp.setAttribute("opacity", settings.lightPiesOpacity);
lp.setAttribute("class", settings.lightPieClass);
$lightPies[i] = $(lp).appendTo($groups[i]);
}

//Animation start
triggerAnimation();

function pathMouseEnter(e){
var index = $(this).data().order;
$tip.text(data[index].title + ": " + data[index].value).fadeIn(200);
if ($groups[index][0].getAttribute("data-active") !== "active"){
$lightPies[index].animate({opacity: .8}, 180);
}
settings.onPieMouseenter.apply($(this),[e,data]);
}
function pathMouseLeave(e){
var index = $(this).data().order;
$tip.hide();
if ($groups[index][0].getAttribute("data-active") !== "active"){
$lightPies[index].animate({opacity: settings.lightPiesOpacity}, 100);
}
settings.onPieMouseleave.apply($(this),[e,data]);
}
function pathMouseMove(e){
$tip.css({
top: e.pageY + settings.tipOffsetY,
left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
});
}
function pathClick(e){
var index = $(this).data().order;
if (typeof data[index].action != "undefined")
data[index].action();
var targetGroup = $groups[index][0];
for (var i = 0, len = data.length; i < len; i++){
if (i === index) continue;
$groups[i][0].setAttribute("data-active","");
$lightPies[i].css({opacity: settings.lightPiesOpacity});
}
if (targetGroup.getAttribute("data-active") === "active"){
targetGroup.setAttribute("data-active","");
$lightPies[index].css({opacity: .8});
} else {
targetGroup.setAttribute("data-active","active");
$lightPies[index].css({opacity: 1});
}
settings.onPieClick.apply($(this),[e,data]);
}
function drawPieSegments (animationDecimal){
var startRadius = -PI/2,//-90 degree
rotateAnimation = 1;
if (settings.animation) {
rotateAnimation = animationDecimal;//count up between0~1
}

$pathGroup[0].setAttribute("opacity",animationDecimal);

//draw each path
for (var i = 0, len = data.length; i < len; i++){
var segmentAngle = rotateAnimation * ((data[i].value/segmentTotal) * (PI*2)),//start radian
endRadius = startRadius + segmentAngle,
largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
startX = centerX + cos(startRadius) * pieRadius,
startY = centerY + sin(startRadius) * pieRadius,
endX = centerX + cos(endRadius) * pieRadius,
endY = centerY + sin(endRadius) * pieRadius,
startX2 = centerX + cos(startRadius) * (pieRadius + settings.lightPiesOffset),
startY2 = centerY + sin(startRadius) * (pieRadius + settings.lightPiesOffset),
endX2 = centerX + cos(endRadius) * (pieRadius + settings.lightPiesOffset),
endY2 = centerY + sin(endRadius) * (pieRadius + settings.lightPiesOffset);
var cmd = [
'M', startX, startY,//Move pointer
'A', pieRadius, pieRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path
'L', centerX, centerY,//Draw line to the center.
'Z'//Cloth path
];
var cmd2 = [
'M', startX2, startY2,
'A', pieRadius + settings.lightPiesOffset, pieRadius + settings.lightPiesOffset, 0, largeArc, 1, endX2, endY2,//Draw outer arc path
'L', centerX, centerY,
'Z'
];
$pies[i][0].setAttribute("d",cmd.join(' '));
$lightPies[i][0].setAttribute("d", cmd2.join(' '));
startRadius += segmentAngle;
}
}

var animFrameAmount = (settings.animation)? 1/settings.animationSteps : 1,//if settings.animationSteps is 10, animFrameAmount is 0.1
animCount =(settings.animation)? 0 : 1;
function triggerAnimation(){
if (settings.animation) {
requestAnimFrame(animationLoop);
} else {
drawPieSegments(1);
}
}
function animationLoop(){
animCount += animFrameAmount;//animCount start from 0, after "settings.animationSteps"-times executed, animCount reaches 1.
drawPieSegments(easingFunction(animCount));
if (animCount < 1){
requestAnimFrame(arguments.callee);
} else {
settings.afterDrawed.call($this);
}
}
function Max(arr){
return Math.max.apply(null, arr);
}
function Min(arr){
return Math.min.apply(null, arr);
}
return $this;
};
})(jQuery);