<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Nguyen Khac Tien</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
  <script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
  <script type="text/javascript" src="https://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand topnav" href="#">TienCV</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="true">
                <ul class="nav navbar-nav navbar-right">
					        <li><a href="#home" class ="scroll">Home</a></li>
                  <li><a href="#about" class="scroll">About</a></li>
                  <li><a href="#skill" class ="scroll">Skill</a></li>
                  <li><a href="#education" class="scroll">Education</a></li>
                  <li><a href="#portfolio" class ="scroll">Portfolio</a></li>
                  <li><a href="#contact" class="scroll">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
<div id ="home" class="intro-header"><div class="container">
<div class="row">
    
        
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    
        <div class="intro-message"><h1 style="text-align: center;">Nguyen Khac Tien</h1>

<h2 style="text-align: center;">Cover Letter</h2>

<hr class="intro-divider">
<p style="text-align: center;">
  <a href="https://www.facebook.com/crazycat9x" class="btn btn-default btn-lg" role="button" target='_blank'><span class="icon fa fa-facebook" aria-hidden="true"></span> Facebook
  </a> &nbsp; &nbsp;&nbsp;<a href="https://www.linkedin.com/in/tien-nguyen-khac-660547126/" class="btn btn-default btn-lg" role="button" target='_blank'><span class="icon fa fa-linkedin" aria-hidden="true"></span>


    Linkedin</a></p>

<p style="text-align: center;">&nbsp;</p>
</div>
    
</div>

    
</div>
</div></div><div class="content-section-a " id ="about" style="padding-top: 54px;" class="section-heading">
<div class="container">
<div class="row">
    
        
 
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    
        <div style="padding-top: 53px;">





<img src="https://du9rgq-bn1305.files.1drv.com/y3mgtO2v4-afOJNeTdPMAwEWZAlpX3MCwdYX4eYzblZMw_nBdhfSsmWJ86MuKvvV-CBat8_YqDF6vdS65zOe3odSw7XVxxoLezwHLQi-0A2lVayKcIVM5qR56ELzJfEUaVQ3Bwwc5UU4JV_fObfS5CKpNrcrgfQEPafIKJpWAS1OQ0?width=511&height=500&cropmode=none" alt="" class="img-responsive img-rounded">

</div>
    
</div>

    
        
 
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
    
        <div style="padding-left: 30px;"><p style="text-align: right;">&nbsp;</p>

<hr style="float: right;" class="section-heading-spacer">
<div style="text-align: right;" class="clearfix">&nbsp;</div>

<h2 style="text-align: right;">About me</h2>

<p style="text-align: right;" class="lead">As a current student at the University of Auckland with outstanding performance in computer science related papers, these have enabled me to developed as a logical thinker and a competent programmer.&nbsp;</p>

<p style="text-align: right;" class="lead">Now seeking to further my career in IT, I've joined a startup team of 8 highly skilled people, all of which is more than happy to aid you in your business or individual needs and requirements.&nbsp;</p>
</div>
    
</div>

    
</div>
</div></div><div id ="skill" class="content-section-b" style="padding-top: 54px;"><div class="container">
<div class="row">
    
        
 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    
        <hr class="section-heading-spacer">
<div class="clearfix">&nbsp;</div>

<h2 class="section-heading">Programming skill&nbsp;</h2>

<p class="lead">From web degsigning to general problem solving, I hold an extensive knowledge of various programming languages and is alway willing to learn more.&nbsp;</p>

    
</div>

    
        
 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    
        <div style="padding-top: 53px;"><div class="progress">
<div style="width: 60%; float: left;" class="progress-bar progress-bar-success progress-bar-striped active"><span class="sr-only">60% Complete</span>Python</div>
</div>

<div class="progress">
<div style="width: 80%;" class="progress-bar progress-bar-info progress-bar-striped active"><span class="sr-only">80% Complete</span>Wordpress</div>
</div>

<div class="progress">
<div style="width: 60%;" class="progress-bar progress-bar-warning progress-bar-striped active"><span class="sr-only">60% Complete (warning)</span>HTML and CSS</div>
</div>

<div class="progress">
<div style="width: 70%;" class="progress-bar progress-bar-danger progress-bar-striped active"><span class="sr-only">70% Complete (danger)</span>SQL</div>
</div>
</div>
    
</div>

    
</div>
</div></div><div id="education" class="content-section-a" style="padding-top: 54px;"><div class="container">
<div class="row">
    
        
 
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    
        <div style="padding-top: 53px;">

<div class="panel
     panel-danger
    ">

    
        

<div class="panel-heading">
    

    
        <p style="text-align: center;">Certificate in Foundation Study</p>

<h4 style="text-align: center;"><strong>Taylors College</strong></h4>

<p style="text-align: center;">2014-2015</p>

    
</div>

    
        

<div class="panel-body">
    
        <p>Achieved outstanding performance: Accounting (A), Economics (A), Computer Science (A), English (A), Maths (B).</p>

    
</div>

    
</div>
</div>
    
</div>

    
        
 
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    
        <div style="padding-top: 53px;">

<div class="panel
     panel-primary
    ">

    
        

<div class="panel-heading">
    

    
        <p style="text-align: center;">Bachelor of Science</p>

<h4 style="text-align: center;">University of Aucklad</h4>

<p style="text-align: center;">2015&nbsp;- PRESENT</p>

    
</div>

    
        

<div class="panel-body">
    
        <p>Major in computer science and information systems with high grades standing.</p>

<br>

    
</div>

    
</div>
</div>
    
</div>

    
        
 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    
        <div style="padding-left: 30px;"><hr class="section-heading-spacer">
<div class="clearfix">&nbsp;</div>

<h2 class="section-heading">Education</h2>

<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&nbsp;</p>
</div>
    
</div>

    
</div>
</div></div><div id="portfolio" class="content-section-b" style="padding-top: 54px;"><div class="container">
<div class="row">
    
        
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    
        <h2 style="text-align: center;" class="section-heading">Previous Works</h2>
<hr>
    
</div>

    
</div>

<div class="row">
    
        
 
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    
</div>

    
        
 
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    
        <div class="thumbnail"><img src="https://ehrfdg-bn1305.files.1drv.com/y3mdTonFlHNPglmD2AC227Oqx39hyw-MzZdg5vbvF-fMezL-2JVEAAn1GzaVFfIwU7CXsCZLwKJ4CmNB0wQwf6ViKyQQGGaEGONyup4BK_nwv8udhCPtqKWojXzQC2WenXoeuMrqUuzmSlvEDOy06BwuVFXWGS4BW1OciwUxLLQNwo?width=1350&amp;height=640&amp;cropmode=none">
<div class="caption">
<h3>VAUSA</h3>

<p>The official site for the Vietnamese student association of the University of Auckland, built and design by me.</p>

<p><a class="btn btn-primary" href="https://vausa.co.nz/" target='_blank'>Link to Site</a> <a class="btn btn-default" href="https://onedrive.live.com/embed?cid=CD9362C167FAD495&resid=CD9362C167FAD495%21731190&authkey=APJxvKJCUBLwDMs&em=2">Reference</a></p>
</div>
</div>

    
</div>

    
        
 
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    
</div>

    
</div>
</div></div><div id ="contact" class="banner"><div class="container">
<div class="row">
    
        
 
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
    
        <h2 style="text-align: right;" class="lead">GET IN TOUCH WITH A FORM!</h2>

    
        
<form action="index.php" class="form-horizontal" method="post">
<div class="form-group">
<p><label class="col-sm-2 control-label" for="name">Name</label></p>

<div class="col-sm-10"><input class="form-control" id="name" name="name" type="text" value=""></div>
</div>

<div class="form-group">
<p><label class="col-sm-2 control-label" for="email">Email</label></p>

<div class="col-sm-10"><input class="form-control" id="email" name="email" type="email" value=""></div>
</div>

<div class="form-group">
<p><label class="col-sm-2 control-label" for="message">Message</label></p>

<div class="col-sm-10"><textarea name="message" class="form-control" rows="4"></textarea></div>
</div>

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2"><input class="btn btn-primary" id="submit" name="submit" type="submit" value="Send"></div>
</div>

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">&nbsp;</div>
</div>
</form>

    
</div>

    
        
 
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    
        <div style="padding-top: 72px; padding-left: 30px;">

<div class="panel
     panel-default
    ">

    
        

<div class="panel-heading">
    
        <h3 class="panel-title">Contact Info</h3>
    

    
</div>

    
        

<div class="panel-body">
    
        <div style="color: black;">
<p>
<span class="icon fa fa-location-arrow" aria-hidden="true"></span>
&nbsp;86A Nelson Street Auckland CBD</p>

<p>
<span class="icon fa fa-phone" aria-hidden="true"></span>
&nbsp;+64 21 0299 1124</p>

<p>
<span class="icon fa fa-envelope-o" aria-hidden="true"></span>
&nbsp;tngu281@aucklanduni.ac.nz</p>
</div>

    
</div>

    
</div>
</div>
    
</div>

    
</div>
</div></div>
<footer>
        <div class="container"><hr>
<p>Made with Tình Yêu</p>
</div>
    </footer>
</body>

body,
html {
    width: 100%;
    height: 100%;
}
body {
  position: relative;
}
 .panel-body  {
    word-wrap: break-word;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.topnav {
    font-size: 14px; 
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(https://pzf1mq-bn1305.files.1drv.com/y3mrq3nSgvF9GTLSmgK8AMqM7fLv-DjXZVCoH386FwBpkyHkvUNZGp4K8KC8XQEWxaqCUr9swY89I3_R0ncpV2L-dpDsxXF1n4TVUBfzpgTy10pO4Pff5bQGgHsKkaNAALVzjVTjEDNtuF7_4-iUxziS75LwPwxQAEHoEkRfAa2YGU?width=1900&height=1267&cropmode=none) no-repeat center center;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 100px 0;
    color: #f8f8f8;
    background: url(https://zew6ha-bn1305.files.1drv.com/y3mOaR666bBAdvxG4pk76ciBFmCAwWOcxrUyKS2mbHSPL1Y3NQz_yYACwR8vgeUksMfkNEUkeAVHTDQ63wbEW1ljelNHHTVFcHjiob_pl9_aeGfGzNTB73dOzxqg9dC0_nZfQwINz_ZIdSW78PiIk6hW2V0lkxE_Xn5XIWIQSL8eaE?width=1900&height=840&cropmode=none) no-repeat center center;
    background-size: cover;
}

.banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 3em;
}

.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}

footer {
    padding: 50px 0;
    background-color: #f8f8f8;
}

p.copyright {
    margin: 15px 0 0;
}
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
$(function() {
    $('.scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js