<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Anna_Batura/pen/PzYWGe?depth=everything&limit=all&order=popularity&page=8&q=portfolio&show_forks=false" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
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;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
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;
}
h1 .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;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
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;
}
.container:before, .container:after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 600px;
height: 100px;
}
#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% {
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
}
80% {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
}
@keyframes box {
10% {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
80% {
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
}
.box-item:hover {
opacity: 0.6;
}
</style></head><body>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<canvas id="canvas"></canvas>
<div class="table">
<div class="table-cell">
<div class="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>
<div class="container-info">
<h1>
Hey! <br />I'm <span>Anna Batura</span>, <span class="info">front-end web developer</span>
</h1>
<div class="box">
<a class="box-item" href="https://www.linkedin.com/in/annabatura" target="_blank"><i class="fa fa-linkedin"></i></a><a class="box-item" href="https://codepen.io/Anna_Batura/" target="_blank"><i class="fa fa-codepen"></i></a><a class="box-item" href="https://twitter.com/BrawadaCom" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >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);
});
//# sourceURL=pen.js
</script>
</body></html>
