SCSS
@import 'https://fonts.googleapis.com/css?family=Roboto';
$font-family: 'Roboto', sans-serif;
*,
*:before,
*:after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
height: 100%;
width: 100%;
font-size: 16px;
font-family: $font-family;
}
a{
color: inherit;
text-decoration: none;
}
.card{
background: #2d2d2d;
position: relative;
height: 300px;
width: 600px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .5);
}
.card-header{
background: transparent;
padding: 0 20px;
width: 100%;
height: 80px;
line-height: 80px;
h3{
color: #fff;
font-size: 1.4rem;
text-shadow: 1px 1px 0px rgba(0, 0, 0, .65);
}
}
.card-content{
position: relative;
height: 160px;
width: 100%;
}
.projects{
background: transparent;
width: 100%;
height: 100%;
}
.project{
position: relative;
display: block;
float: left;
height: 112px;
width: 30%;
margin-left: 1.6666%;
margin-right: 1.6666%;
overflow: hidden;
img{
width: 100%;
}
&:hover .project-details{
top: 85%;
opacity: 1;
}
.project-details{
background: rgba(0,0,0,.8);
padding: 10px;
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: top .5s ease, opacity .3s ease;
-moz-transition: top .5s ease, opacity .3s ease;
transition: top .5s ease, opacity .3s ease;
& p{
color: #fff;
}
}
}
.card-footer{
color: #fff;
background: rgba(0,0,0,.65);
position: absolute;
height: 60px;
width: 100%;
bottom: 0;
border-top: 2px solid rgba(0,0,0,.5);
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
.profile{
width: 60%;
float: left;
.profile-group{
margin-left: 135px;
}
.name{
font-size: 1.8rem;
text-shadow: 1px 1px 0px rgba(0,0,0,.5);
text-transform: capitalize;
}
.job{
color: #a5a5a5;
position: relative;
margin-top: -5px;
margin-left: 10px;
font-size: 1rem;
}
}
.skills{
width: 40%;
float: right;
padding: 10px;
.skills-group{
float: right;
}
.skill{
width: 40px;
height: 40px;
float: left;
margin-right: 2px;
img{
width: 100%;
}
}
}
.card-img{
background: #f9f9f9;
border: 2px solid #111;
position: absolute;
bottom: -25px;
left: 25px;
width: 100px;
height: 100px;
margin-right: 10px;
float: left;
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7);
-o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, .7);
overflow: hidden;
img{
width: 100%;
}
}
.canvas-container{
position: absolute;
top: 0;
width: 600px;
height: 300px;
border-radius: 10px;
overflow: hidden;
z-index: -1;
}
#circles{
position:absolute;
top: 0;
left: 0;
height: 300px;
width: 600px;
z-index: -1;
}
JAVASCRIPT
//Create canvas and initialize context
var canvas = document.getElementById("circles");
var ctx = canvas.getContext("2d");
//Set the dimensions of canvas equal to the dimensions of the card
var W = canvas.width = 600;
var H = canvas.height = 300;
//Number of circles
var circleNbr = 10;
// Gradient - http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg;
var bgColor1 = 'rgba(153, 83, 85, 1)';
var bgColor2 = 'rgba(52, 9, 80, 1)';
//Create an array of circles
var circles = [];
for(var i = 0; i < circleNbr; i++ ){
circles.push(new circle());
}
//Function to create a circle
function circle() {
//Random Position
this.x = Math.random()*W;
this.y = Math.random()*H;
//Random Velocities
this.vx = 0.2 + Math.random()*0.5;
this.vy = -this.vx;
//Random Radius
this.r = 3 + Math.random()*10;
//Random opacity color
this.color = "rgba(200, 116, 82,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")";
}
//Function to draw the gradient background with the circles
function draw() {
var grd = ctx.createLinearGradient(0, 0, W, H);
grd.addColorStop(0, bgColor1);
grd.addColorStop(1, bgColor2);
//Fill the canvas with the gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, W, H);
//Fill the canvas with the circles
for(var j = 0; j < circles.length; j++) {
var c = circles[j];
//Draw the circle
ctx.beginPath();
ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
ctx.fillStyle = c.color;
ctx.fill();
//Velocity
c.x -= c.vx;
c.y += c.vy;
//When the circles are out of the canvas
if(c.x < -20) c.x = W+20;
if(c.y < -20) c.y = H+20;
}
}
setInterval(draw, 30);
