File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090044/Portfolio/index.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Marisa Wongyat \| Portfolio - แฟ้มสะสมผลงาน</title> <meta name="description" content="แฟ้มสะสมผลงานของ มริษา วงศ์ญาติ (เเนน) นักศึกษา ปวส. เทคโนโลยีคอมพิวเตอร์ สาขาอิเล็กทรอนิกส์"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> /* =================================================== DESIGN SYSTEM CSS VARIABLES =================================================== / :root { --primary-color: #2b3e50; --secondary-color: #17a2b8; --accent-color: #4f9da6; --bg-light: #f8f9fa; --bg-white: #ffffff; --text-dark: #2d3748; --text-muted: #718096; --transition-speed: 0.3s; --font-main: 'Sarabun', 'Inter', sans-serif; --hero-grad-start: #ffffff; --hero-grad-end: #eef5f7; } / =================================================== THEMES =================================================== / [data-theme="ocean"] { --primary-color: #2b3e50; --secondary-color: #17a2b8; --accent-color: #4f9da6; --bg-light: #f8f9fa; --bg-white: #ffffff; --text-dark: #2d3748; --text-muted: #718096; --hero-grad-start: #ffffff; --hero-grad-end: #eef5f7; } [data-theme="midnight"] { --primary-color: #3b2568; --secondary-color: #9b59b6; --accent-color: #7d3cac; --bg-light: #f5f3fb; --bg-white: #ffffff; --text-dark: #2d2640; --text-muted: #7a6d9e; --hero-grad-start: #fdfcff; --hero-grad-end: #ede8f8; } [data-theme="rose"] { --primary-color: #7b3a52; --secondary-color: #e06c87; --accent-color: #d4697e; --bg-light: #fdf4f6; --bg-white: #ffffff; --text-dark: #3d2030; --text-muted: #9e7080; --hero-grad-start: #fff8fa; --hero-grad-end: #fce8ed; } [data-theme="forest"] { --primary-color: #1e4d3b; --secondary-color: #27ae60; --accent-color: #2ecc71; --bg-light: #f3faf5; --bg-white: #ffffff; --text-dark: #1a3028; --text-muted: #5e8870; --hero-grad-start: #f8fffa; --hero-grad-end: #e6f5eb; } [data-theme="sunset"] { --primary-color: #7c3a00; --secondary-color: #e67e22; --accent-color: #f0955a; --bg-light: #fdf6f0; --bg-white: #ffffff; --text-dark: #3d2010; --text-muted: #9e7050; --hero-grad-start: #fffaf5; --hero-grad-end: #fde8d0; } [data-theme="sky"] { --primary-color: #1a3a5c; --secondary-color: #3498db; --accent-color: #5dade2; --bg-light: #f0f6fd; --bg-white: #ffffff; --text-dark: #1a2a3c; --text-muted: #5a7898; --hero-grad-start: #f5faff; --hero-grad-end: #ddeefa; } [data-theme="cherry"] { --primary-color: #6b2737; --secondary-color: #ff6b9d; --accent-color: #ff9dbd; --bg-light: #fff0f5; --bg-white: #ffffff; --text-dark: #3d1520; --text-muted: #9e6070; --hero-grad-start: #fff6fa; --hero-grad-end: #ffe0ec; } [data-theme="dark"] { --primary-color: #e2e8f0; --secondary-color: #64b5f6; --accent-color: #81d4fa; --bg-light: #1a1a2e; --bg-white: #16213e; --text-dark: #e2e8f0; --text-muted: #94a3b8; --hero-grad-start: #0f3460; --hero-grad-end: #16213e; } / =================================================== BASE STYLES =================================================== / , ::before, ::after { box-sizing: border-box; } body { font-family: var(--font-main); color: var(--text-dark); background-color: var(--bg-light); line-height: 1.6; overflow-x: hidden; scroll-behavior: smooth; transition: background-color 0.5s ease, color 0.5s ease; } /* =================================================== NAVBAR =================================================== / .navbar { background-color: rgba(255,255,255,0.9); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all var(--transition-speed) ease; } [data-theme="dark"] .navbar { background-color: rgba(22,33,62,0.92) !important; } .navbar-brand { font-weight: 700; color: var(--primary-color) !important; letter-spacing: 1px; } .nav-link { font-weight: 500; color: var(--text-dark) !important; margin-left: 15px; position: relative; transition: color var(--transition-speed); } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: var(--secondary-color); transition: width var(--transition-speed); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover { color: var(--secondary-color) !important; } / =================================================== HERO SECTION =================================================== / .hero-section { padding-top: 130px; padding-bottom: 90px; background: linear-gradient(135deg, var(--hero-grad-start) 0%, var(--hero-grad-end) 100%); min-height: 90vh; display: flex; align-items: center; transition: background 0.5s ease; } .hero-title { font-size: 2.8rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; } .hero-subtitle { font-size: 1.3rem; color: var(--secondary-color); font-weight: 600; margin-bottom: 1.5rem; } .hero-desc { color: var(--text-muted); max-width: 550px; margin-bottom: 2rem; font-size: 1.05rem; } .btn-custom-primary { background-color: var(--primary-color); color: #fff; font-weight: 500; padding: 10px 24px; border-radius: 30px; border: 2px solid var(--primary-color); transition: all var(--transition-speed); box-shadow: 0 4px 15px rgba(43,62,80,0.2); } .btn-custom-primary:hover { background-color: transparent; color: var(--primary-color); transform: translateY(-3px); } .btn-custom-outline { background-color: transparent; color: var(--primary-color); font-weight: 500; padding: 10px 24px; border-radius: 30px; border: 2px solid var(--primary-color); transition: all var(--transition-speed); margin-left: 10px; } .btn-custom-outline:hover { background-color: var(--primary-color); color: #fff; transform: translateY(-3px); } .hero-image-wrapper { position: relative; display: inline-block; } .hero-image { width: 280px; height: 370px; object-fit: cover; object-position: center top; border-radius: 20px; border: 6px solid rgba(255,255,255,0.95); box-shadow: 0 15px 40px rgba(0,0,0,0.15), 0 0 0 4px rgba(23,162,184,0.2); position: relative; z-index: 2; transition: transform 0.4s ease, box-shadow 0.4s ease; } .hero-image:hover { transform: scale(1.03); box-shadow: 0 20px 50px rgba(0,0,0,0.2), 0 0 0 6px rgba(23,162,184,0.35); } .hero-circle-bg { position: absolute; width: 290px; height: 380px; border-radius: 24px; background: linear-gradient(45deg, var(--secondary-color), var(--primary-color)); top: -6px; left: -6px; z-index: 1; opacity: 0.65; animation: rotateBg 6s ease-in-out infinite alternate; transition: background 0.5s ease; } @keyframes rotateBg { 0% { transform: scale(1) translateY(0px); } 100% { transform: scale(1.02) translateY(-4px); } } / =================================================== SECTIONS COMMON =================================================== / section { padding: 90px 0; } .section-title { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); text-align: center; margin-bottom: 10px; position: relative; } .section-title::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--secondary-color); margin: 15px auto 40px; border-radius: 2px; } / =================================================== ABOUT SECTION =================================================== / .about-card { background-color: var(--bg-white); border-radius: 15px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); height: 100%; transition: background-color 0.5s ease; } .timeline { border-left: 2px solid var(--accent-color); padding-left: 25px; position: relative; margin-left: 10px; } .timeline-item { position: relative; margin-bottom: 25px; } .timeline-item::before { content: ''; position: absolute; width: 14px; height: 14px; background-color: var(--accent-color); border: 3px solid var(--bg-white); border-radius: 50%; left: -33px; top: 5px; } .timeline-year { font-weight: 700; color: var(--secondary-color); font-size: 0.95rem; margin-bottom: 2px; } .timeline-school { font-weight: 600; color: var(--primary-color); margin-bottom: 2px; } .timeline-major { font-size: 0.9rem; color: var(--text-muted); } .resume-card { background: linear-gradient(135deg, var(--primary-color) 0%, #1a2a3a 100%); color: #fff; border-radius: 15px; padding: 40px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 10px 25px rgba(43,62,80,0.15); transition: background 0.5s ease; } .resume-icon { font-size: 3rem; color: var(--secondary-color); margin-bottom: 20px; } .btn-resume { background-color: var(--secondary-color); color: #fff; font-weight: 500; padding: 10px 25px; border-radius: 30px; border: none; transition: all var(--transition-speed); margin-top: 15px; } .btn-resume:hover { background-color: #fff; color: var(--primary-color); transform: scale(1.05); } / =================================================== FLOATING ACTION BUTTONS =================================================== / #fab-group { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .fab-btn { width: 52px; height: 52px; border-radius: 50%; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .fab-btn:hover { transform: scale(1.12); box-shadow: 0 10px 28px rgba(0,0,0,0.35); } #bg-changer-btn { background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); } #theme-changer-btn { background: linear-gradient(135deg, #9b59b6, #e67e22); } .fab-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.75); color: #fff; font-size: 0.78rem; white-space: nowrap; padding: 4px 10px; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .fab-btn:hover .fab-tooltip { opacity: 1; } / Panels / .fab-panel { position: fixed; bottom: 100px; right: 30px; z-index: 9998; background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); border-radius: 20px; padding: 22px; width: 300px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); border: 1px solid rgba(23,162,184,0.15); display: none; animation: panelFadeIn 0.25s ease; } [data-theme="dark"] .fab-panel { background: rgba(22,33,62,0.97); border-color: rgba(100,181,246,0.2); } .fab-panel.show { display: block; } @keyframes panelFadeIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .fab-panel h6 { font-weight: 700; color: var(--primary-color); font-size: 0.92rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } / =================================================== THEME PANEL =================================================== / .theme-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 4px; } .theme-swatch { aspect-ratio: 1; border-radius: 12px; cursor: pointer; border: 3px solid transparent; position: relative; overflow: hidden; transition: transform 0.2s, border-color 0.2s; box-shadow: 0 3px 10px rgba(0,0,0,0.12); } .theme-swatch:hover { transform: scale(1.1); } .theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 3px var(--secondary-color); } .swatch-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.2s; } .theme-swatch.active .swatch-check { opacity: 1; } .swatch-label { position: absolute; bottom: 0; left: 0; right: 0; font-size: 0.6rem; font-weight: 700; text-align: center; color: #fff; background: rgba(0,0,0,0.4); padding: 3px 2px; line-height: 1.2; } .swatch-ocean { background: linear-gradient(135deg, #2b3e50, #17a2b8); } .swatch-midnight { background: linear-gradient(135deg, #3b2568, #9b59b6); } .swatch-rose { background: linear-gradient(135deg, #7b3a52, #e06c87); } .swatch-forest { background: linear-gradient(135deg, #1e4d3b, #27ae60); } .swatch-sunset { background: linear-gradient(135deg, #7c3a00, #e67e22); } .swatch-sky { background: linear-gradient(135deg, #1a3a5c, #3498db); } .swatch-cherry { background: linear-gradient(135deg, #6b2737, #ff6b9d); } .swatch-dark { background: linear-gradient(135deg, #0f0f23, #2c2c54); } .theme-active-label { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; font-weight: 600; min-height: 1.2em; } / =================================================== BG CHANGER PANEL =================================================== / #bg-drop-zone { border: 2px dashed rgba(23,162,184,0.5); border-radius: 14px; padding: 22px 12px; text-align: center; cursor: pointer; background: linear-gradient(135deg, #f0fbfd 0%, #eef5f7 100%); transition: border-color 0.2s, background 0.2s; margin-bottom: 14px; } [data-theme="dark"] #bg-drop-zone { background: linear-gradient(135deg, #0f2040 0%, #1a2a4a 100%); } #bg-drop-zone:hover, #bg-drop-zone.drag-over { border-color: var(--secondary-color); background: linear-gradient(135deg, #d8f3f8 0%, #c9e8ef 100%); } #bg-drop-zone i { font-size: 2rem; color: var(--secondary-color); margin-bottom: 8px; display: block; } #bg-drop-zone p { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.5; } #bg-drop-zone span { color: var(--secondary-color); font-weight: 600; } #bg-file-input { display: none; } #bg-opacity-label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); display: flex; justify-content: space-between; margin-bottom: 6px; } #bg-opacity-slider { width: 100%; accent-color: var(--secondary-color); } #bg-reset-btn { width: 100%; padding: 9px; border-radius: 30px; border: 2px solid #e2e8f0; background: transparent; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; } #bg-reset-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(43,62,80,0.05); } #bg-preview-wrap { display: none; margin-bottom: 12px; } #bg-preview-img { width: 100%; height: 90px; object-fit: cover; border-radius: 10px; border: 2px solid rgba(23,162,184,0.3); } #bg-preview-label { font-size: 0.75rem; color: var(--secondary-color); font-weight: 600; margin-bottom: 6px; display: block; } / BG Overlay / #bg-overlay { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; background-attachment: fixed; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } body.has-bg-image #bg-overlay { opacity: var(--bg-opacity, 1); } body.has-bg-image { background-color: transparent !important; } body.has-bg-image .navbar, body.has-bg-image header, body.has-bg-image main, body.has-bg-image footer { position: relative; z-index: 1; } body.has-bg-image .hero-section { background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(238,245,247,0.88) 100%); } body.has-bg-image .about-section, body.has-bg-image .contact-section { background: rgba(248,249,250,0.9); } [data-theme="dark"] body.has-bg-image .hero-section { background: linear-gradient(135deg, rgba(15,52,96,0.88) 0%, rgba(22,33,62,0.88) 100%); } / =================================================== CONTACT SECTION =================================================== / .contact-icon-box { background: var(--bg-light); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.5s; } / =================================================== FOOTER =================================================== / footer { background-color: var(--primary-color); color: rgba(255,255,255,0.8); padding: 40px 0; font-size: 0.95rem; transition: background-color 0.5s ease; } .footer-logo { font-weight: 700; color: #fff; font-size: 1.3rem; margin-bottom: 10px; } .social-links a { color: rgba(255,255,255,0.7); font-size: 1.2rem; margin: 0 10px; transition: color var(--transition-speed); } .social-links a:hover { color: var(--secondary-color); } / =================================================== RESPONSIVE =================================================== / @media (max-width: 991px) { .hero-section { text-align: center; padding-top: 120px; padding-bottom: 60px; } .hero-desc { margin: 0 auto 2rem; } .hero-image-wrapper { margin-top: 40px; } .hero-image { width: 220px; height: 290px; } .hero-circle-bg { width: 230px; height: 300px; } .btn-custom-outline { margin-left: 0; margin-top: 10px; } } @media (max-width: 576px) { #fab-group { bottom: 20px; right: 16px; } .fab-panel { width: calc(100vw - 32px); right: 16px; bottom: 90px; } } </style> </head> <body data-bs-spy="scroll" data-bs-target="#navbarNav" data-bs-offset="100" data-theme="ocean"> <!-- BG Overlay --> <div id="bg-overlay"></div> <!-- ============================================= NAVBAR ============================================= --> <nav class="navbar navbar-expand-lg fixed-top navbar-light" id="mainNavbar"> <div class="container"> <a class="navbar-brand" href="#home"> <i class="fa-solid fa-laptop-code me-2"></i>MARISA.W </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link active" href="#home">หน้าแรก</a></li> <li class="nav-item"><a class="nav-link" href="#about">เกี่ยวกับฉัน</a></li> <li class="nav-item"><a class="nav-link" href="#contact">ติดต่อฉัน</a></li> </ul> </div> </div> </nav> <!-- ============================================= HERO SECTION ============================================= --> <header id="home" class="hero-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7 text-lg-start text-center"> <span class="badge px-3 py-2 text-uppercase mb-3" style="background-color:rgba(23,162,184,0.15); color:var(--secondary-color); font-weight:600; font-size:0.85rem;"> ยินดีต้อนรับเข้าสู่แฟ้มผลงาน </span> <h1 class="hero-title">สวัสดีค่ะ, ฉันชื่อ <br> <span style="color:var(--secondary-color);">มริษา วงศ์ญาติ</span> (เเนน) </h1> <p class="hero-subtitle">นักศึกษา ปวส. เทคโนโลยีคอมพิวเตอร์ (แผนกอิเล็กทรอนิกส์)</p> <p class="hero-desc"> มุ่งมั่นพัฒนาทักษะด้านวงจรอิเล็กทรอนิกส์และเทคโนโลยีคอมพิวเตอร์ มีความสนใจเป็นพิเศษในการเขียนซอฟต์แวร์ควบคุมและการประยุกต์ใช้งานเทคโนโลยี IoT เพื่อสร้างสรรค์ระบบอัจฉริยะที่อำนวยความสะดวกในชีวิตจริง </p> <div class="d-flex flex-column flex-sm-row justify-content-lg-start justify-content-center align-items-center gap-3"> <a href="#about" class="btn btn-custom-primary text-decoration-none"> <i class="fa-regular fa-user me-2"></i>เกี่ยวกับฉัน </a> <a href="mailto:marisawongyat2538@gmail.com" class="btn btn-custom-outline text-decoration-none m-0"> <i class="fa-regular fa-envelope me-2"></i>ส่งอีเมลหาฉัน </a> </div> </div> <div class="col-lg-5 text-center"> <div class="hero-image-wrapper"> <div class="hero-circle-bg"></div> <img src="marisa_photo.jpg" alt="Marisa Wongyat" class="hero-image"> </div> </div> </div> </div> </header> <main> <!-- ============================================= ABOUT SECTION ============================================= --> <section id="about" class="about-section"> <div class="container"> <h2 class="section-title">เกี่ยวกับฉัน</h2> <div class="row g-4"> <!-- ข้อมูลส่วนตัว --> <div class="col-lg-6"> <div class="about-card"> <h3 class="h4 mb-4" style="font-weight:700; color:var(--primary-color);"> <i class="fa-regular fa-user me-2 text-info"></i>ข้อมูลส่วนตัว </h3> <p class="mb-4"> ฉันชื่อ <strong>นางสาว มริษา วงศ์ญาติ</strong> หรือเรียกว่า <strong>เเนน</strong> กำลังศึกษาต่อในระดับ ปวส. สาขาวิชาอิเล็กทรอนิกส์ แผนกเทคโนโลยีคอมพิวเตอร์ มีพื้นฐานภาษาและทัศนคติที่เปิดรับจากการเรียนศิลป์ภาษาในระดับมัธยมศึกษา ปัจจุบันมุ่งเน้นการพัฒนาทักษะวิชาชีพทางด้านเทคโนโลยีคอมพิวเตอร์ ฮาร์ดแวร์ และการเขียนโปรแกรมพื้นฐาน </p> <div class="row pt-2 g-3"> <div class="col-sm-6"> <p class="mb-2"><strong><i class="fa-solid fa-chevron-right text-info me-2"></i>ชื่อเล่น:</strong> เเนน</p> <p class="mb-2"><strong><i class="fa-solid fa-chevron-right text-info me-2"></i>ระดับการศึกษา:</strong> ปวส.</p> </div> <div class="col-sm-6"> <p class="mb-2"><strong><i class="fa-solid fa-chevron-right text-info me-2"></i>อีเมล:</strong> <a href="mailto:marisawongyat2538@gmail.com" class="text-decoration-none" style="color:var(--text-dark);">marisawongyat2538@gmail.com</a> </p> <p class="mb-2"><strong><i class="fa-solid fa-chevron-right text-info me-2"></i>สายงานที่สนใจ:</strong> IoT & Computer Tech</p> </div> </div> </div> </div> <!-- ประวัติการศึกษา --> <div class="col-lg-3 col-md-6"> <div class="about-card"> <h3 class="h4 mb-4" style="font-weight:700; color:var(--primary-color);"> <i class="fa-solid fa-graduation-cap me-2 text-info"></i>ประวัติการศึกษา </h3> <div class="timeline"> <div class="timeline-item"> <div class="timeline-year">ปัจจุบัน</div> <div class="timeline-school">วิทยาลัยเทคนิค/วิทยาลัยการอาชีพ</div> <div class="timeline-major">ปวส. สาขาอิเล็กทรอนิกส์ แผนกเทคโนโลยีคอมพิวเตอร์</div> </div> <div class="timeline-item"> <div class="timeline-year">จบมัธยมปลาย</div> <div class="timeline-school">โรงเรียนฝางชนูปถัมภ์</div> <div class="timeline-major">สาย ศิลป์ภาษา อังกฤษ - จีน</div> </div> </div> </div> </div> <!-- Resume --> <div class="col-lg-3 col-md-6"> <div class="resume-card"> <div class="resume-icon"><i class="fa-regular fa-file-pdf"></i></div> <h3 class="h5 mb-2" style="font-weight:700;">แฟ้มประวัติส่วนตัว</h3> <p class="small text-light opacity-75 mb-3">ดาวน์โหลด Resume ฉบับสมบูรณ์ (รูปแบบ PDF)</p> <a href="resume.pdf" class="btn btn-resume text-decoration-none" download="Marisa_Wongyat_Resume.pdf"> <i class="fa-solid fa-download me-2"></i>Download PDF </a> </div> </div> </div> </div> </section> <!-- ============================================= CONTACT SECTION ============================================= --> <section id="contact" class="contact-section" style="background-color: var(--bg-white);"> <div class="container"> <h2 class="section-title">ติดต่อฉัน</h2> <p class="text-center mb-5" style="max-width:600px; margin:-20px auto 40px; color:var(--text-muted);"> สามารถส่งจดหมายหรือแวะชมผลงานของฉันทางช่องทางด้านล่างนี้ได้ตลอดเวลาค่ะ </p> <div class="row justify-content-center"> <div class="col-lg-6"> <div class="about-card p-4"> <h3 class="h5 mb-4 text-center" style="font-weight:700; color:var(--primary-color);">ช่องทางหลัก</h3> <div class="d-flex align-items-center mb-3"> <div class="contact-icon-box me-3 text-info"><i class="fa-regular fa-envelope fs-5"></i></div> <div> <span class="d-block small" style="color:var(--text-muted);">อีเมลสำหรับการทำงาน</span> <a href="mailto:marisawongyat2538@gmail.com" class="text-decoration-none fw-bold" style="color:var(--text-dark);">marisawongyat2538@gmail.com</a> </div> </div> <div class="d-flex align-items-center mb-3"> <div class="contact-icon-box me-3 text-primary"><i class="fa-brands fa-github fs-5"></i></div> <div> <span class="d-block small" style="color:var(--text-muted);">บัญชีผู้ใช้ซอร์สโค้ด</span> <a href="https://github.com/marisawongyat" target="_blank" rel="noopener" class="text-decoration-none fw-bold" style="color:var(--text-dark);">github.com/marisawongyat</a> </div> </div> <div class="d-flex align-items-center"> <div class="contact-icon-box me-3 text-success"><i class="fa-solid fa-map-location-dot fs-5"></i></div> <div> <span class="d-block small" style="color:var(--text-muted);">สถานที่ศึกษา</span> <span class="fw-bold" style="color:var(--text-dark);">อ.ฝาง จ.เชียงใหม่, ประเทศไทย</span> </div> </div> </div> </div> </div> </div> </section> </main> <!-- ============================================= FOOTER ============================================= --> <footer class="text-center"> <div class="container"> <div class="footer-logo">MARISA WONGYAT</div> <p class="mb-3 opacity-75">นักศึกษาสาขาอิเล็กทรอนิกส์ แผนกเทคโนโลยีคอมพิวเตอร์</p> <div class="social-links mb-3"> <a href="mailto:marisawongyat2538@gmail.com" title="อีเมล"><i class="fa-solid fa-envelope"></i></a> <a href="https://github.com/marisawongyat" target="_blank" rel="noopener" title="GitHub"><i class="fa-brands fa-github"></i></a> <a href="#" title="Facebook"><i class="fa-brands fa-facebook"></i></a> </div> <hr style="border-color:rgba(255,255,255,0.1); max-width:400px; margin:20px auto;"> <p class="mb-0 small opacity-50">© 2026 Marisa Wongyat. All rights reserved. \| ออกแบบเพื่อจุดประสงค์การศึกษา</p> </div> </footer> <!-- ============================================= FAB GROUP ============================================= --> <div id="fab-group"> <button class="fab-btn" id="theme-changer-btn" aria-label="เลือกธีม"> <i class="fa-solid fa-swatchbook"></i> <span class="fab-tooltip">เลือกธีม</span> </button> <button class="fab-btn" id="bg-changer-btn" aria-label="เปลี่ยนพื้นหลัง"> <i class="fa-solid fa-image"></i> <span class="fab-tooltip">เปลี่ยนพื้นหลัง</span> </button> </div> <!-- Theme Panel --> <div class="fab-panel" id="theme-panel"> <h6><i class="fa-solid fa-swatchbook"></i> เลือกธีมสี</h6> <div class="theme-grid"> <div class="theme-swatch swatch-ocean active" data-theme-name="ocean" title="Ocean Teal"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Ocean</div> </div> <div class="theme-swatch swatch-midnight" data-theme-name="midnight" title="Midnight Purple"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Midnight</div> </div> <div class="theme-swatch swatch-rose" data-theme-name="rose" title="Rose Gold"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Rose</div> </div> <div class="theme-swatch swatch-forest" data-theme-name="forest" title="Forest Green"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Forest</div> </div> <div class="theme-swatch swatch-sunset" data-theme-name="sunset" title="Sunset Orange"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Sunset</div> </div> <div class="theme-swatch swatch-sky" data-theme-name="sky" title="Sky Blue"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Sky</div> </div> <div class="theme-swatch swatch-cherry" data-theme-name="cherry" title="Cherry Blossom"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Cherry</div> </div> <div class="theme-swatch swatch-dark" data-theme-name="dark" title="Dark Mode"> <div class="swatch-check"><i class="fa-solid fa-check"></i></div> <div class="swatch-label">Dark</div> </div> </div> <p class="theme-active-label" id="theme-name-display">🌊 Ocean Teal</p> </div> <!-- BG Changer Panel --> <div class="fab-panel" id="bg-changer-panel"> <h6><i class="fa-solid fa-image"></i> เปลี่ยนพื้นหลังเว็บไซต์</h6> <div id="bg-preview-wrap"> <span id="bg-preview-label">ตัวอย่างรูปที่เลือก</span> <img id="bg-preview-img" src="" alt="preview"> </div> <div id="bg-drop-zone" role="button" tabindex="0"> <i class="fa-solid fa-cloud-arrow-up"></i> <p><span>คลิกเพื่อเลือกรูป</span><br>หรือลากไฟล์มาวางที่นี่<br><small>รองรับ JPG, PNG, WEBP, GIF</small></p> <input type="file" id="bg-file-input" accept="image/"> </div> <div class="mb-3"> <div id="bg-opacity-label"> <span><i class="fa-solid fa-circle-half-stroke me-1"></i>ความโปร่งใส</span> <span id="bg-opacity-val">100%</span> </div> <input type="range" id="bg-opacity-slider" min="10" max="100" value="100"> </div> <button id="bg-reset-btn"> <i class="fa-solid fa-rotate-left"></i> รีเซ็ตเป็นพื้นหลังเดิม </button> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script> (function () { "use strict"; var body = document.body; var navbar = document.querySelector('.navbar'); /* ---- Navbar scroll ---- / window.addEventListener('scroll', function () { if (window.scrollY > 50) { navbar.style.boxShadow = '0 4px 20px rgba(0,0,0,0.08)'; navbar.style.padding = '8px 0'; } else { navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)'; navbar.style.padding = '12px 0'; } }); / ---- Panel close-on-outside-click ---- / document.addEventListener('click', function (e) { var fabGroup = document.getElementById('fab-group'); var panels = document.querySelectorAll('.fab-panel'); var inside = fabGroup.contains(e.target) \|\| Array.from(panels).some(function (p) { return p.contains(e.target); }); if (!inside) panels.forEach(function (p) { p.classList.remove('show'); }); }); function togglePanel(id) { var target = document.getElementById(id); var open = target.classList.contains('show'); document.querySelectorAll('.fab-panel').forEach(function (p) { p.classList.remove('show'); }); if (!open) target.classList.add('show'); } / ================================================ THEME SWITCHER ================================================ / var themeNames = { ocean: '🌊 Ocean Teal', midnight: '🌌 Midnight Purple', rose: '🌹 Rose Gold', forest: '🌿 Forest Green', sunset: '🌅 Sunset Orange', sky: '☁️ Sky Blue', cherry: '🌸 Cherry Blossom', dark: '🌑 Dark Mode' }; var themeDisplay = document.getElementById('theme-name-display'); var currentTheme = localStorage.getItem('portfolio-theme') \|\| 'ocean'; function applyTheme(name) { body.setAttribute('data-theme', name); currentTheme = name; localStorage.setItem('portfolio-theme', name); document.querySelectorAll('.theme-swatch').forEach(function (sw) { sw.classList.toggle('active', sw.dataset.themeName === name); }); themeDisplay.textContent = themeNames[name] \|\| name; } applyTheme(currentTheme); document.getElementById('theme-changer-btn').addEventListener('click', function (e) { e.stopPropagation(); togglePanel('theme-panel'); }); document.querySelectorAll('.theme-swatch').forEach(function (sw) { sw.addEventListener('click', function () { applyTheme(sw.dataset.themeName); }); }); / ================================================ BACKGROUND CHANGER ================================================ / var bgBtn = document.getElementById('bg-changer-btn'); var dropZone = document.getElementById('bg-drop-zone'); var fileInput = document.getElementById('bg-file-input'); var resetBtn = document.getElementById('bg-reset-btn'); var overlay = document.getElementById('bg-overlay'); var previewWrap = document.getElementById('bg-preview-wrap'); var previewImg = document.getElementById('bg-preview-img'); var opacitySlider = document.getElementById('bg-opacity-slider'); var opacityVal = document.getElementById('bg-opacity-val'); bgBtn.addEventListener('click', function (e) { e.stopPropagation(); togglePanel('bg-changer-panel'); }); / Opacity / opacitySlider.addEventListener('input', function () { var v = parseInt(opacitySlider.value, 10); opacityVal.textContent = v + '%'; if (body.classList.contains('has-bg-image')) { overlay.style.opacity = (v / 100).toFixed(2); } }); / Click / Keyboard on drop zone / dropZone.addEventListener('click', function () { fileInput.click(); }); dropZone.addEventListener('keydown', function (e) { if (e.key === 'Enter' \|\| e.key === ' ') fileInput.click(); }); / File selected / fileInput.addEventListener('change', function () { if (fileInput.files && fileInput.files[0]) applyBg(fileInput.files[0]); }); / Drag & Drop / dropZone.addEventListener('dragover', function (e) { e.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', function () { dropZone.classList.remove('drag-over'); }); dropZone.addEventListener('drop', function (e) { e.preventDefault(); dropZone.classList.remove('drag-over'); var f = e.dataTransfer.files[0]; if (f && f.type.startsWith('image/')) applyBg(f); }); function applyBg(file) { var reader = new FileReader(); reader.onload = function (ev) { var url = ev.target.result; overlay.style.backgroundImage = 'url("' + url + '")'; var opacity = parseInt(opacitySlider.value, 10) / 100; overlay.style.opacity = opacity.toFixed(2); body.classList.add('has-bg-image'); previewImg.src = url; previewWrap.style.display = 'block'; bgBtn.style.background = 'linear-gradient(135deg,#e83e8c,#fd7e14)'; try { sessionStorage.setItem('portfolio-bg', url); } catch(err) {} try { sessionStorage.setItem('portfolio-bg-opacity', opacitySlider.value); } catch(err) {} }; reader.readAsDataURL(file); } / Reset / resetBtn.addEventListener('click', function () { overlay.style.backgroundImage = ''; overlay.style.opacity = '0'; body.classList.remove('has-bg-image'); previewWrap.style.display = 'none'; previewImg.src = ''; fileInput.value = ''; opacitySlider.value = 100; opacityVal.textContent = '100%'; bgBtn.style.background = ''; try { sessionStorage.removeItem('portfolio-bg'); } catch(err) {} try { sessionStorage.removeItem('portfolio-bg-opacity'); } catch(err) {} }); / Restore from sessionStorage */ try { var savedBg = sessionStorage.getItem('portfolio-bg'); var savedOp = sessionStorage.getItem('portfolio-bg-opacity') \|\| '100'; if (savedBg) { overlay.style.backgroundImage = 'url("' + savedBg + '")'; overlay.style.opacity = (parseInt(savedOp, 10) / 100).toFixed(2); body.classList.add('has-bg-image'); previewImg.src = savedBg; previewWrap.style.display = 'block'; opacitySlider.value = savedOp; opacityVal.textContent = savedOp + '%'; bgBtn.style.background = 'linear-gradient(135deg,#e83e8c,#fd7e14)'; } } catch(err) {} }()); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.34 | proxy | phpinfo | Settings