index.html

---
layout: page
tagline:
---
{% include JB/setup %}

<link href="/assets/css/socialicons.css" rel="stylesheet" type="text/css" media="all">
<link href="/assets/css/main.css" rel="stylesheet" type="text/css" media="all">
<script>
(function() {
  var requestAnimationFrame = window.requestAnimationFrame       ||
                              window.webkitRequestAnimationFrame ||
                              window.mozRequestAnimationFrame    ||
                              function(func) { setTimeout(func, 17); };

  var html = document.documentElement;

  function Snowflake(maxX) {
    this.reset(maxX);
  }
  Snowflake.prototype.tick = function() {
    var sidePhase = this.sidePhase += this.sideVel;
    this.y += this.vel;
    this.x += this.sideVel;
  };
  Snowflake.prototype.reset = function(maxX) {
    var rand = Math.random();
    var chanceOfLargeSnowflake = 0.15;

    this.size = 2 + Math.random() * 5;
    this.vel = 3 + Math.random() * 3;
    this.alpha = 0.5 + Math.random() * 0.8;

    // random x position
    this.x = Math.random() * maxX;
    this.y = -this.size;

    // side-to-side movement
    this.sideVel = (0.5 - Math.random()) * this.vel;


    return this;
  };

  (function() {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var settleCanvas = document.createElement('canvas');
    var settleContext = context && settleCanvas.getContext('2d');
    var canvasStyle = canvas.style;
    var settleCanvasStyle = settleCanvas.style;
    var windowResized;
    var activeFlakes = [];
    var snowflakesPerPixelPerSecond = 0.05;
    var PIx2 = Math.PI*2;
    var assumedFps = 60;
    var settlePoint;
    var snowflakePool = [];

    function resizeCanvas() {
      settlePoint = Array(html.clientWidth);
      settleCanvas.width = canvas.width = html.clientWidth;
      settleCanvas.height = canvas.height = html.clientHeight;
    }

    function updateSettlePoints(flake) {
      var size = flake.size * 0.8; // reduce coral effect
      var xStart = Math.floor(flake.x - size);
      var range = size * 2;
      var newY;

      if (xStart < 0) {
        range += xStart;
        xStart = 0;
      }
      if (xStart + range > settlePoint.length) {
        range -= xStart + range - settlePoint.length;
      }

      for (var i = 0; i < range; i++) {
        newY = flake.y - (size * Math.cos( (i/range) * Math.PI - (Math.PI/2) ));
        settlePoint[i + xStart] = Math.min(settlePoint[i + xStart] || Infinity, newY);
      }
    }

    var flakesToCreate = 0;
    function frame() {
      flakesToCreate += (snowflakesPerPixelPerSecond / assumedFps) * canvas.width;
      var flakesThisFrame = Math.floor(flakesToCreate);
      flakesToCreate -= flakesThisFrame;

      // clear canvas
      if (windowResized) {
        resizeCanvas();
        windowResized = false;
      }
      else {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

      // add new flake?
      while ( flakesThisFrame-- ) {
        if (snowflakePool.length) {
          activeFlakes.push( snowflakePool.pop().reset(canvas.width) );
        }
        else {
          activeFlakes.push( new Snowflake(canvas.width) );
        }
      }

      var i = activeFlakes.length;
      var flake;

      // for each flake...
      while (i--) {
        flake = activeFlakes[i];
        flake.tick();

        // splice flake if it's now out of rendering zone
        if (flake.y >= canvas.height || flake.y >= settlePoint[Math.floor(flake.x)]) {
          snowflakePool.push.apply(snowflakePool, activeFlakes.splice(i, 1));
          // this flake effects our settle points
          if (flake.alpha > 0.8) {
            updateSettlePoints(flake);
          }
          settleContext.fillStyle='rgba(255, 255, 255, ' + flake.alpha + ')';
          settleContext.beginPath();
          settleContext.arc(flake.x, flake.y, flake.size, 0, PIx2, true);
          settleContext.closePath();
          settleContext.fill();
          continue;
        }

        // render to canvas
        context.fillStyle='rgba(255, 255, 255, ' + flake.alpha + ')';
        context.beginPath();
        context.arc(flake.x, flake.y, flake.size, 0, PIx2, true);
        context.closePath();
        context.fill();
      }
      requestAnimationFrame(frame);
    }

    if (context) {
      resizeCanvas();

      // style the canvas
      canvasStyle.position = 'fixed';
      canvasStyle.top = 0;
      canvasStyle.left = 0;
      canvasStyle.zIndex = 1138;
      canvasStyle['pointerEvents'] = 'none';

      settleCanvasStyle.cssText = canvasStyle.cssText;

      // watch out for resizes
      window.addEventListener('resize', function() {
        windowResized = true;
      }, false);

      // add it to the page & start animating
      document.body.appendChild(canvas);
      document.body.appendChild(settleCanvas);
      requestAnimationFrame(frame);
    }
  })();

})();
</script>
<div class="hero-unit">
  <h1 class="name" style="color:#333333;">Feythin Lau<a href="http://weibo.com/u/2058045730?s=6uyXnP" class="weibo" target="_blank"><img border="0" src="http://service.t.sina.com.cn/widget/qmd/2058045730/4d7daebc/1.png"/></a></h1>
  <p>
   Be what you want to be
  </p>
  <!-- <a class="btn btn-primary" href="bootstrap/docs/" target="_blank">访问Bootstrap中文文档</a> -->
  <ul class="socialicons bw" style="float: right;">
    <!--<li><a href="http://www.linkedin.com/in/" target="_blank" class="linkedin"></a></li> -->
    <li><a href="https://github.com/feythin" target="_blank" class="github"></a></li>
	<li><a href="http://stackoverflow.com/users/4182168/feythin-lau" target="_blank" class="stackoverflow"></a></li>
	<li><a href="https://www.quora.com/Feiyu-Liu" target="_blank" class="quora"></a></li>
	<li><a href="https://plus.google.com/112950117556236715332/" target="_blank" class="googleb"></a></li>
	<li><a href="http://www.flickr.com/feiyuliu" target="_blank" class="flickr"></a></li>
    	<li><a href="https://twitter.com/Feythin" target="_blank" class="twitter"></a></li>
    	<li><a href="http://www.facebook.com/feythin.lau" class="facebook"></a></li>
	<li><a href="http://www.linkedin.com/pub/feythin-lau/42/379/291" class="linkedin"></a></li>

  </ul>
</div>


<h2 style="padding-top: 0.5em; margin-bottom: 0.5em;color:#333333;">
  最新文章
  <ul class="socialicons bw" style="float:right;">
    <li><a href="/atom.xml" class="rss"></a></li>
  </ul>
  <a href="/pages.html" class="view-more">查看所有文章</a>
</h2>
<ul class="posts">
  {% for post in site.posts limit:5%}
  <li>
      <a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a>
      <time datetime="{{ post.date }}">{{ post.date | date: "%Y年%m月%d日" }}</time>
  </li>
  {% endfor %}
</ul>