File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090026/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>My Portfolio \| Creative Developer</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;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css?v=1.1"> <!-- Phosphor Icons for modern icons --> <script src="https://unpkg.com/@phosphor-icons/web"></script> </head> <body> <!-- Navigation Bar --> <nav class="navbar" id="navbar"> <div class="nav-container"> <a href="#" class="logo">SAINAM<span>PHEUNG.</span></a> <ul class="nav-links" id="nav-links"> <li><a href="#hero" class="nav-item">หน้าแรก</a></li> <li><a href="#about" class="nav-item">ABOUT ME</a></li> <li><a href="#portfolio" class="nav-item">ผลงาน</a></li> <li><a href="#contact" class="nav-item">ติดต่อ</a></li> </ul> <div class="hamburger" id="hamburger"> <i class="ph ph-list"></i> </div> </div> </nav> <main> <!-- Hero Section --> <section id="hero" class="hero section"> <div class="hero-content fade-in"> <p class="greeting">สวัสดีค่ะ ฉันชื่อ</p> <h1 class="hero-title">สายน้ำผึ้ง เสียมลาย</h1> <h2 class="hero-subtitle"><span>Computer Technology Student</span></h2> <p class="hero-desc"> นักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ วิทยาลัยเทคนิคเชียงใหม่ ผู้มุ่งมั่นเรียนรู้และพัฒนาเว็บไซต์ด้วยเทคโนโลยีที่ทันสมัย </p> <div class="hero-cta"> <a href="#portfolio" class="btn btn-primary">ดูผลงานของฉัน</a> <a href="#contact" class="btn btn-secondary">ติดต่อพูดคุย</a> </div> </div> <div class="hero-image fade-in"> <div class="image-wrapper"> <img src="profile.png" alt="Profile Picture"> </div> <div class="glow-effect"></div> </div> </section> <!-- About Section --> <section id="about" class="about section"> <div class="section-header fade-in"> <h2>ABOUT ME</h2> <p>ทำความรู้จักกับตัวตนและทักษะของฉัน</p> </div> <div class="about-grid"> <div class="about-text fade-in"> <h3>ข้อมูลส่วนตัว</h3> <ul class="personal-info-list"> <li><i class="ph ph-user-circle"></i> <span><strong>ชื่อเล่น:</strong> สาย</span></li> <li><i class="ph ph-cake"></i> <span><strong>อายุ:</strong> 19 ปี</span></li> <li><i class="ph ph-calendar"></i> <span><strong>วันเกิด:</strong> 01 ธันวาคม 2550</span></li> <li><i class="ph ph-house-line"></i> <span><strong>ภูมิลำเนา:</strong> อำเภอฝาง จังหวัดเชียงใหม่</span></li> <li><i class="ph ph-map-pin"></i> <span><strong>ที่อยู่ปัจจุบัน:</strong> ตำบลป่าแดด อำเภอเมือง จังหวัดเชียงใหม่</span></li> </ul> </div> <div class="skills-container fade-in"> <h3>ทักษะความสามารถ</h3> <div class="skills-grid"> <div class="skill-item"> <i class="ph ph-chats-teardrop"></i> <span>Communication</span> </div> <div class="skill-item"> <i class="ph ph-target"></i> <span>Discipline</span> </div> <div class="skill-item"> <i class="ph ph-users-three"></i> <span>Teamwork</span> </div> <div class="skill-item"> <i class="ph ph-microsoft-word-logo"></i> <span>Microsoft Word</span> </div> <div class="skill-item"> <i class="ph ph-file-js"></i> <span>JavaScript</span> </div> <div class="skill-item"> <i class="ph ph-palette"></i> <span>Draw a picture</span> </div> </div> </div> </div> </section> <!-- Portfolio Section --> <section id="portfolio" class="portfolio section"> <div class="section-header fade-in"> <h2>ผลงานที่ผ่านมา</h2> <p>โปรเจกต์บางส่วนที่ได้พัฒนาและภูมิใจนำเสนอ</p> </div> <div class="projects-grid fade-in"> <!-- Project 1 --> <div class="project-card"> <div class="project-img"> <img src="2.png" alt="การออกแบบฟอร์ม ในโปรแกรม Microsoft Access"> <div class="project-overlay"> <a href="#" class="btn btn-outline">ดูรายละเอียด</a> </div> </div> <div class="project-info"> <span class="project-category">Database</span> <h3>การออกแบบฟอร์ม</h3> <p>การออกแบบฟอร์ม ในโปรแกรม Microsoft Access</p> <div class="project-tags"> <span>Microsoft Access</span> <span>Database</span> <span>UI Design</span> </div> </div> </div> <!-- Project 2 --> <div class="project-card"> <div class="project-img"> <img src="https://images.unsplash.com/photo-1512486130939-2c4f79935e4f?q=80&w=800&auto=format&fit=crop" alt="Corporate Website"> <div class="project-overlay"> <a href="#" class="btn btn-outline">ดูรายละเอียด</a> </div> </div> <div class="project-info"> <span class="project-category">Landing Page</span> <h3>Tech Startup Website</h3> <p>เว็บไซต์แนะนำบริษัทเทคโนโลยี เน้นดีไซน์ทันสมัย โหลดไว และ SEO</p> <div class="project-tags"> <span>HTML</span> <span>Tailwind CSS</span> <span>JS</span> </div> </div> </div> <!-- Project 3 --> <div class="project-card"> <div class="project-img"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" alt="Mobile App Design"> <div class="project-overlay"> <a href="#" class="btn btn-outline">ดูรายละเอียด</a> </div> </div> <div class="project-info"> <span class="project-category">UI/UX Design</span> <h3>Fitness Tracker App</h3> <p>ออกแบบหน้าตาและประสบการณ์ใช้งานแอปพลิเคชันติดตามการออกกำลังกาย</p> <div class="project-tags"> <span>Figma</span> <span>Prototyping</span> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact section"> <div class="contact-container fade-in"> <div class="contact-info"> <h2>มาร่วมงานกันเถอะ</h2> <p>หากคุณมีโปรเจกต์ที่น่าสนใจ หรือต้องการที่ปรึกษาด้านเว็บไซต์ สามารถติดต่อฉันได้ตามช่องทางด้านล่างนี้</p> <div class="contact-details"> <div class="contact-item"> <i class="ph ph-envelope-simple"></i> <div> <span>อีเมล</span> <a href="mailto:sainampheung79@gmail.com">sainampheung79@gmail.com</a> </div> </div> <div class="contact-item"> <i class="ph ph-phone"></i> <div> <span>เบอร์โทรศัพท์</span> <a href="tel:0634400781">063-4400781</a> </div> </div> <div class="contact-item"> <i class="ph ph-map-pin"></i> <div> <span>ที่อยู่</span> <p>กรุงเทพมหานคร, ประเทศไทย</p> </div> </div> </div> <div class="social-links"> <a href="#" aria-label="GitHub"><i class="ph ph-github-logo"></i></a> <a href="#" aria-label="LinkedIn"><i class="ph ph-linkedin-logo"></i></a> <a href="#" aria-label="Twitter"><i class="ph ph-twitter-logo"></i></a> <a href="#" aria-label="Dribbble"><i class="ph ph-dribbble-logo"></i></a> </div> </div> <form class="contact-form"> <div class="form-group"> <label for="name">ชื่อของคุณ</label> <input type="text" id="name" required placeholder="John Doe"> </div> <div class="form-group"> <label for="email">อีเมล</label> <input type="email" id="email" required placeholder="john@example.com"> </div> <div class="form-group"> <label for="message">ข้อความ</label> <textarea id="message" rows="5" required placeholder="รายละเอียดโปรเจกต์ หรือข้อความทักทาย..."></textarea> </div> <button type="submit" class="btn btn-primary btn-block">ส่งข้อความ <i class="ph ph-paper-plane-right"></i></button> </form> </div> </section> </main> <footer> <p>© 2026 สายน้ำผึ้ง เสียมลาย. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html>

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