index.html

---
layout: default
---


<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<header class="masthead">
  <h1 class="masthead-title">
    <a href="{{ site.baseurl }}/">{{ site.name }}<span>&#39;s website</span></a>
  </h1>
  <nav class="masthead-nav">
    {% for nav in site.nav %}
    <a href="{{ nav.href }}">{{ nav.name }}</a>
    {% endfor %}
  </nav>
</header>

<style>
#CVplot {margin-left:auto; margin-right:auto; display:block;}
</style>


<img src="{{ site.url }}/assets/image/preview.svg" alt="equation" width="800">
<div id="CVplot"></div>

<p>
I combine <strong>civil</strong> and <strong>electrical</strong> engineering with <strong>computer sciences</strong> to solve problems. 
I currently work as a research assistant at the <strong>Lawrence Berkeley National Laboratory</strong>.
I have recently finished my <strong>Master thesis</strong> at the <strong>Technical University of Compiegne</strong> (UTC) and will soon be looking for a PhD. I am eager to learn and happy to work on cutting edge projects.
</p>

<p>Powered by Jekyll and Github Page.</p>

<script type="text/javascript">
var width = 960,
    height = 500;

var skill = [ 
    {'name': 'invisible'},
    {'name': 'Python'},
    {'name': 'MATLAB'},
    {'name': 'D3.js'},
    {'name': 'Latex'},
    {'name': 'Photoshop'},
    {'name': 'SQL'},
    {'name': 'PowerFactory'},
    {'name': 'Office'},
    {'name': 'AutoCAD'},
    {'name': 'Django'},
    {'name': 'Linux'},
];

var nodes = d3.range(skill.length).map(function(i) { 
        return {radius: Math.random() * 70 + 4, name: skill[i]['name']}; 
    }),
    root = nodes[0],
    color = d3.scale.category10();

root.radius = 0;
root.fixed = true;

var force = d3.layout.force()
    .gravity(0.05)
    .charge(function(d, i) { return i ? 0 : -1000; })
    .nodes(nodes);
    // .size([width, height]);

var svg = d3.select("#CVplot").append("svg")
    .attr("width", width)
    .attr("height", height);

resize();
d3.select(window).on("resize", resize);
force.start();

groupe = svg.selectAll("circle")
    .data(nodes.slice(1))
  .enter().append("g").attr("class", "node");

groupe.append("circle")
    .attr("r", function(d) { return d.radius; })
    .style("fill", function(d, i) { return color(i % 3); });

groupe.append("text")
    .attr({x: 0, y: 0})
    .text(function(d) {return d.name})

force.on("tick", function(e) {
  var q = d3.geom.quadtree(nodes),
      i = 0,
      n = nodes.length;

  while (++i < n) q.visit(collide(nodes[i]));

  svg.selectAll("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  svg.selectAll("text")
    .attr("x", function (d) {return d.x-25;})
    .attr("y", function (d) {return d.y+5;});
});

svg.on("mousemove", function() {
  var p1 = d3.mouse(this);
  root.px = p1[0];
  root.py = p1[1];
  force.resume();
});

function collide(node) {
  var r = node.radius + 16,
      nx1 = node.x - r,
      nx2 = node.x + r,
      ny1 = node.y - r,
      ny2 = node.y + r;
  return function(quad, x1, y1, x2, y2) {
    if (quad.point && (quad.point !== node)) {
      var x = node.x - quad.point.x,
          y = node.y - quad.point.y,
          l = Math.sqrt(x * x + y * y),
          r = node.radius + quad.point.radius;
      if (l < r) {
        l = (l - r) / l * .5;
        node.x -= x *= l;
        node.y -= y *= l;
        quad.point.x += x;
        quad.point.y += y;
      }
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  };
}

function resize() {
    width = window.innerWidth/2, height = window.innerHeight;
    height = 450;
    svg.attr("width", width).attr("height", height);
    force.size([width, height]).resume();
}

</script>