nstawski/README.md

## README.md

      
    Raw
  

              README.md
            
          
    d3.unconf gist.

  
## index.html
<!DOCTYPE html>
<html lang="en"></html>
<head>
  <meta charset="utf-5">
  <title>Nina Stawski</title>
  <meta name="description">
  <meta name="author" content="Nina Stawski">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="ns.css">
  <script src="ns.js"></script>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
  <style>
    #content-right {
        width: 500px;
    }


  </style>
  <script>
    $(document).ready(function () {
        createProjectPreviews('content-left');
        $('#portfolio').addClass('current').attr('href', '');
        $(document).on('click', function() {
            $('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'});
            $('.project-icon').hover(function() {
                var id = $(this).attr('id');
                $(".btn path").eq(findProjectID(id)).d3Click();
                //dimAll();
                $('#' + id + ' img').css({'border' : '1px solid grey'});
                $('#' + id + ' a').css({'opacity' : '1'});
        }, function() {
            $('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'}, 1000);
        });

        });
        $(".project-icon, svg").click(function(e) {
                e.stopPropagation();
        });
        $('.project-icon').hover(function() {
                var id = $(this).attr('id');
                $(".btn path").eq(findProjectID(id)).d3Click();
                //dimAll();
                $('#' + id + ' img').css({'border' : '1px solid grey'});
                $('#' + id + ' a').css({'opacity' : '1'});
        }, function() {
            $('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'}, 1000);
        });
        });

    jQuery.fn.d3Click = function () {
          this.each(function (i, e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            e.dispatchEvent(evt);
          });
    };

  </script>
</head>
<body>
  <div id="main-content">
    <div id="content-left" style="max-width: 600px; padding-top: 10px; float: left;"></div>
    <div id="content-circle-right">
      <script>
        var matrix = returnMatrix();

      </script>
      <script>
        var chord = d3.layout.chord()
            .padding(0.1)
            .matrix(matrix);
        var width = 326,
            height = 360,
            innerRadius = Math.min(width, height) * .21,
            outerRadius = innerRadius * 1.4;
        var fill = d3.scale.ordinal()
            .domain(d3.range(4))
            .range(["#5958A1", "#5958A1", "#996699", "#996699", "#996699", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#5958A1", "#996699", "#813742"]);
        var svg = d3.select("#content-circle-right").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2.18 + "," + height / 2.01 + ")");
        svg.append("g")
                .attr("class", "btn")
                .selectAll("path")
        .data(chord.groups)
            .enter().append("path")
            .style("fill", function(d) { return fill(d.index); })
            .style("stroke", function(d) { return fill(d.index); })
            .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
                .on("click", selectElement())
        var ticks = svg.append("g").selectAll("g")
            .data(chord.groups)
            .enter().append("g").selectAll("g")
            .data(groupTicks)
            .enter().append("g")
            .attr("transform", function(d) {
              return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
                  + "translate(" + outerRadius + ",0)";
            });
        // ticks.append("line")
        //     .attr("x1", 1)
        //     .attr("y1", 0)
        //     .attr("x2", 5)
        //     .attr("y2", 0)
        //     .style("stroke", "#999");
        ticks.append("text")
            .attr("x", 8)
            .attr("dy", ".3em")
            .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
            .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
            .text(function(d) { return d.label; });
        svg.append("g")
            .attr("class", "chord")
        .selectAll("path")
            .data(chord.chords)
        .enter().append("path")
            .attr("d", d3.svg.chord().radius(innerRadius))
            .style("fill", function(d) { return fill(d.target.index); })
            .style("opacity", 1);
        // Returns an array of tick angles and labels, given a group.
        function groupTicks(d) {
          var k = (d.endAngle - d.startAngle) / d.value;
          var labels = ['Illustrator', 'Photoshop', 'Wireframing', 'Prototyping', 'OmniGraffle', 'Python', 'Javascript', 'jQuery', 'jQueryUI', 'jQueryMobile', 'HTML5', 'CSS3', 'Bootstrap', 'GIT', 'jsPlumb', 'PHP', 'Design', 'UX/UI', 'Programming'
        ];
          return d3.range(0, d.value, 1000).map(function(v, i) {
            return {
              angle: k*0.5 + d.startAngle,
              label: labels[d.index]
            };
          });
        }
        // Returns an event handler for fading a given chord group.
        function fade(opacity) {
          return function(g, i) {
            svg.selectAll(".chord path")
              .filter(function(d) { return d.source.index != i && d.target.index != i; })
              .transition()
                .duration(100)
              .style("opacity", opacity);
          };
        }
        function selectElement() {
            return function(g, i) {
            var indexes = [];
            makeSelection(svg.selectAll(".chord path"), indexes);
            selectOther($("g text"), indexes);
            selectOther($(".btn path"), indexes);

            return false

            function makeSelection(selection, indexes) {
                if ($('.project-icon:hover').length == 0) { highlightElements(i); $('.project-icon').unbind('mouseenter mouseleave'); };

                indexes.push(i);
        selection
            .filter(function(d) { return d.source.index != i && d.target.index != i; })
            .transition()
            .duration(100)
            .style("opacity", 0.1);
                selection
                .filter(function(d) {
                    if (d.target.index == i) {
                        indexes.push(d.source.index)
                } else if (d.source.index == i && indexes.indexOf(d.target.index) == -1) {
                    indexes.push(d.target.index)
                }; return d.source.index == i || d.target.index == i; })
            .transition()
            .duration(100)
            .style("opacity", 1);
            }
            function selectOther(selection, indexes) {
                selection
                .each(function(d){
                    if (indexes.indexOf(d) == -1) {
                        $(this)
                    .css({"opacity" : 0.4, "font-weight" : "normal"});
                    }
                    else {
                        $(this)
                    .css({"opacity" : 1, "font-weight" : "bold"});
                    }
                })
            }
        }
        }
      </script>
    </div>
    <div id="content-bottom"></div>
  </div>
  <div id="footer"><img src="http://ninastawski.com/ns.png"></div>
</body>

## ns.css
body {
	margin: 20px auto;
    text-align: center;
    width: 894px;
    background: ghostwhite;
}

a {
	color: #000;
/*	text-decoration: none;*/
}

#footer {
	width:100%;
    height: 100%;
    clear: both;
}

#footer img {
    float: right;
    margin-top: 50px;
    margin-bottom: 40px;
}

a:hover {
	background-image: url(http://ninastawski.com/img/bg.png);
	text-decoration: none;
}

.current {
	font-weight: bold;
    color: #b6001b;
}

.name {
	display: inline;
	font-size: large;
	padding: 0 4px;
	background-image: url(http://ninastawski.com/img/bg.png);
}

.firstline {
	font-size: x-large;
	padding-top: 16px;
	padding-bottom: 10px;
}

#container {
	width: 80%;
	padding: 0;
	margin: 0;
	display: block;
}

#home {
	text-decoration: none;
	font-size: x-large;
	margin: 0;
	padding: 5px 20px;
}

#logos {
	float: right;
	padding: 10px;
}

p {
	padding: 8px 0;
	margin: 0;
	/*width: 80%;*/
}

/*#lefty {*/
	/*float: left;*/
	/*display: inline;*/
	/*max-width: 600px;*/
/*}*/

#header {
    width: 100%;
    height: 70px;
    padding-top: 15px;
    padding-bottom: 0;
}

#logo {
    float: left;
}

#social-icons {
    float: right;
    margin-top: 7px;
}

#social-icons a {
    margin: 11px 0 0 5px;
}

.divider {
    height: 1px;
    background: #ccc;
}

#main-navigation {
	float: right;
	display: inline;
    margin-top: -17px;
	padding-right: 20px;
	padding-bottom: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#main-navigation ul {
	overflow: hidden;
	width: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
#main-navigation li {
	float: left;
	font-size: large;
	margin: 0;
	padding: 3px 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 50px;
    margin-left: 10px;
}

#main-navigation li a {
	display: block;
	/*color: #000;*/
	text-decoration: none;
}
#main-navigation a {
	/*background: #fff;	*/
}

/*.rotate:hover {*/
	/*background-image: url(../img/bg.png);*/
/*}*/

#main-content {
    margin-top: 20px;
	font-size: large;
	text-align: left;
}

#content-left {
    float: left;
	display: inline;
	max-width: 500px; /*580*/
}

#content-right {
    float: right;
	display: inline;
    margin-right: -30px;
    margin-top: 10px;
}


/* ~~~~~~~~~ twitter ~~~~~~~~~~ */

#sidebar-title {
	font-size: x-large;
	font-weight: normal;
	padding: 0;
	padding-top: 5px;
	margin: 0;
}

#twitter_update_list li {
	list-style-type: none;
	padding-bottom: 6px;
	padding-top: 6px;

}

#twitter_update_list {
	padding: 0;
	font-size: small;
}

#twitter-link {
	padding: 0;
	margin: 0;
}

/* ~~~~~~~~~ aside ~~~~~~~~~~ */

aside {
	display: inline;
	float: left;
	width: 250px;
	border: 1px solid black;
	padding: 10px 18px 10px 20px;
	margin-top: 3px;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	-ms-border-radius:12px;
	-o-border-radius:12px;
	border-radius:12px;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
}

aside a {
	color: #000;
	text-decoration: none;
	text-align: left;
}

/*aside a:hover {*/
	/*background-image: url(../img/bg.png);*/
/*}*/

#logos li {
	float: right;
	padding: 0 5px;
	margin: 0;
	list-style-type: none;
}

#pic {
	padding-left: 2px;
	float:right;
}

.pics {
	height: 125px;
	padding-left: 10px;
	padding-top: 60px;
	right: auto;
	overflow: hidden;
	z-index: 1;
	max-width: 880px;
}

.pics img {
	width: 100px;
	padding: 0 2px;
}

.rotate{
	/*transform*/
	-webkit-transform:rotate(-8deg);
	-moz-transform:rotate(-8deg);
	-ms-transform:rotate(-8deg);
	-o-transform:rotate(-8deg);
	transform:rotate(-8deg);
	border-bottom: 3px black solid;
	border-right: 1px black solid;
/*	border-top: 1px black solid;*/
/*	border-left: 1px black solid;*/
	padding: 2px 8px;
	margin: 2px;
	border-radius: 30px;
}

.chord path {
    fill-opacity: .67;
    stroke: #000;
    stroke-width: .5px;
}

.project-icon {
    display: inline-block;
    float: left;
    width: 255px;
    height: 170px;
    margin: 15px 60px 20px 0;
}

.grey {
    background: grey;
}

.project-icon img {
    border: 1px solid #ccc;
}


#content-circle {
    font: 13px sans-serif;
    margin-left: -32px;
    margin-top: 40px;
    /*margin-right: -23px;*/
    display: inline-block;
    /*width: 400px;*/
    height: 378px;
    float: left;
}

#content-circle-right {
    font: 13px sans-serif;
    margin-right: -32px;
    margin-top: 10px;
    display: inline;
    height: 378px;
    float: right;
    z-index: 1000;
}

#content-bottom {
    width: 100%;
    clear: both;
    text-align: center;
}

## ns.js
/**
 * Author: Nina Stawski, me@ninastawski.com
 * Date: 5/27/13
 * Time: 8:57 PM
 */

function createProjectPreviews(element) {
    var projects = ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "frog", "olix"];
    for (var project in projects) {
        var el = '<div class="project-icon" id="' + projects[project] + '"><a href="http://ninastawski.com/' + projects[project] + '.html' + '"><img src="http://ninastawski.com/img/projects/ns-' + projects[project] + '.png"/></a><div>';

        if (project <=3) {
            $('#' + element).append(el);
        }
        else {
            $('#content-bottom').append(el)
        }
    }
    $('#' + element +' .project-icon:nth-child(2n)').css({'margin-right' : '0'});
    $('#content-bottom .project-icon:nth-child(3n)').css({'margin-right' : '0'});
}

function findProjectID(projectName) {
    var names = {
        "uxui" : 17,
        "prpr" : 18,
        "frog" : 18,
        "olix" : 17,
        "sfsu" : 16,
        "olpc" : 16,
        "tsla" : 17,
        "dots" : 16,
        "grph" : 16
    }

    return names[projectName]
}

function getProjectPictures(projectName) {
    var num_pictures = {"prpr" : 7, "sfsu" : 5, "dots" : 3, "olpc" : 4, "uxui" : 3, "tsla" : 4, "grph" : 5, "frog" : 1, "olix" : 2};
    var pictures = '';
    for (var counter = 1; counter < num_pictures[projectName] + 1; counter++) {
    var source = 'http://ninastawski.com/img/' + projectName + '/' + projectName + '-0' + counter + '.png';
           pictures += '<img src="' + source + '" style="border: 1px solid #ccc; margin: 30px auto;" />';
    }
    return pictures
}

function highlightElements(index) {
    var elementGroups = {
        0 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph"], //Illustrator
        1 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "frog", "olix"], //Photoshop
        2 : ["uxui", "prpr", "olpc", "tsla" ], //Wireframing
        3 : ["uxui", "prpr", "tsla", "olix" ], //Prototyping
        4 : ["uxui", "prpr", "tsla" ], //OmniGraffle
        5 : ["prpr"], //Python
        6 : ["prpr", "frog"], //Javascript
        7 : ["prpr"], //jQuery
        8 : ["prpr"], //jQueryUI
        9 : [], //jQueryMobile
       10 : ["prpr", "frog"], //HTML5
       11 : ["prpr", "frog"], //CSS3
       12 : ["prpr"], //Bootstrap
       13 : ["prpr"], //GIT
       14 : ["prpr"], //jsPlumb
       15 : [], //PHP
       16 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "olix"], //Design
       17 : ["uxui", "prpr", "tsla", "olix"], //UX/UI
       18 : ["prpr", "frog"]  //Programming
    };
    dimAll();
    for (var num in elementGroups[index]) {
        var project = elementGroups[index][num];
        $('#' + project + ' img').css({'border' : '1px solid grey'});
        $('#' + project + ' a').css({'opacity' : '1'});
    }
}

function dimAll() {
    $('.project-icon img').each(function() {
    $(this).css({'border' : '1px solid #ccc'});
    $(this).parent().css({'opacity' : '0.2'});
    });
}

function returnMatrix() {
        return [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
            [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
            [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
            [0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
            [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
            ];
}

function returnMatrixPrpr() {
        return [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
            [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //HTML5
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //CSS3
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
            [0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0, 0, 0, 0, 0.3, 0.3, 0], //Design
            [0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0, 0.3], //UX/UI
            [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
            ];
}

function returnMatrixSfsu() {
        return [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
            [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
            [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
            [0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.3], //UX/UI
            [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
            ];
}

function returnMatrixUxui() {
        return [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
            [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
            [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
            [0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
            [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
            ];
//        return [
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
//            [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
//            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
//            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
//            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
//            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
//            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
//            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
//            [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
//            [0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0.3], //UX/UI
//            [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
//            ];
}

function returnMatrixTsla() {
        return [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
            [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
            [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
            [0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
            [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
            ];
}

function returnMatrixFrog() {
        return [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
            [0, 0, 0, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Prototyping
            [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
            [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Python
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
            [0, 0, 0, 0.5, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQuery
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryUI
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //HTML5
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //CSS3
            [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0], //Bootstrap
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0], //jsPlumb
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
            [0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0, 0, 0, 0, 0.3, 0.3, 0], //Design
            [0, 0, 0.4, 0.4, 0.4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.4, 0, 0], //UX/UI
            [0, 0.15, 0, 0, 0, 0, 0.15, 0, 0, 0, 0.15, 0.15, 0, 0.15, 0, 0, 0, 0, 0] //Programming
            ];
}
	<!DOCTYPE html>
	<html lang="en"></html>
	<head>
	<meta charset="utf-5">
	<title>Nina Stawski</title>
	<meta name="description">
	<meta name="author" content="Nina Stawski">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="ns.css">
	<script src="ns.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<style>
	#content-right {
	width: 500px;
	}


	</style>
	<script>
	$(document).ready(function () {
	createProjectPreviews('content-left');
	$('#portfolio').addClass('current').attr('href', '');
	$(document).on('click', function() {
	$('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'});
	$('.project-icon').hover(function() {
	var id = $(this).attr('id');
	$(".btn path").eq(findProjectID(id)).d3Click();
	//dimAll();
	$('#' + id + ' img').css({'border' : '1px solid grey'});
	$('#' + id + ' a').css({'opacity' : '1'});
	}, function() {
	$('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'}, 1000);
	});

	});
	$(".project-icon, svg").click(function(e) {
	e.stopPropagation();
	});
	$('.project-icon').hover(function() {
	var id = $(this).attr('id');
	$(".btn path").eq(findProjectID(id)).d3Click();
	//dimAll();
	$('#' + id + ' img').css({'border' : '1px solid grey'});
	$('#' + id + ' a').css({'opacity' : '1'});
	}, function() {
	$('.project-icon').children().css({'opacity' : 1}).children().css({'border-color' : '#ccc'});svg.selectAll('path, text').style({'opacity' : 1, 'font-weight' : 'normal'}, 1000);
	});
	});

	jQuery.fn.d3Click = function () {
	this.each(function (i, e) {
	var evt = document.createEvent("MouseEvents");
	evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	e.dispatchEvent(evt);
	});
	};

	</script>
	</head>
	<body>
	<div id="main-content">
	<div id="content-left" style="max-width: 600px; padding-top: 10px; float: left;"></div>
	<div id="content-circle-right">
	<script>
	var matrix = returnMatrix();

	</script>
	<script>
	var chord = d3.layout.chord()
	.padding(0.1)
	.matrix(matrix);
	var width = 326,
	height = 360,
	innerRadius = Math.min(width, height) * .21,
	outerRadius = innerRadius * 1.4;
	var fill = d3.scale.ordinal()
	.domain(d3.range(4))
	.range(["#5958A1", "#5958A1", "#996699", "#996699", "#996699", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#813742", "#5958A1", "#996699", "#813742"]);
	var svg = d3.select("#content-circle-right").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2.18 + "," + height / 2.01 + ")");
	svg.append("g")
	.attr("class", "btn")
	.selectAll("path")
	.data(chord.groups)
	.enter().append("path")
	.style("fill", function(d) { return fill(d.index); })
	.style("stroke", function(d) { return fill(d.index); })
	.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
	.on("click", selectElement())
	var ticks = svg.append("g").selectAll("g")
	.data(chord.groups)
	.enter().append("g").selectAll("g")
	.data(groupTicks)
	.enter().append("g")
	.attr("transform", function(d) {
	return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
	+ "translate(" + outerRadius + ",0)";
	});
	// ticks.append("line")
	// .attr("x1", 1)
	// .attr("y1", 0)
	// .attr("x2", 5)
	// .attr("y2", 0)
	// .style("stroke", "#999");
	ticks.append("text")
	.attr("x", 8)
	.attr("dy", ".3em")
	.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
	.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
	.text(function(d) { return d.label; });
	svg.append("g")
	.attr("class", "chord")
	.selectAll("path")
	.data(chord.chords)
	.enter().append("path")
	.attr("d", d3.svg.chord().radius(innerRadius))
	.style("fill", function(d) { return fill(d.target.index); })
	.style("opacity", 1);
	// Returns an array of tick angles and labels, given a group.
	function groupTicks(d) {
	var k = (d.endAngle - d.startAngle) / d.value;
	var labels = ['Illustrator', 'Photoshop', 'Wireframing', 'Prototyping', 'OmniGraffle', 'Python', 'Javascript', 'jQuery', 'jQueryUI', 'jQueryMobile', 'HTML5', 'CSS3', 'Bootstrap', 'GIT', 'jsPlumb', 'PHP', 'Design', 'UX/UI', 'Programming'
	];
	return d3.range(0, d.value, 1000).map(function(v, i) {
	return {
	angle: k*0.5 + d.startAngle,
	label: labels[d.index]
	};
	});
	}
	// Returns an event handler for fading a given chord group.
	function fade(opacity) {
	return function(g, i) {
	svg.selectAll(".chord path")
	.filter(function(d) { return d.source.index != i && d.target.index != i; })
	.transition()
	.duration(100)
	.style("opacity", opacity);
	};
	}
	function selectElement() {
	return function(g, i) {
	var indexes = [];
	makeSelection(svg.selectAll(".chord path"), indexes);
	selectOther($("g text"), indexes);
	selectOther($(".btn path"), indexes);

	return false

	function makeSelection(selection, indexes) {
	if ($('.project-icon:hover').length == 0) { highlightElements(i); $('.project-icon').unbind('mouseenter mouseleave'); };

	indexes.push(i);
	selection
	.filter(function(d) { return d.source.index != i && d.target.index != i; })
	.transition()
	.duration(100)
	.style("opacity", 0.1);
	selection
	.filter(function(d) {
	if (d.target.index == i) {
	indexes.push(d.source.index)
	} else if (d.source.index == i && indexes.indexOf(d.target.index) == -1) {
	indexes.push(d.target.index)
	}; return d.source.index == i \|\| d.target.index == i; })
	.transition()
	.duration(100)
	.style("opacity", 1);
	}
	function selectOther(selection, indexes) {
	selection
	.each(function(d){
	if (indexes.indexOf(d) == -1) {
	$(this)
	.css({"opacity" : 0.4, "font-weight" : "normal"});
	}
	else {
	$(this)
	.css({"opacity" : 1, "font-weight" : "bold"});
	}
	})
	}
	}
	}
	</script>
	</div>
	<div id="content-bottom"></div>
	</div>
	<div id="footer"><img src="http://ninastawski.com/ns.png"></div>
	</body>
	body {
	margin: 20px auto;
	text-align: center;
	width: 894px;
	background: ghostwhite;
	}

	a {
	color: #000;
	/* text-decoration: none;*/
	}

	#footer {
	width:100%;
	height: 100%;
	clear: both;
	}

	#footer img {
	float: right;
	margin-top: 50px;
	margin-bottom: 40px;
	}

	a:hover {
	background-image: url(http://ninastawski.com/img/bg.png);
	text-decoration: none;
	}

	.current {
	font-weight: bold;
	color: #b6001b;
	}

	.name {
	display: inline;
	font-size: large;
	padding: 0 4px;
	background-image: url(http://ninastawski.com/img/bg.png);
	}

	.firstline {
	font-size: x-large;
	padding-top: 16px;
	padding-bottom: 10px;
	}

	#container {
	width: 80%;
	padding: 0;
	margin: 0;
	display: block;
	}

	#home {
	text-decoration: none;
	font-size: x-large;
	margin: 0;
	padding: 5px 20px;
	}

	#logos {
	float: right;
	padding: 10px;
	}

	p {
	padding: 8px 0;
	margin: 0;
	/width: 80%;/
	}

	/#lefty {/
	/float: left;/
	/display: inline;/
	/max-width: 600px;/
	/}/

	#header {
	width: 100%;
	height: 70px;
	padding-top: 15px;
	padding-bottom: 0;
	}

	#logo {
	float: left;
	}

	#social-icons {
	float: right;
	margin-top: 7px;
	}

	#social-icons a {
	margin: 11px 0 0 5px;
	}

	.divider {
	height: 1px;
	background: #ccc;
	}

	#main-navigation {
	float: right;
	display: inline;
	margin-top: -17px;
	padding-right: 20px;
	padding-bottom: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

	#main-navigation ul {
	overflow: hidden;
	width: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	}
	#main-navigation li {
	float: left;
	font-size: large;
	margin: 0;
	padding: 3px 10px;
	background: white;
	border: 1px solid #ccc;
	border-radius: 50px;
	margin-left: 10px;
	}

	#main-navigation li a {
	display: block;
	/color: #000;/
	text-decoration: none;
	}
	#main-navigation a {
	/background: #fff; /
	}

	/.rotate:hover {/
	/background-image: url(../img/bg.png);/
	/}/

	#main-content {
	margin-top: 20px;
	font-size: large;
	text-align: left;
	}

	#content-left {
	float: left;
	display: inline;
	max-width: 500px; /580/
	}

	#content-right {
	float: right;
	display: inline;
	margin-right: -30px;
	margin-top: 10px;
	}


	/* ~~~~~~~~~ twitter ~~~~~~~~~~ */

	#sidebar-title {
	font-size: x-large;
	font-weight: normal;
	padding: 0;
	padding-top: 5px;
	margin: 0;
	}

	#twitter_update_list li {
	list-style-type: none;
	padding-bottom: 6px;
	padding-top: 6px;

	}

	#twitter_update_list {
	padding: 0;
	font-size: small;
	}

	#twitter-link {
	padding: 0;
	margin: 0;
	}

	/* ~~~~~~~~~ aside ~~~~~~~~~~ */

	aside {
	display: inline;
	float: left;
	width: 250px;
	border: 1px solid black;
	padding: 10px 18px 10px 20px;
	margin-top: 3px;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	-ms-border-radius:12px;
	-o-border-radius:12px;
	border-radius:12px;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	}

	aside a {
	color: #000;
	text-decoration: none;
	text-align: left;
	}

	/aside a:hover {/
	/background-image: url(../img/bg.png);/
	/}/

	#logos li {
	float: right;
	padding: 0 5px;
	margin: 0;
	list-style-type: none;
	}

	#pic {
	padding-left: 2px;
	float:right;
	}

	.pics {
	height: 125px;
	padding-left: 10px;
	padding-top: 60px;
	right: auto;
	overflow: hidden;
	z-index: 1;
	max-width: 880px;
	}

	.pics img {
	width: 100px;
	padding: 0 2px;
	}

	.rotate{
	/transform/
	-webkit-transform:rotate(-8deg);
	-moz-transform:rotate(-8deg);
	-ms-transform:rotate(-8deg);
	-o-transform:rotate(-8deg);
	transform:rotate(-8deg);
	border-bottom: 3px black solid;
	border-right: 1px black solid;
	/* border-top: 1px black solid;*/
	/* border-left: 1px black solid;*/
	padding: 2px 8px;
	margin: 2px;
	border-radius: 30px;
	}

	.chord path {
	fill-opacity: .67;
	stroke: #000;
	stroke-width: .5px;
	}

	.project-icon {
	display: inline-block;
	float: left;
	width: 255px;
	height: 170px;
	margin: 15px 60px 20px 0;
	}

	.grey {
	background: grey;
	}

	.project-icon img {
	border: 1px solid #ccc;
	}


	#content-circle {
	font: 13px sans-serif;
	margin-left: -32px;
	margin-top: 40px;
	/margin-right: -23px;/
	display: inline-block;
	/width: 400px;/
	height: 378px;
	float: left;
	}

	#content-circle-right {
	font: 13px sans-serif;
	margin-right: -32px;
	margin-top: 10px;
	display: inline;
	height: 378px;
	float: right;
	z-index: 1000;
	}

	#content-bottom {
	width: 100%;
	clear: both;
	text-align: center;
	}
	/**
	* Author: Nina Stawski, me@ninastawski.com
	* Date: 5/27/13
	* Time: 8:57 PM
	*/

	function createProjectPreviews(element) {
	var projects = ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "frog", "olix"];
	for (var project in projects) {
	var el = '<div class="project-icon" id="' + projects[project] + '"><a href="http://ninastawski.com/' + projects[project] + '.html' + '"><img src="http://ninastawski.com/img/projects/ns-' + projects[project] + '.png"/></a><div>';

	if (project <=3) {
	$('#' + element).append(el);
	}
	else {
	$('#content-bottom').append(el)
	}
	}
	$('#' + element +' .project-icon:nth-child(2n)').css({'margin-right' : '0'});
	$('#content-bottom .project-icon:nth-child(3n)').css({'margin-right' : '0'});
	}

	function findProjectID(projectName) {
	var names = {
	"uxui" : 17,
	"prpr" : 18,
	"frog" : 18,
	"olix" : 17,
	"sfsu" : 16,
	"olpc" : 16,
	"tsla" : 17,
	"dots" : 16,
	"grph" : 16
	}

	return names[projectName]
	}

	function getProjectPictures(projectName) {
	var num_pictures = {"prpr" : 7, "sfsu" : 5, "dots" : 3, "olpc" : 4, "uxui" : 3, "tsla" : 4, "grph" : 5, "frog" : 1, "olix" : 2};
	var pictures = '';
	for (var counter = 1; counter < num_pictures[projectName] + 1; counter++) {
	var source = 'http://ninastawski.com/img/' + projectName + '/' + projectName + '-0' + counter + '.png';
	pictures += '<img src="' + source + '" style="border: 1px solid #ccc; margin: 30px auto;" />';
	}
	return pictures
	}

	function highlightElements(index) {
	var elementGroups = {
	0 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph"], //Illustrator
	1 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "frog", "olix"], //Photoshop
	2 : ["uxui", "prpr", "olpc", "tsla" ], //Wireframing
	3 : ["uxui", "prpr", "tsla", "olix" ], //Prototyping
	4 : ["uxui", "prpr", "tsla" ], //OmniGraffle
	5 : ["prpr"], //Python
	6 : ["prpr", "frog"], //Javascript
	7 : ["prpr"], //jQuery
	8 : ["prpr"], //jQueryUI
	9 : [], //jQueryMobile
	10 : ["prpr", "frog"], //HTML5
	11 : ["prpr", "frog"], //CSS3
	12 : ["prpr"], //Bootstrap
	13 : ["prpr"], //GIT
	14 : ["prpr"], //jsPlumb
	15 : [], //PHP
	16 : ["uxui", "prpr", "sfsu", "olpc", "tsla", "dots", "grph", "olix"], //Design
	17 : ["uxui", "prpr", "tsla", "olix"], //UX/UI
	18 : ["prpr", "frog"] //Programming
	};
	dimAll();
	for (var num in elementGroups[index]) {
	var project = elementGroups[index][num];
	$('#' + project + ' img').css({'border' : '1px solid grey'});
	$('#' + project + ' a').css({'opacity' : '1'});
	}
	}

	function dimAll() {
	$('.project-icon img').each(function() {
	$(this).css({'border' : '1px solid #ccc'});
	$(this).parent().css({'opacity' : '0.2'});
	});
	}

	function returnMatrix() {
	return [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
	[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
	[0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
	[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
	];
	}

	function returnMatrixPrpr() {
	return [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
	[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //HTML5
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //CSS3
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	[0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0, 0, 0, 0, 0.3, 0.3, 0], //Design
	[0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0, 0.3], //UX/UI
	[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
	];
	}

	function returnMatrixSfsu() {
	return [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
	[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
	[0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.3], //UX/UI
	[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
	];
	}

	function returnMatrixUxui() {
	return [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
	[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
	[0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
	[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
	];
	// return [
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	// [0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
	// [0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
	// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
	// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
	// [0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
	// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	// [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
	// [0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0.3, 0, 0, 0, 0, 0.3], //UX/UI
	// [0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0.13, 0] //Programming
	// ];
	}

	function returnMatrixTsla() {
	return [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	[0, 0, 0, 0, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0.2, 0], //Prototyping
	[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Python
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQuery
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //jQueryUI
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //HTML5
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //CSS3
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5], //Bootstrap
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //jsPlumb
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	[1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Design
	[0, 0, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //UX/UI
	[0.13, 0, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0, 0.13, 0.13, 0.13, 0.13, 0.13, 0, 0, 0, 0] //Programming
	];
	}

	function returnMatrixFrog() {
	return [
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Illustrator
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0], //Photoshop
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], //Wireframing
	[0, 0, 0, 0.2, 0.2, 0, 0, 0.2, 0.2, 0.2, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Prototyping
	[0, 0, 0, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0], //OmniGraffle
	[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //Python
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //Javascript
	[0, 0, 0, 0.5, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQuery
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryUI
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0], //jQueryMobile
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //HTML5
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0.5], //CSS3
	[0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0, 0], //Bootstrap
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], //GIT
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0, 0, 0, 0], //jsPlumb
	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0], //PHP
	[0.3, 0.3, 0, 0, 0, 0, 0, 0, 0, 0, 0.3, 0.3, 0, 0, 0, 0, 0.3, 0.3, 0], //Design
	[0, 0, 0.4, 0.4, 0.4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.4, 0, 0], //UX/UI
	[0, 0.15, 0, 0, 0, 0, 0.15, 0, 0, 0, 0.15, 0.15, 0, 0.15, 0, 0, 0, 0, 0] //Programming
	];
	}