My Portfolio 1

index.slim

link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"
canvas#canvas
.table
  .table-cell
    .container
      | <svg class="background-svg" width="400px" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset><feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur><feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite><feColorMatrix values="0 0 0 0 0.647959184   0 0 0 0 0.549016553   0 0 0 0 0.549016553  0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode><feMergeNode in="shadowMatrixInner1"></feMergeNode></feMerge></filter></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard-1" fill="#8B65E4"><path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path><path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path><path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path></g></g></svg>
      .container-info
        h1
          ' Hey!
          br
          ' I'm
          span Anna Batura
          ',
          span.info front-end web developer
        .box
          a.box-item href="https://www.linkedin.com/in/annabatura" target="_blank"
            i.fa.fa-linkedin
          a.box-item href="http://codepen.io/Anna_Batura/" target="_blank"
            i.fa.fa-codepen
          a.box-item href="https://twitter.com/BrawadaCom" target="_blank"
            i.fa.fa-twitter

Portfolio 1

Portfolio 1

script.js

class Particle {
	constructor(context, x, y, d = 2, color = '#9294AE', movement = 10, lerp = 0.05) {
		this.context = context;

		this.x = this.currentX = this.targetX = x;
		this.y = this.currentY = this.targetY = y;
		this.d = d;
		this.lerp = lerp;
		this.color = color;
		this.movement = movement;
	}

	draw() {
		var context = this.context,
			r = this.d / 2;
		context.fillStyle = this.color;
		context.beginPath();

		var x = this.x - r,
			y = this.y - r;
		
		if (Math.abs(this.targetX - this.currentX) < this.movement * 0.1) {
			this.targetX = x + Math.random() * this.movement * (Math.random() < 0.5 ? -1 : 1);
		}
		if (Math.abs(this.targetY - this.currentY) < this.movement * 0.1) {
			this.targetY = y + Math.random() * this.movement * (Math.random() < 0.5 ? -1 : 1);
		}
		
		this.currentX += (this.targetX - this.currentX) * this.lerp;
		this.currentY += (this.targetY - this.currentY) * this.lerp;
		
		context.arc(this.currentX, this.currentY, r, 0, Math.PI * 2, false);

		context.closePath();
		context.fill();
	}
	
	setTarget(x, y) {
		
	}
}

class Canvas {
	constructor(element, particleSpacing = 50) {
		this.canvas = element;
		this.context = element.getContext('2d');

		this.particleSpacing = particleSpacing;
		
		window.addEventListener('resize', () => this.init());
		this.init();
	}

	init () {
		this.stop();
		this.clear();
		
		this.resize();

		this.createParticles();
		this.animate();
	}
	
	resize() {
		this.canvas.width = window.innerWidth;
		this.canvas.height = window.innerHeight;
	}

	clear() {
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	}

	createParticles() {
		var cols = Math.floor(this.canvas.width / this.particleSpacing),
			rows = Math.floor(this.canvas.height / this.particleSpacing),
			colGutter = (this.particleSpacing + (this.canvas.width - cols * this.particleSpacing)) / 2,
			rowGutter = (this.particleSpacing + (this.canvas.height - rows * this.particleSpacing)) / 2;

		this.particles = [];
		for (let col = 0; col < cols; col++) {
			for (let row = 0; row < rows; row++) {
				let x = col * this.particleSpacing + colGutter, 
						y = row * this.particleSpacing + rowGutter, 
						particle = new Particle(this.context, x, y);
				this.particles.push(particle);
			}
		}
	}

	draw() {
		this.clear();
		if (this.particles) {
			for (let i = 0; i < this.particles.length; i++) {
				this.particles[i].draw();
			}
		}
	}

	animate() {
		this.draw();
		this.animationFrame = window.requestAnimationFrame(() => this.animate());
	}

	stop() {
		window.cancelAnimationFrame(this.animationFrame);
	}
}
var cnvs = new Canvas(document.getElementById('canvas'));

$('body').mousemove(function(e) {
    var x = (e.pageX * -1 / 10);
    $("#canvas").animate({
      left: x + 'px'
    }, 10);
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.sass

@import "compass/css3"
@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto)
=keyframes($animation-name)
  @-webkit-keyframes #{$animation-name}
    @content
  @-moz-keyframes #{$animation-name}
    @content
  @keyframes #{$animation-name}
    @content

body
  background-color: #D4D9ED
  height: 100vh
  overflow: hidden
  text-align: center
  font-family: 'Roboto', sans-serif
#canvas, .background-svg, .container-info
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 1
  @include transition(all 0.3s)
.container-info
  z-index: 2
h1
  font-weight: 300
  font-size: 24px
  letter-spacing: 2px
  color: #fff
  text-align: left
  margin: 75px 37px 47px
  .info
    display: block
    color: #9294AE
    font-size: 16px
    letter-spacing: 0px
.box
  text-align: right
  padding: 0px 40px
.box-item
  display: inline-block
  color: #fff
  font-size: 30px
  padding-right: 20px
  @include transition(all 0.3s)
.table
  display: table
  width: 100%
  height: 100%
.table-cell
  display: table-cell
  vertical-align: middle
.container
  position: relative
  width: 400px
  height: 300px
  max-width: 100%
  margin: 0 auto
  &:before, &:after
    content: ""
    position: absolute
    top: 0
    left: 0
    display: block
    width: 600px
    height: 100px
    &:before
    &:after
#Triangle-1
  -webkit-animation: box 42.5s infinite
  animation: box 42.5s infinite
#Triangle-2
  -webkit-animation: box2 12.5s infinite
  animation: box2 12.5s infinite
  
@keyframes box2
  10%
    @include rotate(1deg)
  80%
    @include rotate(-2deg)
  
@keyframes box
  10%
    @include rotate(-2deg)
  80%
    @include rotate(2deg)
.box-item
  &:hover
    opacity: 0.6