File: /home/suanchonac/domains/suanchon.ac.th/private_html/609/06449/iPortfolio/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>นายคณาธิป ป้อมเจา เลขที่ 3</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- =======================================================
* Template Name: iPortfolio
* Updated: May 30 2023 with Bootstrap v5.3.0
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Mobile nav toggle button ======= -->
<i class="bi bi-list mobile-nav-toggle d-xl-none"></i>
<!-- ======= Header ======= -->
<header id="header">
<div class="d-flex flex-column">
<div class="profile">
<img src="assets/img/profile-img.jpg" alt="" class="img-fluid rounded-circle">
<h1 class="text-light"><a href="index.html">Kanathip Pomjao</a></h1>
<div class="social-links mt-3 text-center">
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
</div>
</div>
<nav id="navbar" class="nav-menu navbar">
<ul>
<li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
<li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
<li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
<li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
<li><a href="#services" class="nav-link scrollto"><i class="bx bx-server"></i> <span>Services</span></a></li>
<li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex flex-column justify-content-center align-items-center">
<div class="hero-container" data-aos="fade-in">
<h1>Kanathip Pomjao</h1>
<p>I'm <span class="typed" data-typed-items="Musician, Composer, Pianist, snare drummer"></span></p>
</div>
</section><!-- End Hero -->
<main id="main">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title">
<h2>About</h2>
<p>I want to apply here because it is an institution that has art living here from here which is an institutional village where it is impossible to be challenged by music and art.</p>
</div>
<div class="row">
<div class="col-lg-4" data-aos="fade-right">
<img src="assets/img/profile-img.jpg" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left">
<h3>Composer & Musician</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
m
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Birthday:</strong> <span>30 April 2005</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Website:</strong> <span>oppobrandshop1515@gmail.com</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Phone:</strong> <span>0972277081</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>City:</strong> <span>chonburi,sriracha</span></li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-chevron-right"></i> <strong>Age:</strong> <span>17</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>Degree:</strong> <span>student</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>PhEmailone:</strong> <span>oppobrandshop1515@gmail.com</span></li>
<li><i class="bi bi-chevron-right"></i> <strong>School:</strong> <span>Suankularb Wittayalai Chonburi School</span></li>
</ul>
</div>
</div>
<p>I am always ready to learn new things and able to work under high pressure and learn quickly.
and ready to adapt to various situations</p>
<p> </p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills section-bg">
<div class="container">
<div class="section-title">
<h2>Skills</h2>
<p>100-75 means well done 74-50 means moderate 49-25 means done but not very well </p>
</div>
<div class="row skills-content">
<div class="col-lg-6" data-aos="fade-up">
<div class="progress">
<span class="skill">Drum Set <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Guitar <i class="val">60%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Percussions <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
<div class="progress">
<span class="skill">Bass <i class="val">40%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Voice <i class="val">50%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">fl studio <i class="val">65%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
<!-- ======= Resume Section ======= -->
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>Resume</h2>
<p>l am always ready to learn now things and to work under high pressure and iearn quickly.and ready to adapt to various situations.</p>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-up">
<h3 class="resume-title">สรุป</h3>
<div class="resume-item pb-0">
<h4>นายคณาธิป ป้อมเจา</h4>
<p><em>เกิดและโตที่ชลบุรี</em></p>
<ul>
<li>123/312 หมู่3 ต.บ่อวิน อ.ศรีราชา จ.ชลบุรี</li>
<li>0972277081</li>
<li>oppobrandshop1515@gmail.com</li>
</ul>
</div>
<h3 class="resume-title">การศึกษา</h3>
<div class="resume-item">
<h4>ประธมศึกษา</h4>
<h5>2554 - 2559</h5>
<p><em></em></p>
<p>สำเร็จารศึกษาระดับประธมต้นประธมปลายที่โรงเรียนบ้านห้วยปราบ</p>
</div>
<div class="resume-item">
<h4>มัธยมศึกษา</h4>
<h5>2560 - 2566</h5>
<p><em>สำเร็จการศึกษาชั้นมัธยมศึกษาที่โรงเรียนสวนกุหลาบวิทยาลัย ชลุรี กำลังศึกษาระดับชั้นมัธยมศึกษาตอนปลายที่โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี</em></p>
<p></p>
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
<h3 class="resume-title">ประสบการ์</h3>
<div class="resume-item">
<h4>ผลงาน2022 -2023</h4>
<h5></h5>
<p><em> </em></p>
<ul>
<li>รองชนะเลิสอันดับ3 ดนตรี กวี ศิลป์ 2565</li>
<li>เข้ารอบ10วง RSU 20 </li>
<li>งานต่อต้านยาเสพติดวัดราษฏร์นิยมธรรม รองชนะเลิศอันดับ2</li>
<li>เล่นเปิดวงLipta</li>
<li>เล่นคอนเสิร์ตที่โรงเรียน งานวันวิทยาศาสตร์</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End Resume Section -->
<!-- ======= Portfolio Section ======= -->
<section id="portfolio" class="portfolio section-bg">
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p></p>
</div>
<div class="row" data-aos="fade-up">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">กิจกรรม </li>
</ul>
</div>
</div>
<div class="row portfolio-container" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Web 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 2"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> </div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="App 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 1"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfolio-lightbox" title="Card 3"><i class="bx bx-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web"> </div>
</div>
</div>
</section><!-- End Portfolio Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title">
</div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials section-bg">
<div class="container">
<div class="section-title">
<h2>Testimonials</h2>
<p></p>
</div>
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="100">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
นายคณาธิป ป้อมเจา นักเรียนชั้นมัธยมศึกษาปีที่ 6 ห้อง 609 แผนการเรียนศิลปกรรม โรงเรียนสวนกุหลาบวิทยาลัย ชลบุรี เป็นผู้ที่มีความรู้ ความสามารถทางด้านของวิชาการ และด้านกิจกรรม มีความเอาใจใส่ในด้านของการเรียน ขยันหมั่นเพียร ใฝ่รู้ใฝ่เรียนมีความรับผิดชอบในงานที่ได้รับมอบหมาย อีกทั้งยังคอยช่วยเหลือกิจกรรมของโรงเรียนอย่างสม่ำเสมอ จนเป็นที่ยอมรับของอาจารย์และเพื่อน ๆ น้อง ๆ มีหน้าที่ในการปฏิบัติกิจกรรมทางด้านดนตรีสากล (เครื่องดนตรีเอกกลองชุด) ให้กับโรงเรียนอย่างสม่ำเสมอ เป็นเด็กนักเรียนที่มีจิตอาสา มีมนุษย์สัมพันธ์ดี โอบอ้อมอารี เอื้ออาทรต่อผู้อื่น เป็นที่รักใคร่ของอาจารย์และบุคคลใกล้ชิดตลอดมา
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
<h3>ประภากร กิตติยายาม</h3>
<h4>Designer</h4>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
นาย
นักเรียนชั้นมัธยมศึกษาปีที่ 609
โรงเรียนสวนกุหลาบวิทยาลัยชลบุรีเป็นนักเรียนที่มีเกียรติมีศักดิ์ศรีมีความน่ายกย่องในด้านต่างๆเป็นนักเรียนที่ร่าเริงแจ่มใสมีมารยาทที่ดีวางตัวเหมาะสมมีความขยันตั้งใจเรียนทำงานเป็นระบบรอบคอบมีระเบียบวินัยรับผิดชอบในงานที่ได้รับมอบหมาย
นักเรียนได้รับปฎิบัติหน้าที่ในด้านต่างๆที่โรงเรียนจัดกิจกรรมนักเรียนสามารถทำได้อย่างเต็มที่เต็มความสามารถ
เป็นที่รักของครูและเพื่อนเพื่อนตลอดจนรุ่นน้องในโรงเรียน
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
<h3>ชานนท์ พลูทวี</h3>
<h4>Store Owner</h4>
</div>
</div><!-- End testimonial item -->
<div class="swiper-slide">
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="300">
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
นายคณาธิป ป้อมเจา เรียกเล่นๆ มิ๊กซี่ 🩵 มิ๊กเป็นเด็กน่ารัก มีสัมมาคารวะ รู้จักเข้าหา บ่อยครั้งมักจะแสดงความเขินอายแบบเด็กชาย แต่ไม่เคยปฏิเสธการเรียนรู้เลย เป็นเด็กที่รับมือกับสถานการณ์ใหม่ๆ ได้ดี ที่สำคัญเขาเป็นที่มีความท้าทายให้ตนเองเสมอ ♥️ในฐานะครูผู้สอนข้าพเจ้ารู้สึกภาคภูมิใจอย่างมากที่เขาเติบโตมาได้อย่างดี
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
<h3>สิริชาญ นำมตรี</h3>
<h4>Freelancer</h4>
</div>
</div><!-- End testimonial item -->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section><!-- End Testimonials Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p> </p>
</div>
<div class="row" data-aos="fade-in">
<div class="col-lg-5 d-flex align-items-stretch">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>123/312 โครงการห้วยปราบเมืองทอง ต.บ่อวิน อ.ศรีราชา จ.ชลบุรี</p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>oppobrandshop1515@gmail.com</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>0972277081</p>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31096.222902228055!2d101.05623204669872!3d13.033897649952054!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3102c47340294d71%3A0x7fd7ee0a624f4b0a!2z4Lir4LmJ4Lin4Lii4Lib4Lij4Liy4Lia4LmA4Lih4Li34Lit4LiH4LiX4Lit4LiHIOC4leC4s-C4muC4pSDguJvguKXguKfguIHguYHguJTguIcg4Lit4Liz4LmA4Lig4Lit4Lio4Lij4Li14Lij4Liy4LiK4LiyIOC4o-C4sOC4ouC4reC4hyAyMDIzMA!5e0!3m2!1sth!2sth!4v1694579747296!5m2!1sth!2sth" width="100%" height="290Px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">Your Name</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">Your Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="form-group">
<label for="name">Subject</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">Message</label>
<textarea class="form-control" name="message" rows="10" required></textarea>
</div>
<div class="my-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>Kanathip Pomjao</span></strong>
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/ -->
Designed by <a href="https://bootstrapmade.com/">Kanathip Pomjao</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/typed.js/typed.umd.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>