<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 ---------->
<div class="wrapper text-center">
<button id="toHome"><i class="fa fa-arrow-up fa-lg"></i></button>
<header id="pageTop">
<h1 class="simpleShadow">Yusef Habib</h1>
<h2 class="">Telecommunication Engineer | Front End Developer </h2>
<nav class="principal">
<a class="page-scroll" href="#bio">Bio</a>
<a class="page-scroll" href="#portfolio">Portfolio</a>
<a class="page-scroll" href="#contact">Contact</a>
</nav>
</header>
<section class="content">
<section id="myBio">
<div id="designBackground" class="background">
<h3 id="design" class="slogan right">It's not failure, it's unfinished success</h3>
</div>
<div id="bio" class="textWrap">
<div class="titles">
<h3 class="titleBio"><span class="first title">Few Words About Me</span><span class="active second title">My Skills</span><span class="third title">Always Improving</span></h3>
</div>
<!-- <hr class="divider large"/> -->
<div class="texts">
<div class="stuck biography">
<div class="title mobile">
<h3>Few Words About Me</h3><i class="fa fa-circle second"></i><i class="fa fa-circle third"></i>
</div>
<p><span class="first-letter">I</span>'m a half spanish half lebanese Front End Developer. I've lived in Gijon, Beirut and currently I find myself in Konstanz struggling with the german language.</p>
<p><span class="first-letter">I</span> studied Telecommunication Engineer specialized in Internet Technologies in the University of Oviedo. Therefore my background is filled with Math, Physics, Programming Languages and Internet Protocols.</p>
<p><span class="first-letter">D</span>uring these University years I discovered a vocation related to write code for the web. Building from scratch webs, making them cleaner, responsive and accessible to everyone were alongside to basketball my principal distractions.</p>
<p><span class="first-letter">I</span> like to learn as much as I can about new technologies and specially any related to JavaScript. I'm excited about the new version(EMACS 6) and the new frameworks that are enhancing its possibilities.</p>
<p><span class="first-letter">B</span>esides in my free time I <span>need</span> to do some sport and I also like to try to learn new languages and the german is being a big challenge to me!</p>
</div>
<div class="stuck skills">
<div class="title mobile">
<i class="fa fa-circle first"></i><h3>My Skills</h3><i class="fa fa-circle third"></i>
</div>
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-4">
<ul>
<h4>Front End Development</h4>
<li>HTML5</li>
<li>
<ul>
<li>Bootstrap 3</li>
</ul>
</li>
<li>CSS3</li>
<li>
<ul>
<li>SASS</li>
</ul>
</li>
<li>JavaScript</li>
<li>
<ul>
<li>AJAX</li>
<li>jQuery</li>
<li>AngularJs</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-offset-1 col-xs-5 col-sm-4 col-sm-offset-0">
<ul>
<h4>Back End Development</h4>
<li>PHP</li>
<li>
<ul>
<li>Symfony</li>
</ul>
</li>
<li>MySQL</li>
</ul>
</div>
<div class="col-xs-6 col-xs-offset-4 col-sm-offset-0 col-sm-3 methodology">
<ul>
<h4>Methodology</h4>
<li>Mobile First Approach</li>
<li>Responsive Design</li>
<li>Agile Methodology</li>
</ul>
</div>
</div>
</div>
<div class="stuck actually">
<div class="title mobile">
<i class="fa fa-circle first"></i><i class="fa fa-circle second"></i><h3>Always Improving</h3>
</div>
<p><span class="first-letter">A</span>t the moment I am learning full-stack development focused in the MEAN stack (MongoDB, ExpressJS, AngularJS, NodeJS) and then MeteorJS.</p>
<p><span class="first-letter">I</span> would also like to improve my knowledge about PHP and keep learning new things about Symfony. I started a personal project with it, and I have to come back to it.</p>
<p><span class="first-letter">C</span>urently I'm reading some books that I think they will help me to become a better software engineer. The topics that I want to cover are Design Patterns and Test-Driven Development.</p>
<p><span class="first-letter">F</span>or last and no less important I would love in the future to dive into Design and be able to use in a professional way tools like Illustrator.</p>
</div>
</div>
</div>
</section>
<section id="myPortfolio">
<div id="workBackground" class="background">
<h3 id="design" class="slogan left">There is beauty when something works<br />and it works intuitively</h3>
</div>
<h1 id="portfolio">Portfolio</h1>
<hr class="divider medium"/>
<div class="frontend project">
<div id="myCarouselFrontend" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarouselFrontend" data-slide-to="0" class="active"></li>
<li data-target="#myCarouselFrontend" data-slide-to="1"></li>
<li data-target="#myCarouselFrontend" data-slide-to="2"></li>
<li data-target="#myCarouselFrontend" data-slide-to="3"></li>
<li data-target="#myCarouselFrontend" data-slide-to="4"></li>
<li data-target="#myCarouselFrontend" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h3><a class="fullApp" href="http://codepen.io/yhabib/full/JYvJzY/ " target="_blanck">Simon Game</a>: Electronic game of memory skill</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 description">
<ul>
<li>Repeat the sequence of the machine</li>
<li>After 5th, 8th and 12th the game speeds up</li>
<li>Strict Mode: No mistakes allows </li>
</ul>
</div>
<div class="col-xs-12 col-sm-8">
<p data-height="450" data-theme-id="19081" data-slug-hash="JYvJzY" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/ZbrvXB/" target="_blanck" class="fullApp">Tic Tac Toe</a>: An unbeatable AI</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 description">
<ul>
<li>The player choose how to play</li>
<li>The game will reset as soon as it's over</li>
<li>Not a chance to win ;)</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8">
<p data-height="450" data-theme-id="19081" data-slug-hash="ZbrvXB" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/MarpVv/" target="_blanck" class="fullApp">Wikipedia Viewer</a>: A friendly user wikipedia search engine</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 description">
<ul>
<li>Search for Wikipedia entries and visit them</li>
<li>Get a random Wikipedia entry</li>
<li>Autocomplete search box</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8">
<p data-height="450" data-theme-id="19081" data-slug-hash="MarpVv" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/GpOzzM/" target="_blanck" class="fullApp">Camper's News</a>: The last and more voted posts</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 description">
<ul>
<li>Browse through recent posts</li>
<li>Click in the different posts to visit them</li>
<li>Shows info about the popularity of each post</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8">
<p data-height="450" data-theme-id="19081" data-slug-hash="GpOzzM" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/BowxVW/" target="_blanck" class="fullApp">Twitch App</a>: Check which "buddies" are streaming in Twitch</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 description">
<ul>
<li>Clicking the status will open the Twitch channel</li>
<li>Autocomplete search box</li>
<!-- <li>Additional info about the type of streaming</li> -->
<li>Notifications for closed Twitch accounts</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8">
<p data-height="450" data-theme-id="19081" data-slug-hash="BowxVW" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/WQNJbL/" target="_blanck" class="fullApp">Local Weather App</a>: The weather in your location</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 description">
<ul>
<li>Updated weather on your location</li>
<li>Maximal and minimal temperatures</li>
<li>Switch between ºC and ºF</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8">
<p data-height="450" data-theme-id="19081" data-slug-hash="WQNJbL" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarouselFrontend" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarouselFrontend" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<hr class="divider large"/>
<div class="basic project">
<div id="myCarouselBasic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarouselBasic" data-slide-to="0" class="active"></li>
<li data-target="#myCarouselBasic" data-slide-to="1"></li>
<li data-target="#myCarouselBasic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h3><a href="http://codepen.io/yhabib/full/KdKyjE/" target="_blanck" class="fullApp">Pomodoro Clock</a>: A Time Managment Clock</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 description">
<ul>
<li>Customize the length of each pomodoro</li>
<li>Reset the countdown whenever you want</li>
<li>Initialise the countdown pressing on the timer</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8 col-sm-pull-4">
<p data-height="450" data-theme-id="19081" data-slug-hash="KdKyjE" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/BojzPj/" target="_blanck" class="fullApp">Random Quote Machine</a>: Inspiration is always necessary</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 description">
<ul>
<li>Click to get a new random Quote</li>
<li>Tweet out the quote</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8 col-sm-pull-4">
<p data-height="450" data-theme-id="19081" data-slug-hash="BojzPj" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
<div class="item">
<h3><a href="http://codepen.io/yhabib/full/memWNK/" target="_blanck" class="fullApp">JavaScript Calculator</a>: Responsive and cheap</h3>
<hr class="divider small"/>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 description">
<ul>
<li>Add, subtract, multiply and divide two numbers</li>
<li>Clear the input field with a clear button</li>
<li>Chain mathematial operation until your press the equal button</li>
</ul>
</div>
<div class="col-xs-12 col-sm-8 col-sm-pull-4">
<p data-height="450" data-theme-id="19081" data-slug-hash="memWNK" data-default-tab="result" data-user="yhabib" class='codepen'></p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarouselBasic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarouselBasic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div>
</section>
<section id="myContactInfo">
<div id="contactBackground" class="background">
<h3 id="contact" class="slogan right">The life you have led doesn’t need to be <br />the only life you have</h3>
</div>
<h1 >Contact</h1>
<hr class="divider medium"/>
<div class="textWrap">
<p><span class="first-letter">T</span>his is my principal presence in the web. Feel free to reach me through any of these accounts preferably in English or Spanish, neverthless I think I'm ready to handle german requests!!</p>
<hr class="divider small"/>
<nav class="contactNav container-fluid">
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-2"><a href="http://yusefhabib.com/pdf/CV-EN.pdf" target="_blanck" download><i class="fa fa-download fa-lg"></i></a></div>
</div>
<div class="row ">
<div class="col-xs-4"></div>
<div class="col-xs-2"><a href="mailto:habibfernandez@gmail.com" target="_blanck"><i class="fa fa-envelope fa-lg"></i></a></div>
<div class="col-xs-0"></div>
<div class="col-xs-2"><a href="tel:0162 7469422"><i class="fa fa-mobile fa-lg"></i></a></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-2"><a href="https://github.com/yhabib" target="_blanck"><i class="fa fa-github fa-lg"></i></a></div>
<div class="col-xs-2"><a href="https://de.linkedin.com/in/yhabib" target="_blanck"><i class="fa fa-linkedin fa-lg"></i></a></div>
<div class="col-xs-2"><a href="http://codepen.io/yhabib/" target="_blanck"><i class="fa fa-codepen fa-lg"></i></a></div>
</div>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-2"><a href="skype:yusef.habib" target="_blanck"><i class="fa fa-skype fa-lg"></i></a></div>
<div class="col-xs-2"><a href="https://www.facebook.com/yusef.habibfernandez" target="_blanck"><i class="fa fa-facebook fa-lg"></i></a></div>
<div class="col-xs-2"><a href="https://twitter.com/yhabibf" target="_blanck"><i class="fa fa-twitter fa-lg"></i></a></div>
<div class="col-xs-2"><a href="https://instagram.com/yusefhabib/" target="_blanck"><i class="fa fa-instagram fa-lg"></i></a></div>
</div>
</nav>
</div>
</section>
</section>
<footer>
<div class="footer">
<hr class="divider special large" />
<p>Copyright <i class="fa fa-copyright"></i> Yusef Habib 2015</p>
</div>
</footer>
</div><!-- #wrapper -->
/* BASIC CONFIGURATION - FOOTER TO THE BOTTOM */
html {
font-size: 62.5%; /* 1em -- 10px*/
box-sizing: border-box;
}
html,
body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
.content {
padding-bottom: 2.5rem; /* Height of the footer element */
}
footer {
width: 100%;
height: 1rem;
position: absolute;
bottom: 0;
left: 0;
}
/* DESIGN - FONTS & SIZE */
header{
font-family: 'Dancing Script', cursive;
}
.content, footer {
font-family: 'Josefin Sans', sans-serif;
}
h1 {
font-size: 3.4rem; /* 30px */
}
h2 {
font-size: 2.2em; /* 20px */
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.5em;
margin-bottom: .5rem;
}
h1, h2, h3, h4 {
color: rgba(0, 0, 0, .8);
}
header nav {
font-size: 1.5rem;
}
.first-letter {
font-size: 2rem;
}
.first-letter-inside {
font-size: 1.5rem;
}
p {
font-size: 1.5rem;
line-height: 150%;
}
li{
font-size: 1.2rem;
padding-left: 1rem;
line-height: 130%;
}
.footer p{
font-size: 1rem;
line-height: 100%;
}
.description li {
font-size: 1.1rem;
line-height: 100%;
}
a, p {
color: rgba(0, 0, 0, .7);
}
span {
color: rgba(0, 0, 0, .9);
}
a:hover {
text-decoration: none;
color: black;
}
/* DESIGN - BASICS */
header{
margin: 2rem 0 1rem;
}
header h1 {
margin-bottom: .5rem;
}
header nav {
margin-top: 3rem;
}
header a {
margin: 0 3rem;
}
.textWrap, .project {
max-width: 90%;
margin: 3rem auto 0rem;
}
.textWrap h2 {
padding-top: 1rem;
}
.footer{
margin: 0 auto;
}
.noBullets {
list-style-type:none;
}
.pricipal a:hover {
border-bottom:0.0625rem solid black;
}
/* -- BIO --*/
#bio {
padding-top: 3rem;
margin-top: 0rem;
}
#bio .titles h3, #bio .title h3{
padding-bottom: .8rem;
display: inline-block;
/*border-bottom: 1px solid #CCCDDD;*/
padding-left: 0px;
padding-right: 0px;
}
#bio .title {
padding-bottom: .8rem;
}
.stuck {
margin: 3rem auto 4rem;
text-align: justify;
}
.stuck.skills {
text-align: left;
}
.biography p, .actually p {
margin-bottom: 1.5rem;
}
.skills ul {
margin-bottom: 1rem;
}
.titles span {
margin: 0 1.5rem;
color: rgba(0,0,0,.2);
}
.titles span:hover {
cursor: pointer;
color: rgba(0,0,0,.8);
}
.actually, .biography {
display: none;
}
.titles .active {
color: rgb(0, 0, 0);
border-bottom: 1px solid black;
}
.titles {
display: none;
}
.title {
text-align: center;
}
.fa-circle {
margin: 0 10px;
}
.fa-circle:hover {
cursor: pointer;
}
.methodology li {
margin-top: 1rem;
}
.mobile {
margin-bottom: 2rem;
}
/* -- PORTFOLIO --*/
.description {
text-align: center;
display: inline-box;
}
.description li {
margin-bottom: 1rem;
}
.frontend {
margin-top: 3rem;
margin-bottom: 3rem;
}
.basic {
margin-top: 5rem;
}
#portfolio {
padding-top: 2rem;
}
.fullApp {
text-decoration: none;
font-weight: bold;
}
.fullApp:hover {
text-decoration: none;
font-weight: bold;
color: rgba(0, 0, 0, 1);
}
/* -- BACKGROUNDS -- */
.background {
margin-top: 2.5rem;
position: relative;
}
.slogan {
color: #EEEEEE;
font-size: 2.5rem;
position: absolute;
top: 35%;
}
.left {
left: 3%;
}
.right {
right: 3%;
}
#designBackground {
background:
linear-gradient(to bottom, #fff, transparent 1%),
linear-gradient(to top, #fff, transparent 30%),
url("https://snap-photos.s3.amazonaws.com/img-thumbs/960w/FSPLFPQBCZ.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 45rem;
}
#workBackground {
background:
linear-gradient(to bottom, #fff, transparent 1%),
linear-gradient(to top, #fff, transparent 50%),
url("http://www.mailconsult.net/blog/wp-content/uploads/2014/04/DeathtoStock_Wired3.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 40rem;
}
#contactBackground {
background:
linear-gradient(to bottom, #fff, transparent 1%),
linear-gradient(to top, #fff, transparent 50%),
url("http://theaffray.com.au/wp-content/uploads/2014/09/DeathtoStock_NotStock7.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 35rem;
}
/* -- CONTACT -- */
.contactNav i{
width: 2.7rem;
height: 2.7rem;
border: none;
border-radius: 50%;
line-height: 2.5rem;
background-color: rgba(150, 200, 200, 0.15);
}
.contactNav i:hover{
color: rgba(150, 200, 200, 1);
background-color: rgba(0, 0, 0, 1);
}
i, .contactNav a {
font-size: 1.5rem;
}
/* -- EXTRAS - TO HOME -- */
button{
position: fixed;
right: 2%;
top: 10%;
z-index: 1;
background: none;
border: none;
display: none;
}
button:hover {
animation-name: example;
animation-duration: 0.5s;
animation-iteration-count: infinite;
}
/* -- EXTRAS - DESIGN -- */
button:focus {
outline: 0;
}
.divider {
border-color: #CCCDDD;
padding: 0;
margin: .5rem auto 3rem;
}
.special {
margin: .5rem auto;
}
.small {
width: 7.5rem;
}
.medium {
width: 15rem;
}
.large {
width: 80%;
}
/*.shadow {
text-shadow: 0 .1rem 0 #ccc,
0 .2rem 0 #c9c9c9,
0 .3rem 0 #bbb,
0 .4rem 0 #b9b9b9,
0 .5rem 0 #aaa,
0 .6rem 1rem rgba(0,0,0,.1),
0 0 .5rem rgba(0,0,0,.1),
0 .1rem .3rem rgba(0,0,0,.3),
0 .3rem .5rem rgba(0,0,0,.2),
0 .5rem .10rem rgba(0,0,0,.25),
0 .10rem .10rem rgba(0,0,0,.2),
0 .20rem .20rem rgba(0,0,0,.15);
}*/
.simpleShadow {
text-shadow: 1rem 1rem 1rem rgba(0,0,0,.2);
}
.carousel .carousel-control {
background: none;
border: none;
}
/* -- EXTRAS - ANIMATION -- */
@keyframes example {
0% {top:10%;}
10% {top:9.8%;}
20% {top:9.6%;}
30% {top:9.4%;}
40% {top:9.2%;}
60% {top:9%;}
70% {top:8.8%;}
80% {top:8.6%;}
90% {top:8.4%;}
100% {top:10%;}
}
/* -- MEDIA QUERIES -- */
@media screen and (min-width: 768px) {
html { font-size: 13px;}
.textWrap {
max-width: 90%;
margin: 3rem auto 0rem;
}
.mobile {
display: none;
}
.titles {
display: initial;
}
.description {
text-align: left;
margin-top: 15%;
}
}
@media screen and (min-width: 1024px) {
html { font-size: 16px;}
.textWrap {
max-width: 70%;
margin: 3rem auto 0rem;
}
.stuck.biography, .stuck.actually {
max-width: 70%;
}
.stuck.skills {
max-width: 90%;
}
.project {
max-width: 100%;
}
.carousel-inner {
margin: 0 auto;
text-align: center;
max-width: 70%;
}
}
@media screen and (min-width: 1366px) {
html { font-size: 19px;}
.textWrap {
max-width: 60%;
}
}
/* -- TEMPORAL -- */
.codepen {
border: 1px solid black;
height: 450px;
}
// jQuery(document).ready(function() {
// $(document).scroll(function() {
// if($(document).scrollTop() >= 180)
// $("button").css("display", "initial");
// else
// $("button").css("display", "none");
// });
// $(".page-scroll").click(function(event) {
// event.preventDefault();
// console.log()
// $('html, body').animate({ scrollTop:$(this.hash).offset().top } , 1000);
// });
// $("#toHome").click(function(event) {
// $('html,body').animate({ scrollTop:$("#pageTop").offset().top } , 1000);
// });
// // Description behavior
// $(".first").click(function() {
// show($(".biography"), "slow")
// active($(this));
// });
// $(".second").click(function() {
// show($(".skills"), "slow");
// active($(this));
// });
// $(".third").click(function() {
// show($(".actually"), "slow");
// active($(this));
// });
// });
// function active(obj) {
// obj.addClass("active");
// obj.siblings().removeClass("active");
// }
// function show(obj, vel) {
// obj.show(vel);
// obj.siblings().hide(vel);
// }
