Skip to content

Instantly share code, notes, and snippets.

@pyliaorachel

pyliaorachel/Peiyu Liao - Portfolio.markdown

Created April 27, 2016 12:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pyliaorachel/0a1695aaff0525c45b81ce38fb33bb09 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pyliaorachel/0a1695aaff0525c45b81ce38fb33bb09 to your computer and use it in GitHub Desktop.
Download ZIP
Peiyu Liao - Portfolio
Raw
index.html
<nav class='navbar navbar-fixed-top'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href="#" class='navbar-brand'>Peiyu Liao</a>
</div>
<div class='submenu'>
<ul class='nav navbar-nav navbar-right'>
<li><a href="#home-smint">Home</a></li>
<li><a href="#about-smint">About</a></li>
<li><a href="#portfolio-smint">Portfolio</a></li>
<li><a href="#contact-smint">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class='fixed-bg fixed-bg-home home-smint' id='home'>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12 text-center intro'>
<h1>MyCoon</h1>
<h3>Hatch Your Dream.</h3>
<ul class='link-list'>
<li><a href="https://github.com/xul4284g" target="blank" class='btn btn-block'><i class='fa fa-github'></i>&nbsp;GitHub</a></li>
<li><a href="#" class='btn btn-block'><i class='fa fa-linkedin'></i>&nbsp;LinkedIn</a></li>
<li><a href="mailto:u3512485@connect.hku.hk" class='btn btn-block'><i class="fa fa-envelope"></i>&nbsp;Email</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class='fixed-bg fixed-bg-about about-smint' id='about'>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-6 pictures'>
<figure>
<img src="https://scontent-tpe1-1.xx.fbcdn.net/hphotos-xat1/v/t1.0-9/12438948_1094654527245979_3120831713094994130_n.jpg?oh=6c4e11bca388be90fb1ed382c1bdea13&oe=573E3D3C" alt="A picture of Peiyu Liao." />
</figure>
</div>
<div class='col-md-6 descriptions'>
<h2>About <span>MyCoon</span></h2>
<hr class='header-line'/>
<p>Possess enthusiasm in developing new technical abilities.<br> Enjoy programming and problem solving.<br> Self- motivated, passionate and capable of learning new things efficiently.<br> Definitely an active and responsible team player with excellent time managing and presentation skills.</p>
</div>
</div>
</div>
</div>
<div class='fixed-bg fixed-bg-portfolio portfolio-smint' id='portfolio'>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12 text-center port'>
<h1>Cradle</h1>
<h3>Where Creativity Was Born.</h3>
</div>
</div>
<div class='row showcase'>
<div class='col-md-4 col-sm-6 showcase-bx'>
<div class='container-fluid'>
<figure class='project text-center'>
<figcaption>
<h1><a href="http://i.cs.hku.hk/~pyliao/MSpartner" target="blank">Microsoft Student Partner Project</a></h1>
<p>Feature - Bootstrap, Slider</p>
</figcaption>
<a href="http://i.cs.hku.hk/~pyliao/MSpartner" target="blank">
<div class='pic1 pic'></div>
</a>
</figure>
</div>
</div>
<div class='col-md-4 col-sm-6 showcase-bx'>
<div class='container-fluid'>
<figure class='project text-center'>
<figcaption>
<h1><a href="#">To Be Released.</a></h1>
<p>###</p>
</figcaption>
<div class='pic2 pic'></div>
</figure>
</div>
</div>
<div class='col-md-4 col-sm-6 showcase-bx'>
<div class='container-fluid'>
<figure class='project text-center'>
<figcaption>
<h1><a href="#">To Be Released.</a></h1>
<p>###</p>
</figcaption>
<div class='pic3 pic'></div>
</figure>
</div>
</div>
<div class='col-md-4 col-sm-6 showcase-bx'>
<div class='container-fluid'>
<figure class='project text-center'>
<figcaption>
<h1><a href="#">To Be Released.</a></h1>
<p>###</p>
</figcaption>
<div class='pic4 pic'></div>
</figure>
</div>
</div>
<div class='col-md-4 col-sm-6 showcase-bx'>
<div class='container-fluid'>
<figure class='project text-center'>
<figcaption>
<h1><a href="#">To Be Released.</a></h1>
<p>###</p>
</figcaption>
<div class='pic5 pic'></div>
</figure>
</div>
</div>
<div class='col-md-4 col-sm-6 showcase-bx'>
<div class='container-fluid'>
<figure class='project text-center'>
<figcaption>
<h1><a href="#">To Be Released.</a></h1>
<p>###</p>
</figcaption>
<div class='pic6 pic'></div>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class='fixed-bg fixed-bg-contact contact-smint' id='contact'>
<div class='container-fluid'>
<div class='row contact'>
<div class='col-md-6 contact-title text-center'>
<h1>Contact <span>MyCoon</span></h1>
</div>
<div class='col-md-6 contact-link text-center'>
<ul class='link-list'>
<li><a href="https://github.com/xul4284g" target="blank" class='btn btn-block'><i class='fa fa-github'></i>&nbsp;GitHub</a></li>
<li><a href="#" class='btn btn-block'><i class='fa fa-linkedin'></i>&nbsp;LinkedIn</a></li>
<li><a href="mailto:u3512485@connect.hku.hk" class='btn btn-block'><i class="fa fa-envelope"></i>&nbsp;Email</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<div class='container-fluid'>
<p>Copyright &copy; Peiyu Liao 2016<br>
Pictures credit to <a href="http://www.disobey.com/detergent/wallpapers/" target="blank">disobey.com</a>
<br>
Project not for commercial use.</p>
</div>
</footer>
Raw
script.js
$(document).ready(function(){
$('.submenu').smint();
$('.submenu a').click(function(){
$('.submenu a').removeClass('active');
$(this).addClass('active');
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//www.outyear.co.uk/smint/demo/js/jquery.smint.js"></script>
<script src="//www.page2images.com/js/p2i.js"></script>
Raw
style.css
body {
background-color: #555555;
height: 800px;
}
/*navbar*/
.navbar {
background-color: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid white;
}
.navbar .container-fluid {
padding: 0;
}
.navbar-header {
padding-left: 15px;
}
.navbar-brand {
color: #0d2f72;
font-family: 'Cinzel', serif;
font-size: 30px;
}
.navbar-nav a {
text-shadow: 0px 0px 1px black;
font-size: 18px;
font-family: 'Vollkorn', serif;
color: white;
}
.navbar-nav a:hover {
color: black;
}
/* .navbar-nav a:hover, .navbar-nav a.active {
color: black;
background-color: white;
}
.navbar-nav a:not(.active){
color: white;
} */
.submenu {
right: 0;
}
.navbar-nav {
padding-right: 15px;
}
/*background*/
.fixed-bg {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg-home{
background-image: url('http://www.disobey.com/detergent/wallpapers/0414e7b9e1ee08e7f610b7f7fb7f84d9.jpg');
}
.fixed-bg-about{
background-image: url('http://www.disobey.com/detergent/wallpapers/04eb4223b394af91fd3d4a3ffe471e94.jpg');
}
.fixed-bg-portfolio{
background-image: url('http://www.disobey.com/detergent/wallpapers/0deebc4fe772848752b26e315f8f5b15.jpg');
}
.fixed-bg-contact{
background-image: url('http://www.disobey.com/detergent/wallpapers/21e753844275163fd6fdacdbfd06c5eb.jpg');
}
/*footer*/
footer .container-fluid {
height: 100px;
color: #bbbbbb;
text-align: center;
margin: 0;
padding: 0;
}
footer .container-fluid:before {
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
footer p {
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
font-family: 'Josefin Sans', sans-serif;
font-size: 16px;
}
/*intro*/
.intro {
padding-top: 250px;
padding-bottom: 250px;
}
.intro h1 {
font-size: 86px;
color: #cccccc;
text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
font-family: 'Poiret One', cursive;
font-weight: 900;
}
.intro h3 {
font-size: 30px;
color: #222222;
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.7);
font-family: 'Josefin Sans', sans-serif;
font-weight: 900;
}
.btn {
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 0;
margin: 7px 0;
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
}
.btn:hover {
background-color: rgba(255, 255, 255, 0.6);
color: black;
}
ul.link-list {
list-style: none;
width: 40%;
margin: 50px auto;
padding: 0;
}
/*about*/
.pictures img {
height: 200px;
border-radius: 100%;
display: block;
margin: auto;
box-shadow: 1px 1px 5px black;
}
.pictures {
padding-top: 70px;
padding-bottom: 70px;
}
.descriptions{
margin: 0;
padding: 100px;
background-color: rgba(255, 255, 255, 0.3);
}
.descriptions h2{
font-size: 35px;
color: black;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
font-family: 'Poiret One', cursive;
font-weight: 900;
}
.descriptions h2 span{
font-size: 35px;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
.descriptions p{
margin-top: 20px;
font-size: 20px;
font-weight: 500;
color: #111111;
line-height: 30px;
font-family: arial;
}
.header-line {
border-color: rgba(16, 16, 16, 0.8);
}
/*portfolio*/
.port {
padding-top: 70px;
padding-bottom: 70px;
}
.port h1 {
font-size: 46px;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
margin: 0;
font-family: 'Poiret One', cursive;
font-weight: 900;
}
.port h3 {
font-size: 20px;
color: black;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8);
margin: 0;
margin-top: 10px;
font-family: 'Josefin Sans', sans-serif;
}
.showcase {
padding: 0 30px 70px 30px;
}
.showcase-bx .container-fluid {
height: 400px;
background-color: rgba(255, 255, 255, 0.7);
padding: 5px;
margin-bottom: 10px;
}
.project {
height: 100%;
width: 100%;
}
.project figcaption {
height: 20%;
width: 100%;
padding: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
overflow: auto;
}
.project figcaption h1 {
margin: 0;
}
.project figcaption h1 a {
color: #0d2f72;
text-decoration: none;
font-size: 26px;
}
.project figcaption p {
margin: 0;
overflow: auto;
margin-bottom: 1px;
}
.project .pic {
height: 80%;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
.project .pic1{
background-image: url("http://i.imgur.com/6WmOeeC.png?1");
}
.project .pic2{
}
.project .pic3{
}
.project .pic4{
}
.project .pic5{
}
.project .pic6{
}
/*contact*/
.contact {
padding-top: 250px;
padding-bottom: 250px;
}
.contact-title, .contact-link {
padding: 30px;
}
.contact-title h1 {
font-size: 86px;
color: black;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
font-family: 'Poiret One', cursive;
font-weight: 900;
}
.contact-title h1 span{
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Cinzel:700" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment