<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/neosaurus/pen/gmKwRa?depth=everything&order=popularity&page=11&q=mongo&show_forks=false" />
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style class="cp-pen-styles">/* font-family: 'Varela Round', sans-serif;
font-family: 'Indie Flower', cursive;
font-family: 'Architects Daughter', cursive;
font-family: 'Coming Soon', cursive;
*/
body {
font-family: 'Varela Round', cursive;
margin: 0;
position: relative;
}
html {
height: 100%;
}
.content {
text-align: center;
font-weight: bold;
font-family: 'Architects Daughter', cursive;
color: #663399;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.content h1 {
font-size: 4em;
}
.content h3 {
font-size: 3em;
}
.content a {
color: #663399;
}
.padded {
width: 80%;
}
li:hover {
font-weight: bold;
}
h2 {
font-family: 'Architects Daughter', cursive;
color:#663399
}
.send {
margin-top: 10px;
background: none;
border: 2px solid #888888;
}
.bio {
/*height:300px;*/
margin: auto;
text-align: center;
}
.active{
font-weight: bold;
color:green;
}
.portfolio {
/*height:650px;*/
width: 80%;
margin: auto;
/*padding: 0% 10%; */
text-align: center;
}
.picturepane {
margin: auto;
}
.contact {
width: 80%;
/*height:300px;*/
margin: auto;
text-align: center;
}
section {
padding-top: 40px;
}
.navbar {
margin: 0;
/*add this*/
}
.parallax {
/* The image used */
background-image: url("https://i.imgur.com/fZfXJWl.jpg");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.img-responsive {
height: 70%;
width: 70%;
margin: 0 auto;
}
.lowmargin{
margin-bottom: 25px;
}
#component-that-spies {
/* Obligatory property */
position: relative;
}</style></head><body>
<body data-spy="scroll" data-target=".navbar" data-offset="5">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#top">Lukie Kang</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#bio">Bio</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section id="top">
<div class="parallax">
<div class="content">
<br><br><br><br>
<h1>Lukie Kang</h1>
<h3>UX / Design</h3>
<br><br>
<a href="https://twitter.com/lukie_k"><i class="fa fa-twitter fa-3x" aria-hidden="true"> </i></a>
<a href="https://www.facebook.com/lukiekang"><i class="fa fa-facebook-official fa-3x" aria-hidden="true"> </i></a>
<a href="https://github.com/neosaurrrus"><i class="fa fa-github fa-3x" aria-hidden="true"> </i></a>
<a href="mailto:bdd_lukiek@gmail.com"><i class="fa fa-envelope fa-3x" aria-hidden="true"> </i></a>
</div>
</div>
</section>
<section id="bio">
<div class="bio container padded">
<h2>Bio</h2>
<hl>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-2 ">
<p>Learning to become a front-end focused developer. Focusing on Javascript, HTML, CSS, Node and Mongo based applications. A background in the Microsoft stack, particulary Office 365 and SharePoint based solutions. </p>
<br>
<p>Worked with many enterprises designing business-focused solutions. Always looking to develop skills further around modern web development technologies without losing sight of the fact they are made for humans. Generally enjoy seeing someone's life being made easier, or cooler by rethinking how things might be done.</p>
<br>
<p>Based in West London, residing with the most wonderful fiancee a guy could ever ask for. </p>
<br>
<p>Outside of tech I enjoy hiking, theatre and pubs. Always planning some sort of rediculous adventure to sink my teeth into, generally invoving goign to a place far away or simply driving for a very long time. </p>
</div>
<div class="col-md-4">
<img class="img-circle" src="https://i.imgur.com/fdvux35.jpg"></img>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="portfolio container padded">
<hr>
<h2>Portfolio</h2>
<br>
<div class="row lowmargin">
<div class="col-md-6">
<img src="https://i.imgur.com/Hn3NVZv.png" class="img-rounded img-responsive">
</div>
<div class="col-md-6">
<img src="https://i.imgur.com/idhM0Vz.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row lowmargin">
<div class="col-md-6">
<img src="https://i.imgur.com/nO0l431.png" class="img-rounded img-responsive">
</div>
<div class="col-md-6">
<img src="https://i.imgur.com/vh6JHrU.jpg" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://i.imgur.com/oo3CYbV.png" class="img-rounded img-responsive">
</div>
<div class="col-md-6">
<img src="https://i.imgur.com/bca30UX.png" class="img-rounded img-responsive">
</div>
</div>
</div>
</section>
<section id="contact">
<div class="contact container padded">
<hr>
<h2>Contact me</h2>
<br>
<div class="row">
<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2">
<h4>Let's work together!</h4>
<p> Currently considering select projects. Or if you want to just chat or offer advice, that's cool too...
I will need to add an email script when use this for real.</p>
<div class="form-group">
<form id="#contact-form" action="mailto:lukiek@gmail.com" method="post" enctype="text/plain">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" name="name" placeholder="Your name here">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Your email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<input id="messsage" type="text-area" class="form-control" name="message" placeholder="Provide a short message here">
</div>
<input type="submit" class="send" value="Send">
</form>
</div>
</div>
</div>
<hr>
<p>Lukie Kang - 2017</p>
<a href="https://twitter.com/lukie_k"><i class="fa fa-twitter" aria-hidden="true"> </i></a>
<a href="https://www.facebook.com/lukiekang"><i class="fa fa-facebook-official" aria-hidden="true"> </i></a>
<a href="https://github.com/neosaurrrus"><i class="fa fa-github fa" aria-hidden="true"> </i></a>
<a href="mailto:bdd_lukiek@gmail.com"><i class="fa fa-envelope fa" aria-hidden="true"> </i></a>
</div>
</section>
</body>
</body></html>
