File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090003/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>Kasama \| Creative Developer Portfolio</title> <meta name="description" content="พอร์ตโฟลิโอส่วนตัวของ Kasama - นักพัฒนาเว็บแอปพลิเคชันที่เชี่ยวชาญด้าน Modern UI/UX, Front-end development และการสร้างประสบการณ์ดิจิทัลที่น่าทึ่ง"> <!-- Google Fonts --> <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=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tabler Icons CSS CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"> <!-- Custom Style CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Background Glow Effect Elements --> <div class="glow-bg-container"> <div class="glow-sphere glow-1"></div> <div class="glow-sphere glow-2"></div> </div> <!-- Navigation Bar --> <header class="navbar" id="navbar"> <div class="nav-container"> <a href="#hero" class="nav-logo" id="navLogo"> <span>KASAMA</span><span class="accent-dot">.</span> </a> <nav class="nav-menu" id="navMenu"> <a href="#hero" class="nav-link active" id="linkHero">หน้าแรก</a> <a href="#about" class="nav-link" id="linkAbout">เกี่ยวกับฉัน</a> <a href="#projects" class="nav-link" id="linkProjects">ผลงาน</a> <a href="#contact" class="nav-link nav-cta" id="linkContact">ติดต่อฉัน</a> </nav> <button class="hamburger-toggle" id="hamburgerToggle" aria-label="Toggle Menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </button> </div> </header> <!-- Main Content --> <main> <!-- Hero Section --> <section id="hero" class="hero-section"> <div class="hero-container"> <div class="hero-content"> <div class="hero-badge" id="heroBadge"> <i class="ti ti-sparkles"></i> Available for Freelance & Full-time </div> <h1 class="hero-title" id="heroTitle"> สวัสดีครับ,ผมชื่อ <span class="gradient-text">กษมา เจริญกุล</span> </h1> <p class="hero-subtitle" id="heroSubtitle"> สวัสดีครับ, ผมชื่อ <strong>กษมา เจริญกุล</strong> (บิ๊กซี) นักศึกษาชั้น ปวส. 1 สาขาเทคนิคคอมพิวเตอร์ จากวิทยาลัยเทคนิคเชียงใหม่ ผู้มีความกระตือรือร้นในการพัฒนาทักษะด้านเทคโนโลยีและการสร้างสรรค์เว็บแอปพลิเคชัน </p> <div class="hero-actions" id="heroActions"> <a href="#projects" class="btn btn-primary"><i class="ti ti-device-laptop"></i> ดูผลงานของฉัน</a> <a href="#contact" class="btn btn-secondary"><i class="ti ti-mail"></i> ติดต่อพูดคุย</a> </div> </div> <div class="hero-image-container" id="heroImageContainer"> <div class="profile-card"> <div class="profile-image-wrapper"> <img src="./assets/profile.jpg" alt="Kasama Profile" class="profile-img" id="profileImg"> </div> <div class="profile-glow"></div> </div> </div> </div> <div class="scroll-indicator" id="scrollIndicator"> <a href="#about" aria-label="Scroll Down"> <span class="mouse-icon"> <span class="mouse-wheel"></span> </span> </a> </div> </section> <!-- About Me Section --> <section id="about" class="about-section"> <div class="section-container"> <div class="section-header"> <span class="section-tagline">About Me</span> <h2 class="section-title">ประวัติและความเชี่ยวชาญ</h2> </div> <div class="about-grid"> <div class="about-bio" id="aboutBio"> <h3>ข้อมูลส่วนตัว & การติดต่อ</h3> <div class="bio-card"> <h4 class="bio-subtitle"><i class="ti ti-user-circle"></i> ข้อมูลส่วนตัว</h4> <div class="personal-info-grid-custom"> <div class="info-item-custom"> <span class="info-label">ชื่อจริง:</span> <span class="info-value">นาย กษมา เจริญกุล</span> </div> <div class="info-item-custom"> <span class="info-label">ชื่อเล่น:</span> <span class="info-value">บิ๊กซี</span> </div> <div class="info-item-custom"> <span class="info-label">วันเกิด:</span> <span class="info-value">18 เมษายน 2551</span> </div> <div class="info-item-custom"> <span class="info-label">อายุ:</span> <span class="info-value">18 ปี</span> </div> </div> </div> <div class="bio-card" style="margin-top: 24px;"> <h4 class="bio-subtitle"><i class="ti ti-address-book"></i> ช่องทางการติดต่อ</h4> <div class="personal-info-grid-custom"> <div class="info-item-custom"> <span class="info-label"><i class="ti ti-phone"></i> โทร:</span> <span class="info-value"><a href="tel:062-341-1665">062-341-1665</a></span> </div> <div class="info-item-custom"> <span class="info-label"><i class="ti ti-mail"></i> อีเมล:</span> <span class="info-value"><a href="mailto:bigckasama@gmail.com">bigckasama@gmail.com</a></span> </div> <div class="info-item-custom" style="grid-column: 1 / -1;"> <span class="info-label"><i class="ti ti-map-pin"></i> ที่อยู่:</span> <span class="info-value">202/1 ต.ดอยหล่อ อ.ดอยหล่อ จ.เชียงใหม่</span> </div> </div> </div> </div> <div class="about-skills" id="aboutSkills"> <h3>การศึกษา & ทักษะ</h3> <div class="bio-card"> <h4 class="bio-subtitle"><i class="ti ti-school"></i> ประวัติการศึกษา</h4> <div class="education-timeline"> <div class="edu-item"> <span class="edu-year">2566 - 2568</span> <p class="edu-title">จบจาก วิทยาลัยเทคนิคเชียงใหม่</p> </div> <div class="edu-item active"> <span class="edu-year">กำลังศึกษาอยู่ที่</span> <p class="edu-title">วิทยาลัยเทคนิคเชียงใหม่</p> <p class="edu-details">สาขา เทคนิคคอมพิวเตอร์สายตรง \| ชั้น ปวส. 1</p> </div> </div> </div> <div class="bio-card" style="margin-top: 24px;"> <h4 class="bio-subtitle"><i class="ti ti-bulb"></i> ทักษะและความสามารถ</h4> <ul class="custom-skills-list"> <li> <i class="ti ti-circle-check-filled text-cyan"></i> <span>มีไหวพริบและทำงานได้อย่างคล่องแคล่ว</span> </li> <li> <i class="ti ti-circle-check-filled text-cyan"></i> <span>มีความกระตือรือร้นในการพัฒนาตนเอง</span> </li> </ul> </div> </div> </div> </div> </section> <!-- Projects Section --> <section id="projects" class="projects-section"> <div class="section-container"> <div class="section-header"> <span class="section-tagline">My Works</span> <h2 class="section-title">ผลงานล่าสุดของฉัน</h2> </div> <div class="projects-grid" id="projectsGrid"> <!-- Project Card 1 --> <article class="project-card" id="projectCard1"> <div class="project-img-wrapper"> <img src="./assets/project1.png" alt="Smart Dashboard Project" class="project-img"> <div class="project-overlay"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="project-overlay-link" aria-label="GitHub Repository"><i class="ti ti-brand-github"></i></a> <a href="#" class="project-overlay-link" aria-label="Live Demo"><i class="ti ti-external-link"></i></a> </div> </div> <div class="project-content"> <div class="project-tags"> <span class="p-tag">React</span> <span class="p-tag">Tailwind</span> <span class="p-tag">Chart.js</span> </div> <h3 class="project-card-title">Nexus Analytics Dashboard</h3> <p class="project-card-desc">ระบบแดชบอร์ดอัจฉริยะสำหรับวิเคราะห์ข้อมูลทางการเงินและการขายแบบ Real-time พร้อม UI ที่เข้าใจง่ายและรองรับ Glassmorphism</p> <div class="project-links"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="p-link github-link"><i class="ti ti-brand-github"></i> GitHub</a> <a href="#" class="p-link demo-link"><i class="ti ti-live-view"></i> Live Demo <i class="ti ti-arrow-right"></i></a> </div> </div> </article> <!-- Project Card 2 --> <article class="project-card" id="projectCard2"> <div class="project-img-wrapper"> <img src="./assets/project2.png" alt="Premium E-commerce Website" class="project-img"> <div class="project-overlay"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="project-overlay-link" aria-label="GitHub Repository"><i class="ti ti-brand-github"></i></a> <a href="#" class="project-overlay-link" aria-label="Live Demo"><i class="ti ti-external-link"></i></a> </div> </div> <div class="project-content"> <div class="project-tags"> <span class="p-tag">HTML5</span> <span class="p-tag">Vanilla CSS</span> <span class="p-tag">JS ES6</span> </div> <h3 class="project-card-title">Aether Sole E-Commerce</h3> <p class="project-card-desc">เว็บไซต์ร้านค้าออนไลน์ขายรองเท้าแฟชั่นระดับพรีเมียม มาพร้อมกับแอนิเมชันที่สวยงาม การจัดเรียงสินค้าที่ลื่นไหล และระบบตะกร้าสินค้าแบบตอบสนองรวดเร็ว</p> <div class="project-links"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="p-link github-link"><i class="ti ti-brand-github"></i> GitHub</a> <a href="#" class="p-link demo-link"><i class="ti ti-live-view"></i> Live Demo <i class="ti ti-arrow-right"></i></a> </div> </div> </article> <!-- Project Card 3 --> <article class="project-card" id="projectCard3"> <div class="project-img-wrapper"> <img src="./assets/project3.png" alt="AI Chatbot Application" class="project-img"> <div class="project-overlay"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="project-overlay-link" aria-label="GitHub Repository"><i class="ti ti-brand-github"></i></a> <a href="#" class="project-overlay-link" aria-label="Live Demo"><i class="ti ti-external-link"></i></a> </div> </div> <div class="project-content"> <div class="project-tags"> <span class="p-tag">Next.js</span> <span class="p-tag">Node.js</span> <span class="p-tag">OpenAI API</span> </div> <h3 class="project-card-title">NovaAI Chatbot</h3> <p class="project-card-desc">ผู้ช่วยสนทนาอัจฉริยะที่ขับเคลื่อนด้วยระบบ AI ล่าสุด ออกแบบหน้าต่างแชตที่สวยงาม พร้อมฟังก์ชันจำประวัติบทสนทนาและโหมดตอบคำถามอเนกประสงค์</p> <div class="project-links"> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="p-link github-link"><i class="ti ti-brand-github"></i> GitHub</a> <a href="#" class="p-link demo-link"><i class="ti ti-live-view"></i> Live Demo <i class="ti ti-arrow-right"></i></a> </div> </div> </article> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="section-container"> <div class="section-header"> <span class="section-tagline">Get In Touch</span> <h2 class="section-title">มาคุยเรื่องโปรเจกต์ถัดไปของคุณกัน</h2> </div> <div class="contact-grid"> <div class="contact-info" id="contactInfo"> <h3>สร้างโปรเจกต์ที่น่าทึ่งไปด้วยกัน!</h3> <p>คุณมีไอเดียเจ๋งๆ หรือโปรเจกต์ที่ต้องการนักพัฒนาไปช่วยเสริมทัพใช่ไหมครับ? ส่งอีเมลหรือติดต่อผ่านโซเชียลมีเดียของผมได้โดยตรงเลยครับ ยินดีให้คำปรึกษาฟรี!</p> <div class="contact-channels"> <a href="mailto:bigckasama@gmail.com" class="channel-card"> <div class="channel-icon"><i class="ti ti-mail"></i></div> <div class="channel-details"> <span class="channel-label">ส่งอีเมลหาผม</span> <span class="channel-value">bigckasama@gmail.com</span> </div> </a> <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="channel-card"> <div class="channel-icon"><i class="ti ti-brand-github"></i></div> <div class="channel-details"> <span class="channel-label">ดูโค้ดบน GitHub</span> <span class="channel-value">github.com/kasama</span> </div> </a> <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" class="channel-card"> <div class="channel-icon"><i class="ti ti-brand-linkedin"></i></div> <div class="channel-details"> <span class="channel-label">เชื่อมต่อ LinkedIn</span> <span class="channel-value">linkedin.com/in/kasama</span> </div> </a> </div> </div> <div class="contact-form-wrapper" id="contactFormWrapper"> <form class="contact-form" id="contactForm"> <div class="form-group"> <label for="name">ชื่อผู้ติดต่อ <span class="required"></span></label> <div class="input-wrapper"> <i class="ti ti-user input-icon"></i> <input type="text" id="name" name="name" required placeholder="คุณรักคอม ดีไซน์"> </div> </div> <div class="form-group"> <label for="email">อีเมลติดต่อ <span class="required"></span></label> <div class="input-wrapper"> <i class="ti ti-mail-opened input-icon"></i> <input type="email" id="email" name="email" required placeholder="your.name@example.com"> </div> </div> <div class="form-group"> <label for="message">ข้อความของคุณ <span class="required">*</span></label> <div class="input-wrapper"> <i class="ti ti-message input-icon textarea-icon"></i> <textarea id="message" name="message" required rows="5" placeholder="อธิบายไอเดียโปรเจกต์ของคุณสั้นๆ ได้ที่นี่..."></textarea> </div> </div> <button type="submit" class="btn btn-primary btn-submit" id="btnSubmit"> <span class="btn-text">ส่งข้อความหาฉัน</span> <span class="btn-loader hidden"><i class="ti ti-loader-2 animate-spin"></i> กำลังส่ง...</span> </button> <div class="form-status hidden" id="formStatus"> <div class="status-content"> <i class="ti ti-circle-check-filled text-green"></i> <span>ส่งข้อความสำเร็จ! ผมจะติดต่อกลับโดยเร็วที่สุดครับ</span> </div> </div> </form> </div> </div> </div> </section> </main> <!-- Footer --> <footer class="footer"> <div class="footer-container"> <div class="footer-brand"> <a href="#hero" class="footer-logo">KASAMA<span class="accent-dot">.</span></a> <p>สร้างสรรค์เว็บแอปพลิเคชันด้วยเทคโนโลยีสมัยใหม่และดีไซน์ระดับคุณภาพ</p> </div> <div class="footer-divider"></div> <div class="footer-bottom"> <p>© 2026 Kasama Portfolio. All Rights Reserved. Crafted with <i class="ti ti-heart-filled text-red"></i> and Vanilla CSS</p> </div> </div> </footer> <!-- Custom Script JS --> <script src="script.js"></script> </body> </html>

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