Personal Website

index.html

<link href='https://fonts.googleapis.com/css?family=Raleway:500,400,300,200,100' rel='stylesheet' type='text/css'>
<canvas class="container" id="container" role="main"></canvas>
  <div class="content">
    <h1 class="title">Jonas Badalic</h1>
    <p class="desc">ambitious frontend developer.</p>
     <ul class="contact">
      <li><a href="mailto:jonas@badalic.com">jonas@badalic.com</a></li>
        <li>
          <a target="_top"href="https://codepen.io/JonasB/">Codepen</a></li>
        <li>
          <a target="_top" href="https://twitter.com/JonasBadalic">Twitter</a></li>
        <li><a target="_top" href="https://si.linkedin.com/in/jonasbadalic">LinkedIn</a></li>
      </ul>
  </div>
</div>
<div class="blur blurTop"><canvas class="canvas"id="blurCanvasTop"></canvas></div>
<div class="blur blurBottom"><canvas width="1000px" height="1000px" class="canvas" id="blurCanvasBottom"></canvas></div>

personal-website.markdown

Personal Website

I got the evening off and I decided to rebuild my personal page. Will probably be adding some things to it, but I will try to keep it as clean as possible.

A Pen by Jonas Badalic on CodePen.

License.

script.js

var canvas = document.getElementById('container');
var clone = document.getElementById('blurCanvasBottom');

var cloneCtx = clone.getContext('2d');
var ctx = canvas.getContext('2d');


var w = $('#blurCanvasTop').width();
var h = $('#blurCanvasTop').height();

var ww = $(window).width();
var wh = $(window).height();
canvas.width = ww;
canvas.height= wh;
var partCount = 100;
var particles = [];

function particle(){
  this.color = 'rgba(255,255,255,'+ Math.random()+')';
  console.log(this.color);
  this.x = randomInt(0,ww);
  this.y = randomInt(0,wh);
  this.direction = {
    "x": -1 + Math.random() * 2,
    "y": -1 + Math.random() * 2
  };
  this.vx = 0.3 * Math.random();
  this.vy = 0.3 * Math.random();
  this.radius = randomInt(2,3);
  this.float = function(){
    this.x += this.vx * this.direction.x;
    this.y += this.vy * this.direction.y;
  };
  this.changeDirection = function (axis) {
    this.direction[axis] *= -1;
  };
  this.boundaryCheck = function () {
            if (this.x >= ww) {
                this.x = ww;
                this.changeDirection("x");
            } else if (this.x <= 0) {
                this.x = 0;
                this.changeDirection("x");
            }
            if (this.y >= wh) {
                this.y = wh;
                this.changeDirection("y");
            } else if (this.y <= 0) {
                this.y = 0;
                this.changeDirection("y");
            }
        };
  this.draw = function () {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
  };
}
function clearCanvas() {
 cloneCtx.clearRect(0, 0, ww, wh);
 ctx.clearRect(0, 0, ww, wh);
}
function createParticles(){
  for (i=0;i<partCount;i++){
    var p = new particle();
    particles.push(p);
  }
}
function drawParticles() {
   for (i=0;i<particles.length;i++) {
     p = particles[i];
     p.draw();
   }
}
function updateParticles() {
        for (var i = particles.length - 1; i >= 0; i--) {
            p = particles[i];
            p.float();
            p.boundaryCheck();
        }
}
createParticles();
drawParticles();
function animateParticles() {
        clearCanvas();
        drawParticles();
        updateParticles();
        cloneCtx.drawImage(canvas, 0, 0);
        requestAnimationFrame(animateParticles);
    }
requestAnimationFrame(animateParticles);
cloneCtx.drawImage(canvas, 0, 0);

$(window).on('resize',function(){
  ww = $(window).width();
  wh = $(window).height();
  canvas.width = ww;
  canvas.height= wh;
  clearCanvas();
  particles = [];
  createParticles();
  drawParticles();
});
function randomInt(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
function velocityInt(min,max)
{
    return Math.random()*(max-min+1)+min;
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

style.css

html,body {
  font-family: Raleway;
  overflow:hidden;
  width:100%;
  height:100%;
  position:absolute;
  background: linear-gradient(25deg,#16054A,#C8A6B4);
  text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
}
.container  {
  width:100%;
  height:100%;
  position:absolute;
}
#blurCanvasTop{
  left:0%;
  top:0%;
  position:absolute;
}
#blurCanvasBottom{
  left:50%;
  top:0;
  position:absolute;
}
.content {
  left:15%;
  top:20%;
  width:70%;
  position:relative;
}
h1.title {
  color:white;
  font-size: 4vw;
  display:inline;
  font-weight:500;
}
p.desc{
  position:relative;
  width:100%;
  font-size:4vw;
  color:rgba(255,255,255,1);
  font-weight: 200;
  margin-bottom:40px;
}
.contacts {
  position:absolute;
  right:0%;
  bottom:0;
  margin-bottom:1vw;
  margin-right:1vw;
}
.contact li {
  list-style-type:none;
  float:left;
  color: rgba(255,255,255,0.8);
  font-weight:100;
  font-size:17px;
}
.contact li a {
  text-decoration:none;
  color: rgba(255,255,255,0.8);
}
.contact li a:hover{
  color:rgba(255,255,255,1);
}
.contact li~li {
  margin-left:1vw; 
}
.blur {
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.blurTop{
  left:40%;
  top:-110%;
  transform:rotate(20deg);
  transform-origin: 0 100%;
}
.blurBottom{
  left:-60%;
  top:100%;
  transform:rotate(20deg);
  transform-origin: 100% 0%;
}