<!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">
                            MikkiPastel Webblog
                        </a>
                    </div>
                    <div class="div">
                        <i class="nes-icon is-small star"></i>
                        <a href="https://mikkipastel.web.app">
                            MikkiPastel Portfolio
                        </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/user/sanaka2006">
                                <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://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 - Present</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;">
                &copy; 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.