index.html

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>NONTAWAT KB</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendor/devicons/css/devicons.min.css" rel="stylesheet">
    <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/resume.min.css" rel="stylesheet">

  </head>

  <body id="page-top">

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <span class="d-block d-lg-none">NONTAWAT KB</span>
        <span class="d-none d-lg-block">
          <img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="img/profile.jpg" alt="">
        </span>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">ข้อมูลส่วนตัว</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#education">การศึกษา</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#skills">ความสามารถ</a>
          </li>
          
         
        </ul>
      </div>
    </nav>

    <div class="container-fluid p-0">

      <section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
        <div class="my-auto">
            
          <h1 class="mb-0">NONTAWAT
            <span class="text-primary">KANBOON</span>
          </h1>
          <div class="subheading mb-5">50/1 ซ.สรรพสิทธิ์ 5 ถ.สรรพสิทธิ์ ต.ในเมือง อ.เมือง จ.อุบลราชธานี · 094-3083408 ·
            <a href="nontawat.ka.58@ubu.ac.th">nontawat.ka.58@ubu.ac.th</a>
          </div>
          <center>
            
          <h5 class="mb-0">  <p>ชื่อ : นายนลธวัช การบุญ</p>
          <p>ชื่อเล่น : โย</p>
          <p>วันเกิด : 21  พฤศจิกายน  2539</p>
           </b></h5></center>
          <ul class="list-inline list-social-icons mb-0">
            <li class="list-inline-item">
              <a href="https://www.facebook.com/yo.nontawat">
                <span class="fa-stack fa-lg">
                  
                  <img src="img/logos/fb.png" style="width:100px;height:100px;">
                  
                </span>
              </a>
            </li>
           
          </ul>
        </div>
      </section>


      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="education">
        <div class="my-auto">
          <h2 class="mb-5">การศึกษา</h2>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">
              <img src="img/logos/ubu.png" style="width:130px;height:130px;">
              &nbsp;&nbsp;&nbsp;
            <div class="resume-content mr-auto">
              <h3 class="mb-0">มหาวิทยาลัยอุบลราชธานี</h3>
              <div class="subheading mb-3">คณะวิทยาศาสตร์ สาขาวิทยาการคอมพิวเตอร์</div>
              
              <p>GPA: 4.00</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">สิงหาคม 2558 - พฤษภาคม 2562</span>
            </div>
          </div>

          <div class="resume-item d-flex flex-column flex-md-row mb-5">
              <img src="img/logos/tw.png" style="width:130px;height:130px;">
              &nbsp;&nbsp;&nbsp;
            <div class="resume-content mr-auto">
              <h3 class="mb-0">โรงเรียนตระกูลประเทืองวิทยาคม</h3>
              <div class="subheading mb-3">สาย วิทย์-คณิต</div>
              <p>GPA: 4.00</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">พฤษภาคม 2555 - มีนาคม 2558</span>
            </div>
          </div>

          <div class="resume-item d-flex flex-column flex-md-row">
              <img src="img/logos/bm.jpg" style="width:130px;height:130px;">
              &nbsp;&nbsp;&nbsp;
            <div class="resume-content mr-auto">
              <h3 class="mb-0">โรงเรียนเบ็ญจะมะมหาราช</h3>
              <div class="subheading mb-3">สาย วิทย์-คณิต</div>
              <p>GPA: 4.00</p>
            </div>
            <div class="resume-date text-md-right">
              <span class="text-primary">พฤษภาคม 2552 - มีนาคม 2555</span>
            </div>
          </div>

        </div>
      </section>

      <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="skills">
        <div class="my-auto">
          <h2 class="mb-5">ความสามารถ</h2>

          <div class="subheading mb-3">ภาษาโปรแกรมที่ใช้</div>
          <ul class="list-inline list-icons">
            <li class="list-inline-item">
              
              <img src="img/logos/java.png" style="width:200px;height:200px;">
              
            </li>
            <li class="list-inline-item">
              
              <img src="img/logos/c++.png" style="width:200px;height:200px;">
              
            </li>
            <li class="list-inline-item">
              
              <img src="img/logos/html.png" style="width:200px;height:200px;">
              
            </li>
            <li class="list-inline-item">
              
              <img src="img/logos/python.png" style="width:200px;height:200px;">
              
            </li>
            <li class="list-inline-item">
              
              <img src="img/logos/css.png" style="width:200px;height:200px;">
              
            </li>
            <li class="list-inline-item">
              
              <img src="img/logos/js.png" style="width:200px;height:200px;">
              
            </li>
            
            <li class="list-inline-item">
              
                <img src="img/logos/cc.png" style="width:200px;height:200px;">
                
              </li>

              <li class="list-inline-item">
              
                  <img src="img/logos/ag.png" style="width:200px;height:200px;">
                  
                </li>
          </ul>
        </div>
          
      </section>


    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/resume.min.js"></script>

  </body>

</html>