<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<title>MikkiPastel 8-bit Resume</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
<style>
body {
padding-bottom: 90px;
}
.nes-progress {
height: 25px;
}
</style>
</head>
<body style="background-color: #f5f5f5;">
<nav style='padding: 20px; border-bottom: 3px solid #ccc; margin-bottom: 60px; background-color: #039be5;'>
<div class="container">
<h2 style="margin-bottom: 0;">
<i class="nes-icon coin"></i>
Monthira Chayabanjonglerd
</h2>
</div>
</nav>
<div class="container" style="margin-bottom: 50px;">
<div class="row">
<div class="col">
<img
src="https://miro.medium.com/fit/c/262/262/0*cndEhB4IErmAl-Nn.?size=20"
style="width: auto; height: auto; image-rendering: pixelated;"/>
</div>
<div class="col-sm-9 col-xs-12">
<div class="nes-balloon from-left">
<p>Hello World! This is about me.<i class="nes-icon star"></i></p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="nes-container with-title">
<h3 class="title">Things I Do</h3>
<div class="div">
<div class="lists">
<ul class="nes-list is-circle" style="margin-bottom: 0px;">
<li>Android Developer (Kotlin, Java)</li>
<li style="margin-top: 10px;">Blogger/Content Creator</li>
<li style="margin-top: 10px;">Public Speaking</li>
</ul>
</div>
</div>
</div>
<div class="nes-container is-dark with-title" style="margin-top: 50px; margin-bottom: 50px;">
<h3 class="title">Noteworthies</h3>
<div class="div">
<i class="nes-icon is-small heart"></i>
<a href="https://www.mikkipastel.com">
Website
</a>
</div>
<div class="div">
<i class="nes-icon gmail is-small"></i>
<a href="mailto:hello@mikkipastel.com">Contract me</a><br>
</div>
</div>
<div class="nes-container with-title" style="margin-top: 50px; margin-bottom: 50px;">
<h3 class="title">My Socials</h3>
<div class="div">
<div class="lists">
<a href="https://www.facebook.com/mikkipastel">
<i class="nes-icon facebook"></i>
</a>
<a href="https://www.twitter.com/mikkipastel">
<i class="nes-icon twitter"></i>
</a>
<a href="https://www.instagram.com/mikkipastel">
<i class="nes-icon instagram"></i>
</a>
<a href="https://www.github.com/mikkipastel">
<i class="nes-icon github"></i>
</a>
<a href="https://medium.com/@minseobingsu">
<i class="nes-icon medium"></i>
</a>
<a href="https://www.youtube.com/c/mikkicoding">
<i class="nes-icon youtube"></i>
</a>
</div>
</div>
</div>
<div class="nes-container is-rounded is-dark" style="margin-top: 50px; margin-bottom: 50px;">
<i class="nes-icon trophy"></i> Award
<h6 style="margin-top: 10px;">Final round from Samart Innovation Award 2015</h6>
</div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12">
<h3 class="topic-title">
<i class="nes-icon star"></i> Previous Experience
</h3>
<div class="nes-container is-dark">
<div class="row">
<div class="col-xs-2">
<img
src="https://play-lh.googleusercontent.com/6I2IYbIg4rhGUgs0UxP_5q6wmJmlBjBrlQ9f0_FAN94yOzwmrtEteifCdPPd1-chY_NX"
style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"/>
</div>
<div class="col-xs-10">
<h3>TrueMoney</h3>
<p>Senior Engineer</p>
<h6>July 2022 - Present</h6>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-xs-2">
<img
src="https://img.ookbee.com/hr/images/logo/logoOokbeeU.png?size=20"
style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"/>
</div>
<div class="col-xs-10">
<h3>Ookbee U.</h3>
<p>Android Developer</p>
<h6>January 2019 - June 2022</h6>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-xs-2">
<img
src="https://www.fungjai.com/assets/img/fungjai_logo_white.png?size=20"
style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"/>
</div>
<div class="col-xs-10">
<h3>Fungjai</h3>
<p>Android Developer</p>
<h6>July 2017 - December 2018</h6>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-xs-2">
<img
src="https://github.com/BcRikko.png?size=20"
style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"/>
</div>
<div class="col-xs-10">
<h3>ThaiGerTec</h3>
<p>Test Engineer</p>
<h6>April 2013 - June 2017</h6>
</div>
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-xs-2">
<img
src="https://github.com/BcRikko.png?size=20"
style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"/>
</div>
<div class="col-xs-10">
<h3>TESA Hyper Camp 2012</h3>
<p>Trainee</p>
<h6>April 2012 - May 2012</h6>
</div>
</div>
</div>
<h3 class="topic-title" style="margin-top: 40px;">
<i class="nes-icon star"></i> Previous Education
</h3>
<div class="nes-container is-dark">
<div class="row">
<div class="col-xs-2">
<img
src="https://upload.wikimedia.org/wikipedia/commons/4/45/Mahidol_U.png?size=20"
style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"/>
</div>
<div class="col-xs-10">
<h3>Mahidol University</h3>
<p>Bachelor degree in Computer Engineering, Faculty of Engineering.</p>
<h6>Graduate Class of 2013</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: 50px; font-size: 60%;">
<div class="row">
<div class="col-xs-12" style="text-align: center; color: #ccc;">
© 2020 - MikkiPastel Studio
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.