<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<section class="panel panel-default">
<div class="panel-body">
<article class="panel-body">
<figure class="text-center">
<img src="https://d13yacurqjgara.cloudfront.net/users/42865/screenshots/614568/devilspiritjinx.jpg" class="img-thumbnail img-circle img-responsive" alt="me">
<figcaption>
<h3>Yutthana Siphuengchai</h3> 99/4 M.9 Saraburi-Loamsak Rd. Nachaliang Nongphai Phetchabun 67220
<br> Tel. 092-889-7790 E-mail: yutna1990@gmail.com
</figcaption>
</figure>
</article>
<br>
<article>
<h4>
<strong>Personal Details</strong>
</h4>
<hr>
<dl class="dl-horizontal">
<dt>Date of Birth:</dt>
<dd>April 14, 1990</dd>
<dt>Age:</dt>
<dd>25</dd>
<dt>Marital Status:</dt>
<dd>Single</dd>
<dt>Military Status:</dt>
<dd>Exempted through Military Drawing Ballot</dd>
<dt>Interests:</dt>
<dd>HTML5, CSS3, JavaScript, jQuery, Underscore.js, Backbone.js, Web Design, Responsive Design, Node.js, Java and Linux.</dd>
</dl>
</article>
<article>
<h4>
<strong>Edcucation</strong>
</h4>
<hr>
<dl class="dl-horizontal">
<dt>2009-2013</dt>
<dd>Bachelor of Engineering (Computer Engineering) | Suranaree University of Technology</dd>
</dl>
</article>
<article>
<h4>
<strong>Skills</strong>
</h4>
<hr>
<dl class="dl-horizontal">
<dt>Languages:</dt>
<dd>HTML5, CSS3 and JavaScript</dd>
<dt>Framework:</dt>
<dd>jQuery, Bootstrap, NW.js</dd>
</dl>
</article>
<article>
<h4>
<strong>Work Experiences</strong>
</h4>
<hr>
<dl class="dl-horizontal">
<dt>2013-2014</dt>
<dd>Software Developer at SoftPlus Technology Co., Ltd. (Soft Square Group of Companies)</dd>
<dt>2014-Present</dt>
<dd>Web Programmer at Market Anyware Co., Ltd.</dd>
</dl>
<hr>
</article>
<article>
<h4>
<strong>Projects</strong>
</h4>
<dl class="dl-horizontal">
<dt>Market Anyware Desktop</dt>
<dd>Create Cross Platform Realtime Stock Application (Windows, Linux, Macs) by using Web Technology for investor <a href="http://marketanyware.com/th/index.html">Link</a></dd>
<dt>Fluent Forever Website</dt>
<dd>Create Fluent Forever Book Landing Page <a href="http://maxincube.com/fluent-forever">Link</a></dd>
<dt>Employee Self Service</dt>
<dd>Create the User Interface and Front-End Development</dd>
<dt>Project Management (Properties Management)</dt>
<dd>Customize Web UI in Spring roo Framework (Tagx Files) for generate Bootstrap components, Prototype, Drag and Drop Apps , and Front-End Development</dd>
</dl>
<hr>
</article>
<article>
<div class="pull-right">
<a href="https://www.facebook.com/yutthana.siphuengchai" title="Yutna's Facebook">
<img src="http://icons.iconarchive.com/icons/lunartemplates/modern-social-media-circles/48/Facebook-icon.png" alt="facebook">
</a>
<a href="https://twitter.com/Yutna_Na" title="Yutna's Twitter">
<img src="http://icons.iconarchive.com/icons/lunartemplates/modern-social-media-circles/48/Twitter-icon.png" alt="twitter">
</a>
</div>
</article>
</div>
</section>
</div>
</div>
</div>
@import url(//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css);
@import url(//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body {
font-family: "Ubuntu", sans-serif;
background-color: #3498db;
}
.container {
padding-top: 50px;
}
article {
margin-bottom: 30px;
}
.img-responsive {
width: 150px;
height: 150px;
}
figcaption {
margin-top: 20px;
}
figcaption > h3 {
font-weight: bolder;
font-size: xx-large;
}
dt, dd {
margin-bottom: 5px;
}
