File manager - Edit - /home/webapp69.cm.in.th/u69319090038/Portfolio/index.html
Back
<!DOCTYPE html> <html lang="th" class="scroll-smooth"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>สาริน คงอุ่นเรือน — Portfolio</title> <meta name="description" content="Portfolio ของ สาริน คงอุ่นเรือน (ดินแดน) — นักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์" /> <!-- 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=Kanit:wght@300;400;500;600;700&family=Mitr:wght@300;400;500;600;700&family=Press+Start+2P&display=swap" rel="stylesheet" /> <!-- Tailwind CDN v3 --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { mitr: ['Mitr', 'sans-serif'], kanit: ['Kanit', 'sans-serif'], pixel: ['"Press Start 2P"', 'cursive'], }, colors: { stardew: { green: '#4a7c59', brown: '#8B6F47', sky: '#1a1a2e', gold: '#f0c040', pink: '#ff6b9d', purple: '#6c5ce7', warm: '#ffeaa7', earth: '#dfe6e9', }, }, animation: { 'float': 'float 3s ease-in-out infinite', 'float-delay': 'float 3s ease-in-out 0.5s infinite', 'pulse-glow': 'pulseGlow 2s ease-in-out infinite', 'shimmer': 'shimmer 2s linear infinite', 'sparkle': 'sparkle 1.5s ease-in-out infinite', 'slide-up': 'slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards', 'fade-in': 'fadeIn 1s ease-out forwards', 'bounce-in': 'bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards', 'tilt-hover': 'tiltHover 0.3s ease-out forwards', 'star-burst': 'starBurst 1s ease-out forwards', 'rainbow-spin': 'rainbowSpin 1s linear infinite', }, }, }, }; </script> <style> /* ============ BASE ============ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Mitr', 'Kanit', sans-serif; overflow-x: hidden; background: #0f0f23; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1a1a2e; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f0c040, #ff6b9d); border-radius: 10px; } /* ============ KEYFRAMES ============ */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes pulseGlow { 0%, 100% { filter: drop-shadow(0 0 15px rgba(240, 192, 64, 0.6)) drop-shadow(0 0 40px rgba(240, 192, 64, 0.3)); transform: scale(1); } 50% { filter: drop-shadow(0 0 30px rgba(240, 192, 64, 0.9)) drop-shadow(0 0 70px rgba(255, 107, 157, 0.5)) drop-shadow(0 0 100px rgba(108, 92, 231, 0.3)); transform: scale(1.03); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes sparkle { 0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(180deg); } } @keyframes slideUp { from { opacity: 0; transform: translateY(60px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes starBurst { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(3) rotate(180deg); opacity: 0; } } @keyframes rainbowSpin { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } @keyframes gacha-explode { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } @keyframes rainbow-ring { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 60% { opacity: 0.8; } 100% { transform: scale(8) rotate(360deg); opacity: 0; } } @keyframes screen-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } @keyframes particle-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } } @keyframes portal-open { 0% { clip-path: circle(0% at 50% 50%); opacity: 0; } 100% { clip-path: circle(100% at 50% 50%); opacity: 1; } } @keyframes card-reveal { 0% { opacity: 0; transform: translateY(80px) scale(0.8) rotateX(15deg); } 60% { transform: translateY(-10px) scale(1.02) rotateX(-2deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } } @keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 50% { opacity: 0.6; transform: translate(var(--fx), var(--fy)); } 75% { opacity: 1; } } @keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } } @keyframes light-beam { 0% { opacity: 0; transform: scaleY(0); } 50% { opacity: 0.6; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.2); } } /* ============ INTRO SCREEN ============ */ #intro-screen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0f0f23; transition: opacity 0.8s ease; } #intro-screen.hidden-intro { opacity: 0; pointer-events: none; } .intro-bg { position: absolute; inset: 0; background-image: url('stardew_background.png'); background-size: cover; background-position: center; filter: brightness(0.5) saturate(1.2); } .intro-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 80%, transparent 20%, rgba(15, 15, 35, 0.7) 70%); } /* Stars in intro */ .star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; animation: twinkle var(--dur) ease-in-out var(--delay) infinite; } /* Fireflies */ .firefly { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, #f0c040 0%, transparent 70%); border-radius: 50%; animation: firefly var(--dur) ease-in-out var(--delay) infinite; --fx: 40px; --fy: -30px; } /* Mailbox container */ .mailbox-wrapper { position: relative; z-index: 10; cursor: pointer; transition: all 0.3s ease; } .mailbox-wrapper:hover { transform: scale(1.08); } .mailbox-img { width: 180px; height: 180px; object-fit: contain; animation: float 3s ease-in-out infinite, pulseGlow 2s ease-in-out infinite; transition: all 0.3s ease; } @media (min-width: 768px) { .mailbox-img { width: 240px; height: 240px; } } /* Light beams behind mailbox */ .light-beam { position: absolute; width: 4px; height: 200px; background: linear-gradient(to top, rgba(240, 192, 64, 0.4), transparent); transform-origin: bottom center; animation: light-beam 3s ease-in-out var(--delay) infinite; border-radius: 2px; } /* Click hint text */ .click-hint { background: linear-gradient(90deg, #f0c040, #ff6b9d, #6c5ce7, #f0c040); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3s linear infinite; } /* Gacha explosion elements */ .gacha-flash { position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(240,192,64,0.6), transparent); animation: screen-flash 1.2s ease-out forwards; pointer-events: none; } .rainbow-ring { position: fixed; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border: 4px solid transparent; border-image: conic-gradient(from 0deg, #f0c040, #ff6b9d, #6c5ce7, #00b894, #f0c040) 1; border-radius: 50%; z-index: 201; animation: rainbow-ring 1.5s ease-out forwards; mix-blend-mode: screen; pointer-events: none; } .gacha-particle { position: fixed; width: 8px; height: 8px; border-radius: 50%; z-index: 202; animation: particle-fly 1.2s ease-out forwards; pointer-events: none; } .gacha-star { position: fixed; z-index: 202; font-size: 20px; animation: particle-fly 1.5s ease-out forwards; pointer-events: none; } /* ============ PORTFOLIO ============ */ #portfolio { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } #portfolio.visible { opacity: 1; pointer-events: all; } /* Interactive cards */ .interactive-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; perspective: 1000px; } .interactive-card:hover { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 20px 40px rgba(240, 192, 64, 0.15), 0 0 30px rgba(108, 92, 231, 0.1); } /* Profile picture styling */ .profile-pic-wrapper { position: relative; display: inline-block; } .profile-pic-wrapper::before { content: ''; position: absolute; inset: -6px; border-radius: 20px; background: conic-gradient(from 0deg, #f0c040, #ff6b9d, #6c5ce7, #00b894, #f0c040); animation: rainbowSpin 4s linear infinite; z-index: -1; } .profile-pic-wrapper::after { content: ''; position: absolute; inset: -12px; border-radius: 24px; background: conic-gradient(from 0deg, #f0c040, #ff6b9d, #6c5ce7, #00b894, #f0c040); animation: rainbowSpin 4s linear infinite reverse; z-index: -2; opacity: 0.3; filter: blur(15px); } /* Section reveal animation */ .reveal-section { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-section.revealed { opacity: 1; transform: translateY(0); } /* Glass card */ .glass-card { background: rgba(26, 26, 46, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(240, 192, 64, 0.15); } /* Neon text */ .neon-text { text-shadow: 0 0 7px rgba(240, 192, 64, 0.6), 0 0 20px rgba(240, 192, 64, 0.4), 0 0 42px rgba(240, 192, 64, 0.2); } /* Nav glow */ .nav-glass { background: rgba(15, 15, 35, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(240, 192, 64, 0.1); } .nav-link { position: relative; transition: color 0.3s ease; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0%; height: 2px; background: linear-gradient(90deg, #f0c040, #ff6b9d); transition: width 0.3s ease; border-radius: 2px; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* Pixel border */ .pixel-border { box-shadow: 4px 0 0 0 #f0c040, -4px 0 0 0 #f0c040, 0 4px 0 0 #f0c040, 0 -4px 0 0 #f0c040, 4px 4px 0 0 #8B6F47, -4px -4px 0 0 #8B6F47, 4px -4px 0 0 #8B6F47, -4px 4px 0 0 #8B6F47; } /* Background gradient blobs */ .bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; pointer-events: none; } /* Hobby tag */ .hobby-tag { transition: all 0.3s ease; } .hobby-tag:hover { transform: scale(1.1) rotate(-2deg); box-shadow: 0 0 20px rgba(240, 192, 64, 0.4); } /* Timeline */ .timeline-dot { position: relative; } .timeline-dot::before { content: ''; position: absolute; left: -28px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #f0c040, #ff6b9d); box-shadow: 0 0 10px rgba(240, 192, 64, 0.5); } .timeline-dot::after { content: ''; position: absolute; left: -23px; top: 22px; width: 2px; height: calc(100% + 10px); background: linear-gradient(to bottom, rgba(240, 192, 64, 0.4), transparent); } .timeline-dot:last-child::after { display: none; } /* Contact icon */ .contact-icon { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .contact-icon:hover { transform: scale(1.15) translateY(-5px); } /* Section pixel header */ .section-header { position: relative; display: inline-block; } .section-header::before { content: '✦'; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); color: #f0c040; animation: sparkle 2s ease-in-out infinite; } .section-header::after { content: '✦'; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); color: #ff6b9d; animation: sparkle 2s ease-in-out 0.5s infinite; } /* Mobile menu */ .mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.open { transform: translateX(0); } </style> </head> <body class="font-mitr text-gray-100 bg-[#0f0f23]"> <!-- ==================== INTRO SCREEN ==================== --> <div id="intro-screen"> <!-- Background --> <div class="intro-bg"></div> <!-- Stars --> <div id="stars-container"></div> <!-- Fireflies --> <div id="fireflies-container"></div> <!-- Light beams --> <div class="absolute inset-0 flex items-center justify-center pointer-events-none" style="z-index: 5;"> <div class="relative"> <div class="light-beam" style="--delay: 0s; transform: rotate(-30deg); left: -60px; bottom: 40px; position: absolute;"></div> <div class="light-beam" style="--delay: 0.5s; transform: rotate(-10deg); left: -20px; bottom: 50px; position: absolute;"></div> <div class="light-beam" style="--delay: 1s; transform: rotate(10deg); right: -20px; bottom: 50px; position: absolute;"></div> <div class="light-beam" style="--delay: 1.5s; transform: rotate(30deg); right: -60px; bottom: 40px; position: absolute;"></div> </div> </div> <!-- Mailbox --> <div class="mailbox-wrapper" id="mailbox" onclick="triggerGacha()"> <img src="mailbox_icon.png" alt="Magic Mailbox" class="mailbox-img" /> </div> <!-- Click hint --> <p class="click-hint relative z-10 mt-6 text-lg md:text-xl font-kanit font-medium tracking-wide select-none"> ✉️ คลิกเพื่อเปิดจดหมาย ✉️ </p> <p class="relative z-10 mt-2 text-sm text-gray-400 font-kanit animate-pulse select-none"> ~ Click the mailbox ~ </p> </div> <!-- ==================== PORTFOLIO ==================== --> <div id="portfolio"> <!-- Nav --> <nav class="nav-glass fixed top-0 left-0 right-0 z-50 px-4 md:px-8 py-3" id="navbar"> <div class="max-w-6xl mx-auto flex items-center justify-between"> <a href="#hero" class="font-pixel text-xs md:text-sm text-stardew-gold neon-text tracking-wider"> 🌟 ดินแดน </a> <!-- Desktop nav --> <div class="hidden md:flex items-center gap-8 font-kanit text-sm"> <a href="#hero" class="nav-link text-gray-300 hover:text-stardew-gold">หน้าแรก</a> <a href="#about" class="nav-link text-gray-300 hover:text-stardew-gold">เกี่ยวกับฉัน</a> <a href="#experience" class="nav-link text-gray-300 hover:text-stardew-gold">ประสบการณ์</a> <a href="#dreams" class="nav-link text-gray-300 hover:text-stardew-gold">ความฝัน</a> <a href="#contact" class="nav-link text-gray-300 hover:text-stardew-gold">ติดต่อ</a> </div> <!-- Mobile hamburger --> <button class="md:hidden text-stardew-gold text-2xl" id="menu-toggle" onclick="toggleMobileMenu()"> ☰ </button> </div> <!-- Mobile menu --> <div class="mobile-menu fixed top-0 right-0 h-full w-64 bg-[#0f0f23]/95 backdrop-blur-xl z-50 flex flex-col pt-20 px-8 gap-6 font-kanit md:hidden" id="mobile-menu"> <button class="absolute top-5 right-5 text-stardew-gold text-2xl" onclick="toggleMobileMenu()">✕</button> <a href="#hero" class="text-gray-300 hover:text-stardew-gold text-lg" onclick="toggleMobileMenu()">🏠 หน้าแรก</a> <a href="#about" class="text-gray-300 hover:text-stardew-gold text-lg" onclick="toggleMobileMenu()">👤 เกี่ยวกับฉัน</a> <a href="#experience" class="text-gray-300 hover:text-stardew-gold text-lg" onclick="toggleMobileMenu()">⭐ ประสบการณ์</a> <a href="#dreams" class="text-gray-300 hover:text-stardew-gold text-lg" onclick="toggleMobileMenu()">🎯 ความฝัน</a> <a href="#contact" class="text-gray-300 hover:text-stardew-gold text-lg" onclick="toggleMobileMenu()">📧 ติดต่อ</a> </div> </nav> <!-- ===== HERO ===== --> <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16"> <!-- Background blobs --> <div class="bg-blob w-[500px] h-[500px] bg-purple-600 -top-40 -left-40" style="position: absolute;"></div> <div class="bg-blob w-[400px] h-[400px] bg-pink-500 bottom-20 right-[-100px]" style="position: absolute;"></div> <div class="bg-blob w-[300px] h-[300px] bg-yellow-400 top-1/2 left-1/3" style="position: absolute;"></div> <!-- Background pattern --> <div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(circle at 1px 1px, rgba(240,192,64,0.3) 1px, transparent 0); background-size: 40px 40px;"></div> <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> <!-- Profile Picture --> <div class="reveal-section mb-8" style="transition-delay: 0.2s;"> <div class="profile-pic-wrapper mx-auto"> <img src="profile.jpg" alt="สาริน คงอุ่นเรือน" class="w-40 h-40 md:w-52 md:h-52 rounded-2xl object-cover" loading="eager" /> </div> </div> <!-- Name --> <div class="reveal-section" style="transition-delay: 0.4s;"> <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold mb-2 neon-text"> <span class="bg-gradient-to-r from-stardew-gold via-stardew-pink to-stardew-purple bg-clip-text text-transparent"> สาริน คงอุ่นเรือน </span> </h1> <p class="text-xl md:text-2xl text-stardew-gold/80 font-kanit font-light mb-4"> ( ดินแดน ) </p> </div> <!-- Tagline --> <div class="reveal-section" style="transition-delay: 0.6s;"> <p class="text-base md:text-lg text-gray-400 font-kanit max-w-xl mx-auto mb-8 leading-relaxed"> นักศึกษาสาขาเทคโนโลยีคอมพิวเตอร์ 💻<br> <span class="text-stardew-gold/70">ผู้มีความฝันและพร้อมเรียนรู้สิ่งใหม่เสมอ ✨</span> </p> </div> <!-- CTA --> <div class="reveal-section" style="transition-delay: 0.8s;"> <a href="#about" class="inline-flex items-center gap-2 px-8 py-3 rounded-full bg-gradient-to-r from-stardew-gold/20 to-stardew-pink/20 border border-stardew-gold/30 text-stardew-gold font-kanit hover:from-stardew-gold/30 hover:to-stardew-pink/30 hover:border-stardew-gold/50 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(240,192,64,0.2)]"> <span>รู้จักฉันเพิ่มเติม</span> <span class="animate-bounce">↓</span> </a> </div> </div> <!-- Scroll indicator --> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex flex-col items-center gap-2 text-gray-500"> <div class="w-5 h-8 rounded-full border-2 border-gray-500 flex justify-center pt-1"> <div class="w-1 h-2 bg-stardew-gold rounded-full animate-bounce"></div> </div> </div> </section> <!-- ===== ABOUT ===== --> <section id="about" class="relative py-20 md:py-32 px-4"> <div class="max-w-5xl mx-auto"> <div class="text-center mb-16 reveal-section"> <h2 class="section-header text-2xl md:text-4xl font-bold text-stardew-gold neon-text font-kanit px-10"> เกี่ยวกับฉัน </h2> <p class="text-gray-400 mt-3 font-kanit">About Me</p> </div> <div class="grid md:grid-cols-2 gap-8"> <!-- Info Card --> <div class="interactive-card glass-card rounded-3xl p-8 reveal-section" style="transition-delay: 0.2s;"> <div class="flex items-center gap-3 mb-6"> <span class="text-3xl">📋</span> <h3 class="text-xl font-bold text-stardew-gold font-kanit">ข้อมูลส่วนตัว</h3> </div> <div class="space-y-4"> <div class="flex items-start gap-3 p-3 rounded-xl bg-white/5 hover:bg-white/10 transition-colors"> <span class="text-stardew-gold text-xl mt-0.5">👤</span> <div> <p class="text-gray-400 text-sm">ชื่อ</p> <p class="text-gray-100 font-kanit">สาริน คงอุ่นเรือน (ดินแดน)</p> </div> </div> <div class="flex items-start gap-3 p-3 rounded-xl bg-white/5 hover:bg-white/10 transition-colors"> <span class="text-stardew-pink text-xl mt-0.5">🎂</span> <div> <p class="text-gray-400 text-sm">อายุ</p> <p class="text-gray-100 font-kanit">21 ปี</p> </div> </div> <div class="flex items-start gap-3 p-3 rounded-xl bg-white/5 hover:bg-white/10 transition-colors"> <span class="text-green-400 text-xl mt-0.5">🏡</span> <div> <p class="text-gray-400 text-sm">ภูมิลำเนา</p> <p class="text-gray-100 font-kanit">ต. แม่ข่า อ. ฝาง จ. เชียงใหม่</p> </div> </div> </div> </div> <!-- Education Card --> <div class="interactive-card glass-card rounded-3xl p-8 reveal-section" style="transition-delay: 0.4s;"> <div class="flex items-center gap-3 mb-6"> <span class="text-3xl">🎓</span> <h3 class="text-xl font-bold text-stardew-gold font-kanit">การศึกษา</h3> </div> <div class="space-y-4"> <div class="p-4 rounded-xl bg-gradient-to-br from-stardew-purple/10 to-stardew-pink/10 border border-stardew-purple/20"> <p class="text-stardew-gold text-sm font-kanit mb-1">🏫 จบการศึกษาจาก</p> <p class="text-gray-200 font-kanit leading-relaxed"> กรมส่งเสริมการเรียนรู้ระดับอำเภอฝาง (สกร.) </p> </div> <div class="p-4 rounded-xl bg-gradient-to-br from-stardew-gold/10 to-stardew-green/10 border border-stardew-gold/20"> <p class="text-stardew-pink text-sm font-kanit mb-1">📚 กำลังศึกษาต่อ</p> <p class="text-gray-200 font-kanit leading-relaxed"> สาขาวิชาเทคโนโลยีคอมพิวเตอร์ </p> </div> </div> </div> <!-- Motivation Card (full width) --> <div class="interactive-card glass-card rounded-3xl p-8 md:col-span-2 reveal-section" style="transition-delay: 0.6s;"> <div class="flex items-center gap-3 mb-6"> <span class="text-3xl">💡</span> <h3 class="text-xl font-bold text-stardew-gold font-kanit">แรงบันดาลใจ</h3> </div> <div class="relative p-6 rounded-2xl bg-gradient-to-r from-stardew-gold/5 via-stardew-pink/5 to-stardew-purple/5 border border-stardew-gold/10"> <span class="absolute -top-4 left-6 text-4xl">💬</span> <p class="text-gray-200 font-kanit text-base md:text-lg leading-relaxed pt-2"> กำลังศึกษาต่อในสายอาชีพ สาขาวิชาเทคโนโลยีคอมพิวเตอร์ เนื่องจากมีความชอบและสนใจในคอมพิวเตอร์ และต้องการต่อยอดเพื่อสร้างอาชีพในอนาคต </p> </div> </div> </div> </div> </section> <!-- ===== EXPERIENCE ===== --> <section id="experience" class="relative py-20 md:py-32 px-4"> <!-- Background accent --> <div class="absolute inset-0 bg-gradient-to-b from-transparent via-stardew-purple/5 to-transparent pointer-events-none"></div> <div class="max-w-5xl mx-auto relative z-10"> <div class="text-center mb-16 reveal-section"> <h2 class="section-header text-2xl md:text-4xl font-bold text-stardew-gold neon-text font-kanit px-10"> ประสบการณ์ </h2> <p class="text-gray-400 mt-3 font-kanit">Experiences</p> </div> <div class="max-w-3xl mx-auto pl-8"> <!-- Experience 1 --> <div class="timeline-dot mb-10 reveal-section" style="transition-delay: 0.2s;"> <div class="interactive-card glass-card rounded-2xl p-6 md:p-8"> <div class="flex items-start gap-4"> <div class="text-3xl md:text-4xl">🏆</div> <div> <h3 class="text-lg md:text-xl font-bold text-stardew-gold font-kanit mb-2"> ประกวดโครงงานนวัตกรรมจากขยะ </h3> <p class="text-gray-300 font-kanit leading-relaxed"> เคยเข้าร่วมการประกวดโครงงานนวัตกรรมจากขยะ </p> <div class="flex flex-wrap gap-2 mt-4"> <span class="px-3 py-1 rounded-full bg-stardew-gold/10 border border-stardew-gold/20 text-stardew-gold text-sm font-kanit"> ระดับตำบล </span> <span class="px-3 py-1 rounded-full bg-stardew-pink/10 border border-stardew-pink/20 text-stardew-pink text-sm font-kanit"> ระดับอำเภอ </span> <span class="px-3 py-1 rounded-full bg-stardew-purple/10 border border-stardew-purple/20 text-stardew-purple text-sm font-kanit"> โซนภาคเหนือ </span> </div> </div> </div> </div> </div> <!-- Experience 2 --> <div class="timeline-dot mb-10 reveal-section" style="transition-delay: 0.4s;"> <div class="interactive-card glass-card rounded-2xl p-6 md:p-8"> <div class="flex items-start gap-4"> <div class="text-3xl md:text-4xl">🎯</div> <div> <h3 class="text-lg md:text-xl font-bold text-stardew-gold font-kanit mb-2"> แข่งขันตอบคำถามวุฒิสภา </h3> <p class="text-gray-300 font-kanit leading-relaxed"> แข่งขันตอบคำถามวุฒิสภา ระดับโซนภาคเหนือ </p> <div class="flex items-center gap-3 mt-4"> <span class="px-4 py-2 rounded-xl bg-gradient-to-r from-stardew-gold/20 to-stardew-pink/20 border border-stardew-gold/30 text-stardew-gold font-kanit font-bold text-lg"> 🥇 อันดับที่ 15 </span> </div> </div> </div> </div> </div> </div> </div> </section> <!-- ===== DREAMS & HOBBIES ===== --> <section id="dreams" class="relative py-20 md:py-32 px-4"> <div class="max-w-5xl mx-auto"> <div class="text-center mb-16 reveal-section"> <h2 class="section-header text-2xl md:text-4xl font-bold text-stardew-gold neon-text font-kanit px-10"> ความฝันและงานอดิเรก </h2> <p class="text-gray-400 mt-3 font-kanit">Dreams & Hobbies</p> </div> <div class="grid md:grid-cols-2 gap-8"> <!-- Dream Card --> <div class="interactive-card glass-card rounded-3xl p-8 reveal-section relative overflow-hidden" style="transition-delay: 0.2s;"> <!-- Sparkle overlay --> <div class="absolute top-4 right-4 text-2xl animate-pulse">✨</div> <div class="absolute bottom-6 left-6 text-xl opacity-40" style="animation: sparkle 3s ease-in-out 1s infinite;">⭐</div> <div class="flex items-center gap-3 mb-6"> <span class="text-3xl">💫</span> <h3 class="text-xl font-bold text-stardew-gold font-kanit">ความฝัน</h3> </div> <div class="p-6 rounded-2xl bg-gradient-to-br from-stardew-pink/10 via-transparent to-stardew-purple/10 border border-stardew-pink/15"> <p class="text-2xl md:text-3xl text-center text-gray-100 font-kanit font-medium leading-relaxed"> "มีความสุขกับคนที่เรารัก" </p> <p class="text-center mt-4 text-stardew-gold/60 text-sm font-kanit"> ~ Be happy with the ones I love ~ </p> </div> <div class="mt-6 text-center"> <span class="text-4xl">💛</span> </div> </div> <!-- Hobbies Card --> <div class="interactive-card glass-card rounded-3xl p-8 reveal-section" style="transition-delay: 0.4s;"> <div class="flex items-center gap-3 mb-6"> <span class="text-3xl">🎮</span> <h3 class="text-xl font-bold text-stardew-gold font-kanit">งานอดิเรก</h3> </div> <div class="grid grid-cols-2 gap-4"> <div class="hobby-tag flex flex-col items-center gap-3 p-5 rounded-2xl bg-gradient-to-br from-amber-500/10 to-orange-500/10 border border-amber-500/20 cursor-default"> <span class="text-4xl">🎸</span> <p class="text-gray-200 font-kanit text-sm text-center">เล่นกีตาร์</p> </div> <div class="hobby-tag flex flex-col items-center gap-3 p-5 rounded-2xl bg-gradient-to-br from-pink-500/10 to-rose-500/10 border border-pink-500/20 cursor-default"> <span class="text-4xl">🎵</span> <p class="text-gray-200 font-kanit text-sm text-center">ฟังเพลง</p> </div> <div class="hobby-tag flex flex-col items-center gap-3 p-5 rounded-2xl bg-gradient-to-br from-purple-500/10 to-indigo-500/10 border border-purple-500/20 cursor-default"> <span class="text-4xl">🎮</span> <p class="text-gray-200 font-kanit text-sm text-center">เล่นเกม</p> </div> <div class="hobby-tag flex flex-col items-center gap-3 p-5 rounded-2xl bg-gradient-to-br from-emerald-500/10 to-teal-500/10 border border-emerald-500/20 cursor-default"> <span class="text-4xl">📖</span> <p class="text-gray-200 font-kanit text-sm text-center">หาความรู้ใหม่ๆ</p> </div> </div> </div> </div> </div> </section> <!-- ===== CONTACT ===== --> <section id="contact" class="relative py-20 md:py-32 px-4"> <div class="absolute inset-0 bg-gradient-to-t from-stardew-gold/5 to-transparent pointer-events-none"></div> <div class="max-w-5xl mx-auto relative z-10"> <div class="text-center mb-16 reveal-section"> <h2 class="section-header text-2xl md:text-4xl font-bold text-stardew-gold neon-text font-kanit px-10"> ติดต่อฉัน </h2> <p class="text-gray-400 mt-3 font-kanit">Contact Me</p> </div> <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto"> <!-- Email --> <div class="interactive-card glass-card rounded-2xl p-6 text-center reveal-section contact-icon" style="transition-delay: 0.2s;"> <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-stardew-gold/20 to-amber-500/20 flex items-center justify-center text-3xl"> 📧 </div> <h3 class="text-stardew-gold font-kanit font-bold mb-2">Email</h3> <a href="mailto:0646649427sk@gmail.com" class="text-gray-300 hover:text-stardew-gold transition-colors font-kanit text-sm break-all"> 0646649427sk@gmail.com </a> </div> <!-- Phone --> <div class="interactive-card glass-card rounded-2xl p-6 text-center reveal-section contact-icon" style="transition-delay: 0.4s;"> <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-stardew-pink/20 to-rose-500/20 flex items-center justify-center text-3xl"> 📱 </div> <h3 class="text-stardew-gold font-kanit font-bold mb-2">Phone</h3> <a href="tel:064-6649427" class="text-gray-300 hover:text-stardew-pink transition-colors font-kanit text-sm"> 064-6649427 </a> </div> <!-- Line --> <div class="interactive-card glass-card rounded-2xl p-6 text-center reveal-section contact-icon" style="transition-delay: 0.6s;"> <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center text-3xl"> 💬 </div> <h3 class="text-stardew-gold font-kanit font-bold mb-2">Line</h3> <div class="mt-3"> <img src="line_qr.jpg" alt="Line QR Code" class="w-40 h-40 mx-auto rounded-2xl object-cover shadow-[0_0_20px_rgba(74,222,128,0.3)] hover:shadow-[0_0_35px_rgba(74,222,128,0.5)] transition-all duration-300" /> <p class="text-green-400/70 text-xs font-kanit mt-3">สแกนเพื่อเพิ่มเพื่อนใน Line 💚</p> </div> </div> </div> </div> </section> <!-- ===== FOOTER ===== --> <footer class="relative py-10 px-4 border-t border-stardew-gold/10"> <div class="max-w-5xl mx-auto text-center"> <p class="font-pixel text-xs text-stardew-gold/40 mb-3"> ✦ สาริน คงอุ่นเรือน (ดินแดน) ✦ </p> <p class="text-gray-500 text-sm font-kanit"> Made with 💛 and a little bit of magic ✨ </p> <p class="text-gray-600 text-xs font-kanit mt-2"> © 2026 — Stardew Valley inspired portfolio </p> </div> </footer> </div><!-- end #portfolio --> <!-- ==================== JAVASCRIPT ==================== --> <script> // ========== INTRO STARS & FIREFLIES ========== function createStars() { const container = document.getElementById('stars-container'); if (!container) return; for (let i = 0; i < 60; i++) { const star = document.createElement('div'); star.className = 'star'; star.style.cssText = ` left: ${Math.random() * 100}%; top: ${Math.random() * 60}%; --dur: ${2 + Math.random() * 3}s; --delay: ${Math.random() * 3}s; width: ${1 + Math.random() * 3}px; height: ${1 + Math.random() * 3}px; `; container.appendChild(star); } } function createFireflies() { const container = document.getElementById('fireflies-container'); if (!container) return; for (let i = 0; i < 15; i++) { const ff = document.createElement('div'); ff.className = 'firefly'; const fx = (Math.random() - 0.5) * 100; const fy = (Math.random() - 0.5) * 80; ff.style.cssText = ` left: ${10 + Math.random() * 80}%; top: ${30 + Math.random() * 60}%; --dur: ${4 + Math.random() * 5}s; --delay: ${Math.random() * 5}s; --fx: ${fx}px; --fy: ${fy}px; width: ${4 + Math.random() * 6}px; height: ${4 + Math.random() * 6}px; `; container.appendChild(ff); } } // ========== GACHA ANIMATION ========== let gachaTriggered = false; function triggerGacha() { if (gachaTriggered) return; gachaTriggered = true; const intro = document.getElementById('intro-screen'); const portfolio = document.getElementById('portfolio'); const mailbox = document.getElementById('mailbox'); // 1. Mailbox shake & glow up mailbox.style.animation = 'none'; mailbox.style.transition = 'all 0.3s ease'; mailbox.style.transform = 'scale(1.3)'; mailbox.style.filter = 'brightness(2) drop-shadow(0 0 60px rgba(240,192,64,1))'; // 2. After brief wind-up, EXPLODE setTimeout(() => { // Screen flash const flash = document.createElement('div'); flash.className = 'gacha-flash'; document.body.appendChild(flash); setTimeout(() => flash.remove(), 1200); // Rainbow rings (multiple) for (let r = 0; r < 3; r++) { setTimeout(() => { const ring = document.createElement('div'); ring.style.cssText = ` position: fixed; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 3px solid transparent; background: conic-gradient(from ${r * 120}deg, #f0c040, #ff6b9d, #6c5ce7, #00b894, #f0c040); -webkit-mask: radial-gradient(transparent 60%, black 62%); mask: radial-gradient(transparent 60%, black 62%); z-index: 201; animation: rainbow-ring 1.5s ease-out forwards; mix-blend-mode: screen; pointer-events: none; `; document.body.appendChild(ring); setTimeout(() => ring.remove(), 1500); }, r * 150); } // Star particles const colors = ['#f0c040', '#ff6b9d', '#6c5ce7', '#00b894', '#ff9f43', '#a29bfe', '#fd79a8']; const emojis = ['⭐', '✨', '💫', '🌟', '✦', '❖', '◆']; for (let i = 0; i < 40; i++) { const particle = document.createElement('div'); const angle = (Math.PI * 2 * i) / 40; const distance = 200 + Math.random() * 400; const tx = Math.cos(angle) * distance; const ty = Math.sin(angle) * distance; particle.className = 'gacha-particle'; particle.style.cssText = ` position: fixed; top: 50%; left: 50%; width: ${4 + Math.random() * 8}px; height: ${4 + Math.random() * 8}px; border-radius: ${Math.random() > 0.5 ? '50%' : '2px'}; background: ${colors[Math.floor(Math.random() * colors.length)]}; --tx: ${tx}px; --ty: ${ty}px; z-index: 202; animation: particle-fly ${0.8 + Math.random() * 0.8}s ease-out forwards; animation-delay: ${Math.random() * 0.2}s; pointer-events: none; `; document.body.appendChild(particle); setTimeout(() => particle.remove(), 2000); } // Star emojis for (let i = 0; i < 15; i++) { const star = document.createElement('div'); const angle = (Math.PI * 2 * i) / 15; const distance = 150 + Math.random() * 350; const tx = Math.cos(angle) * distance; const ty = Math.sin(angle) * distance; star.className = 'gacha-star'; star.textContent = emojis[Math.floor(Math.random() * emojis.length)]; star.style.cssText = ` position: fixed; top: 50%; left: 50%; font-size: ${14 + Math.random() * 20}px; --tx: ${tx}px; --ty: ${ty}px; z-index: 202; animation: particle-fly ${1 + Math.random() * 0.8}s ease-out forwards; animation-delay: ${Math.random() * 0.3}s; pointer-events: none; `; document.body.appendChild(star); setTimeout(() => star.remove(), 2500); } // Hide mailbox mailbox.style.transform = 'scale(0)'; mailbox.style.opacity = '0'; }, 400); // 3. Transition to portfolio setTimeout(() => { intro.classList.add('hidden-intro'); portfolio.classList.add('visible'); // Unlock body scroll document.body.style.overflow = 'auto'; // Trigger reveal animations after portfolio is visible setTimeout(() => { observeRevealSections(); triggerHeroReveals(); }, 300); // Remove intro after transition setTimeout(() => { intro.style.display = 'none'; }, 1000); }, 1500); } // ========== SCROLL REVEAL ========== function observeRevealSections() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('revealed'); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); document.querySelectorAll('.reveal-section').forEach(el => { observer.observe(el); }); } function triggerHeroReveals() { // Immediately reveal hero sections since they're already in view const heroSections = document.querySelectorAll('#hero .reveal-section'); heroSections.forEach((el, i) => { setTimeout(() => { el.classList.add('revealed'); }, i * 200); }); } // ========== MOBILE MENU ========== function toggleMobileMenu() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('open'); } // ========== NAVBAR SCROLL EFFECT ========== let lastScroll = 0; window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (!navbar) return; const currentScroll = window.scrollY; if (currentScroll > 100) { navbar.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)'; } else { navbar.style.boxShadow = 'none'; } lastScroll = currentScroll; }); // ========== 3D TILT ON CARDS ========== document.addEventListener('DOMContentLoaded', () => { // Prevent scroll until gacha is triggered document.body.style.overflow = 'hidden'; // Create stars and fireflies createStars(); createFireflies(); // Card tilt effect document.querySelectorAll('.interactive-card').forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = ((y - centerY) / centerY) * -5; const rotateY = ((x - centerX) / centerX) * 5; card.style.transform = `translateY(-8px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); card.addEventListener('mouseleave', () => { card.style.transform = 'translateY(0) rotateX(0) rotateY(0)'; }); }); // Smooth scroll for nav links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Active nav link on scroll const sections = document.querySelectorAll('section[id]'); const navLinks = document.querySelectorAll('.nav-link'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop - 120; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === `#${current}`) { link.classList.add('active'); } }); }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.36 |
proxy
|
phpinfo
|
Settings