File manager - Edit - /home/webapp69.cm.in.th/u69319090026/portfolio/69319090026/index.php
Back
<?php /** * Main Index Page for Han Portfolio * Contains sections: Hero, About, Education, Skills, Dreams, Portfolio Gallery, and Contact Form. * Also handles Contact Form POST submissions (both AJAX and standard postback). */ $alertMessage = ""; $alertClass = ""; // Handle Form POST Submission if ($_SERVER["REQUEST_METHOD"] === "POST") { // Sanitize and validate inputs $name = strip_tags(trim($_POST["name"] ?? '')); $email = filter_var(trim($_POST["email"] ?? ''), FILTER_VALIDATE_EMAIL); $message = strip_tags(trim($_POST["message"] ?? '')); $isAjax = isset($_POST["ajax"]) && $_POST["ajax"] === "1"; if (empty($name) || !$email || empty($message)) { $status = "error"; $msgText = "กรุณากรอกข้อมูลในฟอร์มให้ครบถ้วนและใช้อีเมลที่ถูกต้อง"; } else { // Save submission to a local JSON file (no SQL database needed) $submissionFile = __DIR__ . '/submissions.json'; $currentSubmissions = []; if (file_exists($submissionFile)) { $jsonContent = file_get_contents($submissionFile); $currentSubmissions = json_decode($jsonContent, true) ?? []; } // Add new message details $newSubmission = [ 'name' => $name, 'email' => $email, 'message' => $message, 'submitted_at' => date('Y-m-d H:i:s'), 'ip_address' => $_SERVER['REMOTE_ADDR'] ?? 'Unknown' ]; $currentSubmissions[] = $newSubmission; // Save back with lock to prevent concurrent write issues if (file_put_contents($submissionFile, json_encode($currentSubmissions, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE), LOCK_EX)) { $status = "success"; $msgText = "ส่งข้อความสำเร็จ! ขอบคุณสำหรับการติดต่อครับ ผมจะรีบตอบกลับโดยเร็วที่สุด"; } else { $status = "error"; $msgText = "เกิดข้อผิดพลาดทางเทคนิค ไม่สามารถบันทึกข้อความได้ในขณะนี้"; } } // Return AJAX response if requested if ($isAjax) { header('Content-Type: application/json; charset=utf-8'); echo json_encode(['status' => $status, 'message' => $msgText]); exit; } else { $alertMessage = $msgText; $alertClass = $status === "success" ? "success" : "error"; } } // Load Header template include_once 'includes/header.php'; ?> <!-- 1. Hero Section --> <section id="hero" class="hero-section"> <!-- Animated background shapes --> <div class="hero-bg-shapes"> <div class="bg-shape bg-shape-1"></div> <div class="bg-shape bg-shape-2"></div> </div> <div class="container"> <div class="row align-items-center gy-5"> <!-- Hero text details --> <div class="col-lg-7 text-center text-lg-start" data-aos="fade-right"> <span class="hero-subtitle">ยินดีต้อนรับสู่พอร์ตโฟลิโอของผม</span> <h1 class="hero-title"> สวัสดีครับ ผม <span class="name">นายหาญ</span><br> <span class="highlight font-monospace"><span class="typed-text"></span></span> </h1> <p class="typed-text-wrapper mb-4"> <span class="fs-5 text-secondary">" Dream • Create • Inspire "</span> </p> <div class="d-flex flex-wrap justify-content-center justify-content-lg-start gap-3"> <a href="#about" class="btn btn-gold"> <i class="fa-regular fa-user me-2"></i>ดูประวัติส่วนตัว </a> <a href="#contact" class="btn btn-outline-custom"> <i class="fa-regular fa-paper-plane me-2"></i>ติดต่อฉัน </a> <a href="https://www.youtube.com/@sevennine8624" target="_blank" class="btn btn-outline-custom text-danger border-danger-subtle"> <i class="fa-brands fa-youtube me-2"></i>YouTube </a> </div> </div> <!-- Profile image --> <div class="col-lg-5" data-aos="fade-left"> <div class="hero-image-wrapper"> <div class="hero-image-glow"></div> <div class="hero-img-container"> <img src="assets/images/profile.jpg" alt="นายหาญ" class="hero-profile-img"> </div> </div> </div> </div> </div> </section> <!-- 2. About Me Section --> <section id="about" class="section-padding"> <div class="container"> <div class="section-title-wrapper text-center"> <span class="section-subtitle">About Me</span> <h2 class="section-title">แนะนำตัว</h2> </div> <div class="row g-4 align-items-stretch"> <!-- Narrative Card --> <div class="col-lg-6" data-aos="fade-up"> <div class="glass-card about-desc-card d-flex flex-column justify-content-between"> <div> <h3 class="h4 fw-bold mb-3" style="color: var(--accent-gold);">ประวัติความเป็นมา</h3> <p class="lh-lg" style="text-indent: 30px;"> สวัสดีครับ ผมชื่อ <strong>นายหาญ</strong> ไม่มีนามสกุลครับ สาเหตุที่ไม่มีนามสกุล เพราะผมเป็นคน <strong>ไทยใหญ่ (ฉาน)</strong> พ่อและแม่พาอพยพเดินทางมาจากประเทศเมียนมาร์ และได้เข้ามาพึ่งพิงอาศัยอยู่ในผืนแผ่นดินไทยเป็นเวลานานกว่า 10 ปีแล้วครับ </p> <p class="lh-lg" style="text-indent: 30px;"> ปัจจุบันผมมีความมุ่งมั่นและตั้งใจอย่างสูงในการพัฒนาทักษะทางด้านเทคโนโลยีคอมพิวเตอร์ การวาดภาพดิจิทัล (Digital Art) ตลอดจนการผลิตและสร้างสรรค์สื่อดิจิทัลคอนเทนต์ต่าง ๆ เพื่อปูแนวทางเพื่อก้าวไปสู่การเป็น <strong>YouTuber</strong> และ <strong>สตรีมเมอร์ (Streamer)</strong> มืออาชีพในอนาคตอันใกล้ครับ </p> </div> <div class="mt-4 pt-3 border-top border-secondary-subtle"> <p class="mb-0 text-secondary italic">"ความฝันที่ชัดเจนและการเรียนรู้อย่างไม่หยุดยั้ง คือแรงขับเคลื่อนชีวิตของผม"</p> </div> </div> </div> <!-- Personal Info Card --> <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100"> <div class="glass-card h-100"> <h3 class="h4 fw-bold mb-4" style="color: var(--accent-gold);">ข้อมูลส่วนตัว</h3> <ul class="personal-info-list"> <li> <span class="info-title">วันเกิด</span> <span class="info-val">19 กันยายน 2546 (อายุ 22 ปี)</span> </li> <li> <span class="info-title">ที่อยู่</span> <span class="info-val">77 หมู่ 10 บ้านแม่ปาน ตำบลช่างเคิ่ง อำเภอแม่แจ่ม จังหวัดเชียงใหม่</span> </li> <li> <span class="info-title">โทรศัพท์</span> <span class="info-val"><a href="tel:0621562410">062-156-2410</a></span> </li> <li> <span class="info-title">อีเมล</span> <span class="info-val"><a href="mailto:paladinxx03@gmail.com">paladinxx03@gmail.com</a></span> </li> <li> <span class="info-title">Facebook</span> <span class="info-val"><a href="https://www.facebook.com/profile.php?id=100062402121703" target="_blank">หาญ ฯ’</a></span> </li> <li> <span class="info-title">YouTube</span> <span class="info-val"><a href="https://www.youtube.com/@sevennine8624" target="_blank">@sevennine8624</a></span> </li> </ul> </div> </div> </div> </div> </section> <!-- 3. Education Timeline Section --> <section id="education" class="section-padding" style="background-color: var(--bg-secondary); transition: background-color var(--transition-normal);"> <div class="container"> <div class="section-title-wrapper text-center"> <span class="section-subtitle">Education</span> <h2 class="section-title">ประวัติการศึกษา</h2> </div> <div class="row justify-content-center"> <div class="col-lg-8" data-aos="fade-up"> <div class="timeline-wrapper"> <!-- Timeline Item: Current --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <span class="timeline-year">ปัจจุบัน</span> <h3 class="timeline-title">วิทยาลัยเทคนิคเชียงใหม่</h3> <p class="timeline-institution">แผนกอิเล็กทรอนิกส์ สาขาวิชา เทคโนโลยีคอมพิวเตอร์</p> <span class="timeline-gpa"> <i class="fa-solid fa-book text-warning"></i> กำลังศึกษาอยู่ </span> </div> </div> <!-- Timeline Item 1 --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <span class="timeline-year">ประถมศึกษา</span> <h3 class="timeline-title">โรงเรียนบ้านแม่ปาน</h3> <p class="timeline-institution">อำเภอแม่แจ่ม จังหวัดเชียงใหม่</p> <span class="timeline-gpa"> <i class="fa-solid fa-graduation-cap text-warning"></i> เกรดเฉลี่ยสะสม (GPA): <strong>3.98</strong> </span> </div> </div> <!-- Timeline Item 2 --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <span class="timeline-year">มัธยมศึกษาตอนต้น</span> <h3 class="timeline-title">โรงเรียนราชประชานุเคราะห์ 31</h3> <p class="timeline-institution">โรงเรียนศึกษาสงเคราะห์ อำเภอแม่แจ่ม จังหวัดเชียงใหม่</p> <span class="timeline-gpa"> <i class="fa-solid fa-graduation-cap text-warning"></i> เกรดเฉลี่ยสะสม (GPA): <strong>3.98</strong> </span> </div> </div> <!-- Timeline Item 3 --> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <span class="timeline-year">มัธยมศึกษาตอนปลาย</span> <h3 class="timeline-title">สกร. ระดับอำเภอแม่แจ่ม</h3> <p class="timeline-institution">ส่งเสริมการเรียนรู้อำเภอแม่แจ่ม (กศน. เดิม)</p> <span class="timeline-gpa"> <i class="fa-solid fa-graduation-cap text-warning"></i> เกรดเฉลี่ยสะสม (GPA): <strong>3.45</strong> </span> </div> </div> </div> </div> </div> </div> </section> <!-- 4. Skills Section --> <section id="skills" class="section-padding"> <div class="container"> <div class="section-title-wrapper text-center"> <span class="section-subtitle">Skills</span> <h2 class="section-title">ความสามารถทางด้านเทคนิค</h2> </div> <div class="row g-5 align-items-center"> <!-- Skills list with bars --> <div class="col-lg-7" data-aos="fade-right"> <div class="glass-card"> <!-- Computer --> <div class="skill-bar-wrapper"> <div class="skill-info"> <span class="skill-name">Computer Skills (คอมพิวเตอร์ทั่วไป)</span> <span class="skill-stars"> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i> </span> </div> <div class="progress progress-custom"> <div class="progress-bar-custom" data-width="60"></div> </div> </div> <!-- Digital Art --> <div class="skill-bar-wrapper"> <div class="skill-info"> <span class="skill-name">Digital Art (วาดภาพดิจิทัล)</span> <span class="skill-stars"> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i> </span> </div> <div class="progress progress-custom"> <div class="progress-bar-custom" data-width="80"></div> </div> </div> </div> </div> <!-- Animated Stats Card --> <div class="col-lg-5" data-aos="fade-left"> <div class="row g-4"> <div class="col-6"> <div class="glass-card counter-box"> <div class="counter-num" data-target="10">0</div> <div class="counter-title">ปีที่อยู่ในไทย</div> </div> </div> <div class="col-6"> <div class="glass-card counter-box"> <div class="counter-num" data-target="4">0</div> <div class="counter-title">ประวัติการศึกษา</div> </div> </div> <div class="col-6"> <div class="glass-card counter-box"> <div class="counter-num" data-target="4">0</div> <div class="counter-title">เป้าหมาย & ความฝัน</div> </div> </div> <div class="col-6"> <div class="glass-card counter-box"> <div class="counter-num" data-target="2">0</div> <div class="counter-title">ทักษะความสามารถ</div> </div> </div> </div> </div> </div> </div> </section> <!-- 5. Dreams & Targets Section --> <section id="dreams" class="section-padding" style="background-color: var(--bg-secondary); transition: background-color var(--transition-normal);"> <div class="container"> <div class="section-title-wrapper text-center"> <span class="section-subtitle">My Future Goals</span> <h2 class="section-title">ความฝันและเป้าหมาย</h2> </div> <div class="row g-4"> <!-- YouTuber --> <div class="col-sm-6 col-lg-3" data-aos="fade-up"> <div class="glass-card dream-card"> <div class="dream-icon-wrapper"> <i class="fa-brands fa-youtube"></i> </div> <h3 class="dream-title">YouTuber</h3> <p class="dream-desc"> มุ่งมั่นทำช่องวิดีโอสร้างสรรค์เนื้อหาความบันเทิง เทคโนโลยี การทำคอนเทนต์ที่มีคุณภาพ และส่งต่อแรงบันดาลใจให้แก่ผู้ชม </p> </div> </div> <!-- Streamer --> <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="100"> <div class="glass-card dream-card"> <div class="dream-icon-wrapper"> <i class="fa-solid fa-gamepad"></i> </div> <h3 class="dream-title">Streamer</h3> <p class="dream-desc"> สร้างคอมมูนิตี้สตรีมมิ่งไลฟ์สด เล่นเกม และพูดคุยแลกเปลี่ยนความคิดเห็นกับเพื่อน ๆ คอยแบ่งปันรอยยิ้มและความสุขแบบเรียลไทม์ </p> </div> </div> <!-- Digital Artist --> <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="200"> <div class="glass-card dream-card"> <div class="dream-icon-wrapper"> <i class="fa-solid fa-palette"></i> </div> <h3 class="dream-title">Digital Artist</h3> <p class="dream-desc"> ฝึกฝนและสร้างสรรค์ผลงานภาพวาดแฟนอาร์ต ภาพวาดดิจิทัล สไตล์สองมิติ (2D Art) พัฒนาเอกลักษณ์และสร้างมูลค่าจากงานศิลปะ </p> </div> </div> <!-- Content Creator --> <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="300"> <div class="glass-card dream-card"> <div class="dream-icon-wrapper"> <i class="fa-solid fa-wand-magic-sparkles"></i> </div> <h3 class="dream-title">Content Creator</h3> <p class="dream-desc"> เขียนคอนเทนต์ ออกแบบกราฟิก และนำเสนอแนวคิดใหม่ ๆ ผ่านช่องทางออนไลน์ที่หลากหลายอย่างไร้ขีดจำกัด </p> </div> </div> </div> </div> </section> <!-- 6. Portfolio Gallery Section --> <section id="portfolio" class="section-padding"> <div class="container"> <div class="section-title-wrapper text-center"> <span class="section-subtitle">Creative Works</span> <h2 class="section-title">ผลงานของผม</h2> </div> <!-- Filter Tabs (For future extension / styling) --> <div class="text-center mb-5" data-aos="fade-up"> <button class="gallery-filter-btn active">ทั้งหมด (All)</button> <a href="https://www.youtube.com/@sevennine8624" target="_blank" class="btn btn-outline-danger ms-2 btn-sm rounded-pill px-3"> <i class="fa-brands fa-youtube me-2"></i>เปิดช่อง YouTube </a> </div> <!-- Gallery Grid --> <div class="row g-4" data-aos="fade-up"> <!-- Gallery Item 1 --> <div class="col-md-6 col-lg-4"> <div class="gallery-item-wrapper"> <img src="assets/images/profile.jpg" alt="ผลงานที่ 1 - รูปประจำตัวและตัวตน" class="gallery-img" loading="lazy"> <div class="gallery-overlay"> <h4 class="gallery-title">นายหาญ (Profile Banner)</h4> <span class="gallery-category">รูปประจำตัว / อัตลักษณ์</span> <a href="assets/images/profile.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="รูปประจำตัวและอัตลักษณ์หลักของ นายหาญ (Han)"> <i class="fa-solid fa-up-right-and-down-left-from-center"></i> </a> </div> </div> </div> <!-- Gallery Item 2 --> <div class="col-md-6 col-lg-4"> <div class="gallery-item-wrapper"> <img src="assets/images/art1.jpg" alt="ผลงานภาพวาดดิจิทัล 1" class="gallery-img" loading="lazy"> <div class="gallery-overlay"> <h4 class="gallery-title">Fantasy Landscape</h4> <span class="gallery-category">Digital Art / วาดภาพ</span> <a href="assets/images/art1.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="ผลงานภาพวาดธรรมชาติสไตล์แฟนตาซีแนวอนิเมะ"> <i class="fa-solid fa-up-right-and-down-left-from-center"></i> </a> </div> </div> </div> <!-- Gallery Item 3 --> <div class="col-md-6 col-lg-4"> <div class="gallery-item-wrapper"> <img src="assets/images/art2.jpg" alt="ผลงานภาพวาดดิจิทัล 2" class="gallery-img" loading="lazy"> <div class="gallery-overlay"> <h4 class="gallery-title">Character Illustration</h4> <span class="gallery-category">Digital Art / คอนเซปต์อาร์ต</span> <a href="assets/images/art2.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="ผลงานวาดภาพตัวละครแนวแฟนตาซีพร้อมแสงเงาสมจริง"> <i class="fa-solid fa-up-right-and-down-left-from-center"></i> </a> </div> </div> </div> <!-- Gallery Item 4 --> <div class="col-md-6 col-lg-4"> <div class="gallery-item-wrapper"> <img src="assets/images/art3.jpg" alt="ผลงานภาพวาดดิจิทัล 3" class="gallery-img" loading="lazy"> <div class="gallery-overlay"> <h4 class="gallery-title">Cozy Setup Art</h4> <span class="gallery-category">Digital Art / แนว Lo-Fi</span> <a href="assets/images/art3.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="ผลงานจำลองห้องคอมพิวเตอร์สตรีมเมอร์ในบรรยากาศ Lo-Fi สุดอบอุ่น"> <i class="fa-solid fa-up-right-and-down-left-from-center"></i> </a> </div> </div> </div> </div> </div> </section> <!-- 7. Contact Section --> <section id="contact" class="section-padding" style="background-color: var(--bg-secondary); transition: background-color var(--transition-normal);"> <div class="container"> <div class="section-title-wrapper text-center"> <span class="section-subtitle">Get in Touch</span> <h2 class="section-title">ติดต่อผม</h2> </div> <div class="row g-5 align-items-stretch"> <!-- Contact Channels (Left Column) --> <div class="col-lg-5" data-aos="fade-right"> <div class="glass-card contact-info-card d-flex flex-column justify-content-between"> <div> <h3 class="h4 fw-bold mb-4" style="color: var(--accent-gold);">ช่องทางการติดต่อ</h3> <!-- Phone --> <div class="contact-info-item"> <div class="contact-icon-box"> <i class="fa-solid fa-phone"></i> </div> <div class="contact-info-text"> <h6>เบอร์โทรศัพท์</h6> <p><a href="tel:0621562410">062-156-2410</a></p> </div> </div> <!-- Email --> <div class="contact-info-item"> <div class="contact-icon-box"> <i class="fa-solid fa-envelope"></i> </div> <div class="contact-info-text"> <h6>อีเมล</h6> <p><a href="mailto:paladinxx03@gmail.com">paladinxx03@gmail.com</a></p> </div> </div> <!-- Facebook --> <div class="contact-info-item"> <div class="contact-icon-box"> <i class="fa-brands fa-facebook"></i> </div> <div class="contact-info-text"> <h6>Facebook</h6> <p><a href="https://www.facebook.com/profile.php?id=100062402121703" target="_blank">หาญ ฯ’</a></p> </div> </div> <!-- Address --> <div class="contact-info-item"> <div class="contact-icon-box"> <i class="fa-solid fa-map-location-dot"></i> </div> <div class="contact-info-text"> <h6>ที่อยู่เพื่อส่งเอกสาร</h6> <p>77 หมู่ 10 บ้านแม่ปาน ต.ช่างเคิ่ง อ.แม่แจ่ม จ.เชียงใหม่</p> </div> </div> </div> <div class="mt-4 pt-3 border-top border-secondary-subtle"> <h5 class="h6 fw-bold mb-2">ติดตามผลงานของผม</h5> <p class="small text-secondary mb-0">คุณสามารถส่งอีเมลหาผมโดยตรง หรือเขียนส่งข้อความผ่านทางฟอร์มส่งข้อมูลขวามือนี้ได้ทันที!</p> </div> </div> </div> <!-- Contact Form (Right Column) --> <div class="col-lg-7" data-aos="fade-left"> <div class="glass-card"> <h3 class="h4 fw-bold mb-4" style="color: var(--accent-gold);">ส่งข้อความหาผม</h3> <!-- Alert Message Indicator --> <div id="formAlert" class="form-alert <?php echo $alertClass; ?>"> <?php echo $alertMessage; ?> </div> <form id="contactForm" method="POST" action="index.php"> <div class="form-group-custom"> <label for="name" class="form-label small fw-semibold text-secondary">ชื่อผู้ติดต่อ / หน่วยงาน *</label> <input type="text" class="form-control-custom" id="name" name="name" required placeholder="กรอกชื่อของคุณที่นี่"> </div> <div class="form-group-custom"> <label for="email" class="form-label small fw-semibold text-secondary">ที่อยู่อีเมลของคุณ *</label> <input type="email" class="form-control-custom" id="email" name="email" required placeholder="example@domain.com"> </div> <div class="form-group-custom"> <label for="message" class="form-label small fw-semibold text-secondary">ข้อความรายละเอียด *</label> <textarea class="form-control-custom" id="message" name="message" required placeholder="พิมพ์ข้อความของคุณที่นี่..."></textarea> </div> <button type="submit" class="btn btn-gold w-100 py-3"> <i class="fa-regular fa-paper-plane me-2"></i>ส่งข้อความหาผม </button> </form> </div> </div> </div> </div> </section> <?php // Load Footer template include_once 'includes/footer.php'; ?>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.37 |
proxy
|
phpinfo
|
Settings