<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-lg-12 col-sm-12">
<div class="card hovercard">
<div class="card-background">
<img class="card-bkimg" alt="" src="http://lorempixel.com/100/100/people/9/">
<!-- http://lorempixel.com/850/280/people/9/ -->
</div>
<div class="useravatar">
<img alt="" src="http://placehold.it/250x250">
</div>
<div class="card-info"> <span class="card-title">Bashar Ayyash</span>
</div>
</div>
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="profile" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="fa fa-smile-o" aria-hidden="true"></span>
<div class="hidden-xs">About Me</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="skills" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="fa fa-cogs" aria-hidden="true"></span>
<div class="hidden-xs">Skills</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="social" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="fa fa-phone" aria-hidden="true"></span>
<div class="hidden-xs">Contact</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3 class="text-center">Front-End Expert Rewriting the Web</h3>
<p>
I'm a vibrant Front-End developer with more than 10 years of Web development since my young ages, along with 10 years of commercial experience where I worked with International companies
and United Nations Organizations providing responsive Web design, Front-End development and Cloud servers management.
</p>
<p>
I work with web agencies and departments of organizations dealing with web presence.
</p>
<h5>I can provide the following work:</h5>
<ul id="check-list-box" class="list-group checked-list-box">
<li class="list-group-item">Responsive Web Design
<ul>
<li>Wireframes</li>
<li>Mockups</li>
<li>Adobe Photoshop, Illustrator</li>
</ul>
</li>
<li class="list-group-item" data-color="success">Front-end Development (HTML5, CSS3, Javascript)</li>
<li class="list-group-item" data-color="info">Full-Stack Development MEAN (MongoDB, ExpressJS, AngularJS, NodeJS)</li>
<li class="list-group-item" data-color="warning">CMS (Joomla, WordPress)</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="testimonials">
<div class="active item">
<blockquote><p>I create applications that are accessible by a wide range of devices starting from Smartphones to Internet TVs via responsive design</p></blockquote>
</div>
</div>
</div>
</div>
</div>
<div>
<p>I deliver apps after I make sure they are fully optimized for best performance and search engines presence, built using the latest technologies for better compatability as well as documented and scalable.</p></div>
<div class="ng-exp">
<img src="https://raw.githubusercontent.com/yabasha/angularify/master/docs/images/angular.png" alt="Bashar Ayyash AngularJS Professional"/>
<p>I have strong experience in angularjs framework, providing rich apps, using this framework I manage to connect them with different server platforms (nodejs, apache, microsoft)
and store apps info in SQL/non-SQL database.</p>
</div>
<div class="general-exp">
<p>My daily workflow includes the use of
<a href="http://gulpjs.com/" target="_blank"><img src="https://raw.githubusercontent.com/yabasha/angularify/master/docs/images/gulp.png" alt="Bashar Ayyash gulp expert" /></a>
<a href="http://browserify.org/" target="_blank"><img src="https://raw.githubusercontent.com/yabasha/angularify/master/docs/images/browserify.png" alt="Bashar Ayyash browserify professional" /></a>
<a href="https://nodejs.org/en/docs/es6/" target="_blank"><img src="https://raw.githubusercontent.com/yabasha/angularify/master/docs/images/es6.png" alt="Bashar Ayyash ECMAScript6 experienced" /></a>
<a href="http://sass-lang.com/" target="_blank"><img src="https://raw.githubusercontent.com/yabasha/angularify/master/docs/images/sass.png" alt="Bashar Ayyash SASS professional" /></a>
</p>
</div>
<div class="contact">
<p>
I enjoy writing and sharing my knowledge with others, in the form of blog tutorials/articles on my medium.com <a href="https://medium.com/@yabasha" target="_blank">profile</a> and open-source
projects at <a href="https://github.com/yabasha" target="_blank">my repository</a> on github.com
</p>
<p>
If you’d like to find out more about how I work and my process of working with clients, please don't hesitate too <a href="mailto:bashar@ayyash.info?subject=Query">contact me</a>
and give me a little information about the project you have in mind and I’ll send a Getting Started guide.
</p>
</div>
</div><!-- end tab1 -->
<div class="tab-pane fade in" id="tab2">
<h3>Skills and Achievements</h3>
<ul>
<li>Main Technologies: JavaScript, HTML5, CSS3, AngularJS, browserify, NodeJS, gulp, git</li>
<li>Open Source Contributions: AngularJS, Angularify and various JS libraries</li>
<li>Community: Meet-up speaker, conference speaker, workshop giver, Frontend</li>
<li>Volunteer: Mosque participations, UNV crisis maps, contribute schools projects</li>
<li>Hobbies:Faith, family, friends, writing</li>
</ul>
</div>
<div class="tab-pane fade in" id="tab3">
<div class="col-md-12 text-center icons">
<ul class="social-network social-circle">
<li><a href="mailto:bashar@ayyash.info?subject=Query" class="icoRss" title="email"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://www.facebook.com/bayyash" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/bayyash" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://plus.google.com/+BasharAyyash/posts" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="https://www.linkedin.com/profile/preview?locale=en_US&trk=prof-0-sb-preview-primary-button" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
height: 288px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .useravatar {
position: absolute;
top: 15px;
left: 0;
right: 0;
}
.card.hovercard .useravatar img {
width: 250px;
height: 250px;
max-width: 250px;
max-height: 250px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 20px;
line-height: 1;
color: #262626;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .card-info {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
/* Content */
.content {
padding: 10px 0;
}
/* Testimonials */
.testimonials blockquote {
background: #FFCDB6 none repeat scroll 0 0;
border: medium none;
color: #e63f0c;
display: block;
font-size: 14px;
line-height: 20px;
padding: 15px;
position: relative;
}
.testimonials blockquote::before {
width: 0;
height: 0;
right: 0;
bottom: 0;
content: " ";
display: block;
position: absolute;
border-bottom: 20px solid #fff;
border-right: 0 solid transparent;
border-left: 15px solid transparent;
border-left-style: inset; /*FF fixes*/
border-bottom-style: inset; /*FF fixes*/
}
.testimonials blockquote::after {
width: 0;
height: 0;
right: 0;
bottom: 0;
content: " ";
display: block;
position: absolute;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #e63f0c transparent transparent transparent;
}
.testimonials .carousel-info img {
border: 1px solid #f5f5f5;
border-radius: 150px !important;
height: 75px;
padding: 3px;
width: 75px;
}
.testimonials .carousel-info {
overflow: hidden;
}
.testimonials .carousel-info img {
margin-right: 15px;
}
.testimonials .carousel-info span {
display: block;
}
.testimonials span.testimonials-name {
color: #e6400c;
font-size: 16px;
font-weight: 300;
margin: 23px 0 7px;
}
.testimonials span.testimonials-post {
color: #656565;
font-size: 12px;
}
/*++++++++*/
.ng-exp > img {
float: left;
margin-right: 10px;
}
.general-exp img {
margin: 0 25px;
}
.contact {
margin: 30px 0;
}
/*###############*/
#tab3 {
height: 100px;
}
/*=========================
Icons
================= */
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-circle a {
background-color: #D3D3D3;
}
.icons {
margin: 25px 0;
}
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
