<div class="card blurred-box">
	<header class="profile-header">
		<img class="profile-picture" src="https://placehold.it/128"/>
	</header>
	<section class="profile-details">
		<h2 class="user-name">{{User-Name}}</h2>
		<h3 class="occupation">Web Developer</h3>
		<div class="social-tabs">
			<a href="javascript:void(0);" class="facebook-tab">Facebook</a>
			<a href="javascript:void(0);" class="linkedin-tab">LinkedIn</a>
			<a href="javascript:void(0);" class="dribble-tab">Dribble</a>
		</div>
	</section>
	<ul class="skill-cloud">
		<li>CSS</li>
		<li>HTML</li>
		<li>Ruby on Rails</li>
		<li>PHP</li>
		<li>ASP.NET</li>
		<li>SQL</li>
		<li>MongoDB</li>
		<li>Node.Js</li>
		<li>Angular</li>
	</ul>
	<div class="buttons">
		<button class="cv-btn">cirriculum vitae</button>
		<button class="contact-btn">get in touch</button>
	</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body{
	display: flex;
	min-height: 100VH;
	min-width: 100VH;
	justify-content: center;
	align-items: center;
	font-family: "Roboto", Sans-Serif;
	background: url('https://images.unsplash.com/photo-1547997527-451dd87c98ec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ') no-repeat center center;
	background-size: cover;
}

.card{
	min-width: 500px;
	background: inherit;
	position: relative;
	border-radius: 8px 8px 0 0;
	overflow:hidden;
	box-shadow: -1px -1px 0 rgba(255,255,255,0.1) , 5px 5px 5px darken( rgba(45,60,65,0.5) , 10%);
	
	&.blurred-box:after{
	 content: '';
	 min-width: 600px;
	 min-height: 300px;
	 background: inherit; 
	 position: absolute;
	 top: 0;
	 bottom:0;
	 left: -50px;
	 right: 0;
	 box-shadow: inset 0 0 0 300px rgba(255,255,255,0.08);
	 filter: blur(8px);
	}
	
	.profile-header{
		position:relative;
		z-index:1;
		height: 150px;
		background: url('https://images.unsplash.com/photo-1547997527-451dd87c98ec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ') no-repeat center 20%;
		background-size: cover;
		display: flex;
		justify-content: center;
		
		.profile-picture{
			padding: 5px;
			background: #FFF;
			border-radius: 100% 100%;
			height: 128px;
			width: 128px;
			transform: translateY(50%);
		}
	}
	
	.profile-details{
		position: relative;
		z-index: 1;
		padding-top: 4.5rem;
		
		.user-name,
		.occupation{
			color: #EFEFEF;
			font-weight: bold;
			font-size: 32px;
			text-align: center;
			text-transform: capitalize;
		}
		
		.occupation{
			font-size: 14px;
			font-weight: normal;
			color: #DDD;
			padding-top: .8em;
		}
		
		.social-tabs{
			padding-top: 1rem;
			display: flex;
			
			a{
				line-height: 4;
				background: #CCC;
				text-align: center;
				flex: 1 1 0%;
				color: #FFF;
				text-decoration: none;
				font-weight: bold;
				text-transform: uppercase;
				font-size: 14px;
				text-shadow: 1px 1px 1px rgba(25, 25, 25, 0.5);
				letter-spacing: 1px;
				
				&.facebook-tab{
					background: #3b5998;
				}
				&.linkedin-tab{
					background: #0077b5;
				}
				&.dribble-tab{
					background: #ea4c89;
				}
			}
		}
		//end social tabs
	}
	.skill-cloud{
			margin:0 auto;
			padding: 2em;
			display: block;
			position: relative;
			z-index: 1;
			max-width: 400px;
			
			li{
				display: inline-block;
				color: #FFF;
				box-shadow: 0 0 0 1px #EFEFEF;
				padding: 5px 10px;
				margin: 7px 3px;
				opacity: 0.7;
				border-radius: 100px;
				font-size: 12px;
				transition: ease-in-out opacity 200ms;
				cursor: pointer;
				
				&:hover{
					opacity: 1;
				}
			}
		}
	.buttons{
		display: flex;
		position: relative;
		z-index: 1;
		
		button{
			align-self: stretch;
			width: 50%;
			border:none;
			line-height: 4;
			color: #EFEFEF;
			font-size: 16px; 
			font-variant: small-caps;
			font-weight: bold;
			letter-spacing: 1px;
			
			&.cv-btn{
				background: linear-gradient(135deg, #4e0085 0%, #8b3098 100%);
			}
			
			&.contact-btn{
				background: linear-gradient(135deg, #e90e79 0%, #eb5078 100%);
			}
		}
	}
}
View Compiled
$.ajax({
  url: 'https://randomuser.me/api/',
  dataType: 'json',
  success: function(data) {
		var $user = data.results[0];
		$(".user-name").html($user.name.first + ' ' + $user.name.last);
		$(".profile-picture").attr('src' , $user.picture.large);  
	}
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js