TripleDNN

Current Directory: /home/webapp68.cm.in.th/u68319090003/Portfolio

File Name	Size	Actions
📁 .vscode	Folder	Edit \| Delete \| Rename \| Download
📁 css	Folder	Edit \| Delete \| Rename \| Download
📁 fonts	Folder	Edit \| Delete \| Rename \| Download
📁 images	Folder	Edit \| Delete \| Rename \| Download
📁 js	Folder	Edit \| Delete \| Rename \| Download
apple-touch-icon-114x114.png	2743 bytes	Edit \| Delete \| Rename \| Download
apple-touch-icon-72x72.png	1879 bytes	Edit \| Delete \| Rename \| Download
apple-touch-icon.png	1215 bytes	Edit \| Delete \| Rename \| Download
favicon.png	1214 bytes	Edit \| Delete \| Rename \| Download
index-2.html	18394 bytes	Edit \| Delete \| Rename \| Download
index.html	17906 bytes	Edit \| Delete \| Rename \| Download
project-detail.html	5546 bytes	Edit \| Delete \| Rename \| Download
tln.html	0 bytes	Edit \| Delete \| Rename \| Download

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

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

<div class="menu">
<span class="close-menu icon-cross2 right-boxed"></span>
<ul class="menu-list right-boxed">
<li data-menuanchor="page1">
<a href="#page1">Home</a>
</li>
<li data-menuanchor="page2">
<a href="#page2">About</a>
</li>
<li data-menuanchor="page3">
<a href="#page3">Resume</a>
</li>

<li data-menuanchor="page4">
<a href="#page4">Projects</a>
</li>
<li data-menuanchor="page5">
<a href="#page5">Testimonials</a>
</li>
<li data-menuanchor="page6">
<a href="#page6">New</a>
<li>
<li data-menuanchor="page7">
<a href="#page7">Contact</a>
</li>

</ul>
<div class="menu-footer right-boxed">
<div class="social-list">
<a href="#" class="icon ion-social-twitter"></a>
<a href="https://www.facebook.com/t.n.tn.197827?locale=th_TH" class="icon ion-social-facebook"></a>
<a href="#" class="icon ion-social-googleplus"></a>
<a href="#" class="icon ion-social-linkedin"></a>
<a href="#" class="icon ion-social-dribbble-outline"></a>
</div>
<div class="copy"><a href="templateshub.net">Templates Hub</a></div>
</div>
</div>

<header class="navbar boxed">
<div class="navbar-bg"></div>
<a class="brand" href="#">
<img class="brand-img" alt="" src="images/brand.png">
<div class="brand-info">
<div class="brand-name">Jatniphat</div>
<div class="brand-text">personal</div>
</div>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="contacts d-none d-md-block">
<div class="contact-item">
+66 63-123-2843
</div>
<div class="contact-item spacer">
/
</div>
<div class="contact-item">
<a href="http://paul-themes.com/cdn-cgi/l/email-protection#5b3834352f3a382f1b2934393e292f75383436"><span class="__cf_email__" data-cfemail="d0b3bfbea4b1b3a490a2bfb2b5a2a4feb3bfbd">[email&#160;protected]</span></a>
</div>
</div>
</header>
<div class="copy-bottom white boxed">© Jatniphat 2019.</div>
<div class="social-list social-list-bottom boxed">
<a href="#" class="icon ion-social-twitter"></a>
<a href="https://www.facebook.com/t.n.tn.197827?locale=th_TH" class="icon ion-social-facebook"></a>
<a href="#" class="icon ion-social-googleplus"></a>
<a href="#" class="icon ion-social-linkedin"></a>
<a href="#" class="icon ion-social-dribbble-outline"></a>
</div>
<div class="pagepiling">
<div data-anchor="page1" class="pp-scrollable text-white section section-1">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/bg/main11.jpg);"></div>
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title d-none d-lg-block"><span>Welcome</span></div>
<div class="boxed">
<div class="container">
<div class="intro">
<div class="row">
<div class="col-md-8 col-lg-6">
<p class="subtitle-top">Welcome To<br>Jatniphat Design Studio</p>
<h1 class="display-2 text-white"><span class="text-primary">Hello</span> I am<br> Jatniphat.</h1>
<a href="https://www.youtube.com/watch?v=A3g8Gh7GZKY&list=RDMMXJRkTyvoL4k&index=11" class="popup-youtube icon ion-ios-play"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-anchor="page2" class="pp-scrollable section section-2">
<div class="scroll-wrap">
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title text-white  d-none d-lg-block"><span>what I do</span></div>
<div class="boxed">
<div class="container">
<div class="intro">
<div class="row align-items-center">
<div class="col-xl-7">
<div class="experience-box pb-5">
<div class="experience-content">
<div class="experience-number text-texture">1</div><br class="d-block d-sm-none">
<div class="experience-info">Years<br>Experience<br>Working</div>
</div>
</div>
</div>
<div class="col-xl-5">
<h2 class="title-uppercase"> <span class="text-primary">the best</span> Websites around</h2>
Over the past four years, I have gained extensive experience in developing and maintaining various types of websites, including business websites, e-commerce platforms, and web applications. I am proficient in HTML, CSS, JavaScript, and frameworks such as React, Vue, and Laravel. I also have hands-on experience with databases like MySQL and MongoDB, as well as deploying websites using platforms such as VPS, cPanel, and GitHub Pages.

My skill set includes creating user-friendly interfaces, optimizing website performance, and troubleshooting technical issues efficiently. I work well with cross-functional teams including designers and content creators to ensure websites are functional, visually appealing, and aligned with client requirements.
<div class="progress-bars">
<div class="clearfix">
<div class="number float-left">Development</div>
<div class="number float-right">50%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="clearfix">
<div class="number float-left">WordPress</div>
<div class="number float-right">50%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-anchor="page3" class="pp-scrollable text-white section section-3">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/bg/resume.jpg);"></div>
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title d-none d-lg-block"><span>Resume</span></div>
<div class="boxed">
<div class="container">
<div class="intro">
<div class="row row-resume">
<div class="col-md-6">
<div class="col-resume">
<h4 class="title-uppercase">Education</h4>
<div class="resume-content">
<div class="resume-inner">
<div class="resume-row">
<h6 class="resume-type">Specialization course</h6>
<p class="resume-study">Technological College phayao</p>
<p class="resume-date text-primary">Jan 2021 - Dec 2024</p>
<p class="resume-text">It may be difficult at first but once you know how it works it becomes easier and I am trying my best to make it possible for me to do it.</p>
</div>
<div class="resume-row">
<h6 class="resume-type">Specialization course</h6>
<p class="resume-study">Technological College phayao</p>
<p class="resume-date text-primary">Jan 2021 - Dec 2024</p>
<p class="resume-text">It may be difficult at first but once you know how it works it becomes easier and I am trying my best to make it possible for me to do it.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-resume">
<h4 class="title-uppercase">Experience</h4>
<div class="resume-content">
<div class="resume-inner">
<div class="resume-row">
<h6 class="resume-type">Webdesigner & Front-end</h6>
<p class="resume-study">Phusang Subdistrict Administrative Organization</p>
<p class="resume-date text-primary">Jan 2021 - Dec 2024</p>
<p class="resume-text">It may be difficult at first but once you know how it works it becomes easier and I am trying my best to make it possible for me to do it.</p>
</div>
<div class="resume-row">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div data-anchor="page4" class="pp-scrollable text-white section section-4">
<div class="scroll-wrap">
<div class="bg-changer">
<div class="section-bg" style="background-image:url(images/bg/project1.jpg);"></div>
<div class="section-bg" style="background-image:url(images/bg/project2.jpg);"></div>
<div class="section-bg" style="background-image:url(images/bg/project3.jpg);"></div>
<div class="section-bg" style="background-image:url(images/bg/project4.jpg);"></div>
<div class="section-bg" style="background-image:url(images/bg/project5.jpg);"></div>
</div>
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title  d-none d-lg-block"><span>my works</span></div>
<div class="boxed">
<div class="container">
<div class="intro">
<div class="row">
 <div class="col-md-12">
<h2 class="title-uppercase text-white">LATEST PROJECTS</h2>
<div class="row-project-box row">
<div class="col-project-box col-sm-6 col-md-4 col-lg-4">
<a href="project-detail.html" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>
</div>
<div class="col-project-box col-sm-6 col-md-4 col-lg-4">
<a href="project-detail.html" class="project-box">
<div class="project-box-inner">
<h5>White<br>Bottle</h5>
<div class="project-category">2018 / BRANDING</div>
</div>
</a>
</div>
<div class="col-project-box col-sm-6 col-md-4 col-lg-4">
<a href="project-detail.html" class="project-box">
<div class="project-box-inner">
<h5>ICO Bottle<br> Opener</h5>
<div class="project-category">2017 / INTERACTION</div>
</div>
</a>
</div>
<div class="col-project-box col-sm-6 col-md-4 col-lg-4">
<a href="project-detail.html" class="project-box">
<div class="project-box-inner">
<h5>Rennovate<br> Toilet</h5>
<div class="project-category">2018 / BRANDING</div>
</div>
</a>
</div>
<div class="col-project-box col-sm-6 col-md-4 col-lg-4">
<a href="project-detail.html" class="project-box">
<div class="project-box-inner">
<h5>Bauhaus<br> studio</h5>
<div class="project-category">2017 / INTERACTION</div>
</div>
</a>
</div>
</div>
<a href="#" class="h5 link-arrow text-white">view all projects <i class="icon icon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-anchor="page5" class="pp-scrollable text-white section section-5">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/bg/reviews.jpg);"></div>
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title  d-none d-lg-block"><span>testimonials</span></div>
<div class="boxed">
<div class="container">
<div class="intro">
<div class="row">
<div class="col-lg-6">
<span class="icon-quote ion-quote"></span>
<div class="review-carousel owl-carousel">
<div class="review-carousel-item">
<div class="text">
<p>ME</p>
</div>
<div class="review-author">
<div class="author-name">ME</div>
<i>ME</i>
</div>
</div>
<div class="review-carousel-item">
<div class="text">
<p>ME</p>
</div>
<div class="review-author">
<div class="author-name">ME</div>
<i>ME</i>
</div>
</div>
<div class="review-carousel-item">
<div class="text">
<p>ME</p>
</div>
<div class="review-author">
<div class="author-name">ME</div>
<i>ME</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-anchor="page6" class="pp-scrollable text-white section section-6">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/bg/mage.jpg);"></div>
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title d-none d-lg-block"><span>HOBBY</span></div>
<div class="boxed">
<div class="container">
<div class="intro">
<div class="row row-resume">
<div class="col-md-6">
<div class="col-resume">
<h4 class="title-uppercase">HOBBY</h4>
<div class="resume-content">
<div class="resume-inner">
<div class="resume-row">
<h6 class="resume-type">HOBBY</h6>
<p class="resume-text">My Hobby: Drawing

Drawing is my favorite hobby. I enjoy using pencils, pens, and colors to create different kinds of art. When I draw, I feel relaxed and happy. It helps me express my thoughts and emotions without using words. Sometimes, I draw people, animals, or landscapes, and other times I use my imagination to create something new.

I usually draw in my free time, especially on weekends or after school. I also like to watch videos and learn new techniques to improve my skills. Drawing is not only fun, but it also helps me to focus and be more creative. I hope to become better at drawing and maybe even become an artist in the future.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div data-anchor="page7" class="pp-scrollable section section-7">
<div class="scroll-wrap">
<div class="section-bg" style="background-image:url(images/bg/contact.jpg);"></div>
<div class="scrollable-content">
<div class="vertical-centred">
<div class="boxed boxed-inner">
<div class="vertical-title text-white d-none d-lg-block"><span>contact</span></div>
<div class="boxed">
<div class="container">
<div class="intro overflow-hidden">
<div class="row">
<div class="col-md-6">
<h2 class="title-uppercase"><span class="text-primary">Phayao</span>,Thai</h2>
<h5 class="text-muted"></h5>
<section class="contact-address">
<h3><a class="mail" href="http://paul-themes.com/cdn-cgi/l/email-protection#41222e2f3520223501332e232433356f222e2c"> <span class="__cf_email__" data-cfemail="10737f7e6471736450627f727562643e737f7d">[email&#160;protected]</span></a></h3>
<h3><span class="phone">+66 63-123-2843</span></h3>
</section>
</div>
<div class="col-md-6">
<div class="contact-info">
<form class="js-form" novalidate="novalidate">
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="name" required="" placeholder="Name*" aria-required="true">
</div>
<div class="form-group col-sm-6">
<input type="email" required="" name="email" placeholder="Email*">
</div>
<div class="form-group col-sm-12">
<input type="text" name="subject" placeholder="Subject (Optinal)">
 </div>
<div class="form-group col-sm-12">
<textarea name="message" required="" placeholder="Message*"></textarea>
</div>
<div class="form-group form-group-message col-sm-12">
<span id="success" class="text-primary">Thank You, your message is successfully sent!</span>
<span id="error" class="text-primary">Sorry, something went wrong </span>
</div>
<div class="col-sm-12"><button type="submit" class="btn">Contact me</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</html>