File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090016/portfolio/style.css

Back
/* ========================================================================== CSS VARIABLES & DESIGN SYSTEM (รองรับการตั้งค่าสีหลัก ความกว้างหน้าจอ และฟอนต์) ========================================================================== / :root { --font-primary: 'Inter', sans-serif; --font-heading: 'Outfit', sans-serif; / ชุดสีสไตล์ Dark Mode Premium / --color-bg-deep: #070b14; --color-bg-dark: #0a0f1d; --color-text-white: #ffffff; --color-text-gray: #94a3b8; / สีเน้นไล่เฉด (Gradients) / --gradient-primary: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); --gradient-accent: linear-gradient(135deg, #b19ffb 0%, #fc67fa 100%); / สไตล์สำหรับ Glassmorphism (กระจกฝ้า) / --glass-bg: rgba(15, 23, 42, 0.45); --glass-border: rgba(255, 255, 255, 0.08); --glass-glow: rgba(0, 242, 254, 0.15); / สัดส่วนเลย์เอาต์และการจัดเรียง (Responsive Breakpoints) / --container-max-width: 1200px; --header-height: 80px; / ความลื่นไหลในการแสดงผล (Transition & Anim) / --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); / ตัวแปรสีเพิ่มเติมเพื่อรองรับ Light Mode / --header-bg: rgba(7, 11, 20, 0.7); --header-bg-scroll: rgba(7, 11, 20, 0.9); --nav-menu-bg: rgba(10, 15, 29, 0.95); --footer-bg: #05080e; --input-bg: rgba(255, 255, 255, 0.03); --item-bg-subtle: rgba(255, 255, 255, 0.03); --border-subtle: rgba(255, 255, 255, 0.05); --orb-opacity: 0.15; --project-text-color: #070b14; --btn-secondary-bg: rgba(255, 255, 255, 0.05); --btn-secondary-hover-bg: rgba(255, 255, 255, 0.1); --btn-secondary-text: #ffffff; --contact-link-color: #00f2fe; / ไอคอนและปุ่มสลับธีม / --toggle-btn-bg: rgba(255, 255, 255, 0.05); --toggle-btn-border: rgba(255, 255, 255, 0.1); --toggle-btn-color: #ffffff; } [data-theme="light"] { --color-bg-deep: #f1f5f9; --color-bg-dark: #ffffff; --color-text-white: #0f172a; --color-text-gray: #475569; / สไตล์สำหรับ Glassmorphism ในโหมดสว่าง / --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(15, 23, 42, 0.08); --glass-glow: rgba(0, 242, 254, 0.08); / ตัวแปรสีเพิ่มเติมสำหรับ Light Mode / --header-bg: rgba(241, 245, 249, 0.7); --header-bg-scroll: rgba(241, 245, 249, 0.95); --nav-menu-bg: rgba(255, 255, 255, 0.95); --footer-bg: #e2e8f0; --input-bg: rgba(15, 23, 42, 0.04); --item-bg-subtle: rgba(15, 23, 42, 0.03); --border-subtle: rgba(15, 23, 42, 0.06); --orb-opacity: 0.08; --project-text-color: #ffffff; --btn-secondary-bg: rgba(15, 23, 42, 0.05); --btn-secondary-hover-bg: rgba(15, 23, 42, 0.1); --btn-secondary-text: #0f172a; --contact-link-color: #4facfe; --toggle-btn-bg: rgba(15, 23, 42, 0.05); --toggle-btn-border: rgba(15, 23, 42, 0.1); --toggle-btn-color: #0f172a; } / ========================================================================== BASE RESET (คืนค่าตั้งต้นเพื่อความยืดหยุ่นในทุกเบราว์เซอร์) ========================================================================== / { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; /* บังคับให้การกดเมนูเลื่อนอย่างลื่นไหล / } body { font-family: var(--font-primary); background-color: var(--color-bg-deep); color: var(--color-text-white); line-height: 1.6; overflow-x: hidden; / ป้องกันหน้าจอเลื่อนหลุดขอบข้างในมือถือ / -webkit-font-smoothing: antialiased; } / ลิงก์และปุ่ม / a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } / ========================================================================== BACKGROUND ORBS (ลูกบอลเรืองแสงพื้นหลัง ขยับช้าๆ เพิ่มความลึกให้ดีไซน์) ========================================================================== / .glow-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: var(--orb-opacity); animation: orb-float 20s infinite alternate ease-in-out; } .orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: #00f2fe; } .orb-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #fc67fa; animation-delay: -10s; } @keyframes orb-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(5%, 10%) scale(1.1); } } / ========================================================================== LAYOUT CONTAINERS (จัดตำแหน่งเนื้อหาให้อยู่ตรงกลางและกว้างพอดีสำหรับหน้าจอใหญ่) ========================================================================== / .container { width: 100%; max-width: var(--container-max-width); margin: 0 auto; / การใช้ rem/em ช่วยปรับระยะขอบด้านข้างอย่างยืดหยุ่นตามอุปกรณ์ / padding: 0 1.5rem; } .section { padding: 6rem 0; / ระยะห่างความสูงแต่ละ Section / } .section-header { text-align: center; margin-bottom: 4rem; } .section-title { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } .section-subtitle { color: var(--color-text-gray); font-size: 1.1rem; } / ========================================================================== GLASSMORPHISM BASE CLASS (คลาสกระจกฝ้า ตกแต่งการสะท้อน) ========================================================================== / .glass { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: var(--transition-smooth); } .glass:hover { border-color: rgba(0, 242, 254, 0.25); box-shadow: 0 12px 40px 0 rgba(0, 242, 254, 0.08); } / ========================================================================== COMPONENTS: BUTTONS (ปุ่มกดแบบไล่ระดับสีและเอฟเฟกต์ Glass) ========================================================================== / .btn { display: inline-block; padding: 0.8rem 1.8rem; font-family: var(--font-primary); font-weight: 600; border-radius: 50px; cursor: pointer; transition: var(--transition-smooth); border: none; outline: none; text-align: center; } .btn-primary { background: var(--gradient-primary); color: #070b14; box-shadow: 0 4px 15px rgba(0, 242, 254, 0.3); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 242, 254, 0.5); } .btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--glass-border); backdrop-filter: blur(5px); } .btn-secondary:hover { background: var(--btn-secondary-hover-bg); border-color: var(--border-subtle); transform: translateY(-3px); } / ========================================================================== HEADER & NAVIGATION BAR (ปรับให้คงที่ด้านบนและโปร่งใส) ========================================================================== / .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-border); z-index: 100; display: flex; align-items: center; transition: var(--transition-smooth); } / เมือสกรอลหน้าเว็บลง ให้ Header แนบชิดขึ้นและเล็กลง / .header.scroll-active { height: 70px; background: var(--header-bg-scroll); } .navbar { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; letter-spacing: -1px; } .logo span { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-menu { display: flex; gap: 2.5rem; list-style: none; } .nav-link { font-size: 1rem; font-weight: 500; color: var(--color-text-gray); position: relative; padding: 0.5rem 0; transition: var(--transition-smooth); } .nav-link:hover, .nav-link.active { color: var(--color-text-white); } / สร้างเส้นขีดล่างของเมนูแบบอนิเมชัน / .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient-primary); transition: var(--transition-smooth); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } / ปุ่ม Hamburger (ถูกซ่อนบนหน้าจอขนาดใหญ่) / .hamburger-toggle { display: none; flex-direction: column; justify-content: space-between; width: 25px; height: 18px; background: transparent; border: none; cursor: pointer; z-index: 101; } .hamburger-toggle .bar { width: 100%; height: 2px; background-color: var(--color-text-white); border-radius: 4px; transition: var(--transition-smooth); } / ========================================================================== HERO SECTION (พื้นที่แนะนำตัว โดดเด่นเป็นพิเศษ) ========================================================================== / .hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--header-height); position: relative; } .hero-container { display: flex; justify-content: space-between; align-items: center; gap: 3rem; } .hero-content { flex: 1; max-width: 650px; } .hero-profile { flex: 1; display: flex; justify-content: center; align-items: center; } .profile-img-wrapper { width: 320px; height: 320px; border-radius: 50% !important; overflow: hidden; border: 3px solid var(--glass-border); box-shadow: 0 0 30px rgba(0, 242, 254, 0.2); display: flex; justify-content: center; align-items: center; } .profile-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: var(--transition-smooth); } .profile-img-wrapper:hover .profile-img { transform: scale(1.05); } .hero-tagline { font-family: var(--font-heading); font-size: 1.1rem; color: #00f2fe; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; display: inline-block; } .hero-title { font-family: var(--font-heading); font-size: 3.5rem; line-height: 1.2; font-weight: 800; margin-bottom: 1.5rem; } .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-desc { font-size: 1.2rem; color: var(--color-text-gray); margin-bottom: 2.5rem; max-width: 600px; } .hero-buttons { display: flex; gap: 1.5rem; } / ========================================================================== ABOUT ME SECTION ========================================================================== / .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; } .about-card, .skills-card { padding: 3rem; } .about-card h3, .skills-card h3 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1.5rem; } .about-text { color: var(--color-text-gray); margin-bottom: 1.5rem; } .about-text:last-of-type { margin-bottom: 0; } .skills-grid { display: flex; flex-direction: column; gap: 2rem; } .skill-category h4 { color: #4facfe; font-size: 1.1rem; margin-bottom: 1rem; font-family: var(--font-heading); } .skill-tags { display: flex; flex-wrap: wrap; gap: 0.8rem; } .skill-tag { background: var(--item-bg-subtle); border: 1px solid var(--glass-border); padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; transition: var(--transition-smooth); } .skill-tag:hover { background: rgba(0, 242, 254, 0.1); border-color: rgba(0, 242, 254, 0.3); color: #00f2fe; transform: translateY(-2px); } / Custom Profile details and hobbies list / .profile-details-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .profile-detail-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.8rem; } .profile-detail-item:last-child { border-bottom: none; padding-bottom: 0; } .detail-label { font-weight: 600; color: var(--color-text-gray); font-size: 0.95rem; } .detail-value { color: var(--color-text-white); font-weight: 500; text-align: right; } .sub-section-title { margin-top: 2.5rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; } .card-icon-title { margin-right: 0.5rem; } .hobbies-list { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1rem; } .hobby-item { display: flex; align-items: center; gap: 1rem; background: var(--item-bg-subtle); border: 1px solid var(--glass-border); padding: 0.8rem 1.2rem; border-radius: 12px; transition: var(--transition-smooth); } .hobby-item:hover { background: rgba(0, 242, 254, 0.05); border-color: rgba(0, 242, 254, 0.2); transform: translateX(5px); } .hobby-icon { font-size: 1.8rem; } .hobby-content { display: flex; flex-direction: column; } .hobby-title { font-weight: 600; color: var(--color-text-white); font-size: 1rem; } .hobby-desc { color: var(--color-text-gray); font-size: 0.85rem; } .contact-link { color: var(--contact-link-color); transition: var(--transition-smooth); } .contact-link:hover { color: #fff; text-decoration: underline; } / ========================================================================== PROJECTS SECTION (แสดงด้วย CSS Grid Card) ========================================================================== / .projects-grid { display: grid; / auto-fit และ minmax ช่วยจัดการการ์ดผลงานให้ Responsive อัตโนมัติ / grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; } .project-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; } .project-img-wrapper { position: relative; width: 100%; height: 200px; overflow: hidden; } .project-img-placeholder { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--project-text-color); transition: var(--transition-smooth); } .project-card:hover .project-img-placeholder { transform: scale(1.05); } .project-info { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; } .project-title { font-family: var(--font-heading); font-size: 1.4rem; margin-bottom: 0.8rem; } .project-desc { color: var(--color-text-gray); font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; / ช่วยให้การ์ดยืดสูงเท่ากัน แม้เนื้อหาจะยาวต่างกัน / } .project-tech { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .tech-tag { font-size: 0.8rem; font-weight: 600; background: var(--item-bg-subtle); color: var(--color-text-gray); padding: 0.3rem 0.8rem; border-radius: 4px; } .project-links { display: flex; gap: 1.5rem; } .project-link { font-size: 0.95rem; font-weight: 600; color: #00f2fe; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition-smooth); } .project-link:hover { color: #ffffff; text-decoration: underline; } .project-link-disabled { font-size: 0.9rem; font-weight: 500; color: var(--color-text-gray); display: inline-flex; align-items: center; gap: 0.5rem; opacity: 0.8; } / ========================================================================== CONTACT SECTION (ช่องทางติดต่อและแบบฟอร์มตรวจสอบข้อมูล) ========================================================================== / .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; } .contact-info-card { padding: 3rem; display: flex; flex-direction: column; } .contact-info-card h3 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1.5rem; } .contact-desc { color: var(--color-text-gray); margin-bottom: 2rem; } .contact-details { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; } .contact-item { display: flex; align-items: center; gap: 1rem; } .contact-icon { font-size: 1.5rem; } .contact-text { font-size: 1.05rem; } .social-links { display: flex; gap: 1.5rem; } .social-link { font-weight: 600; font-size: 1rem; color: #4facfe; transition: var(--transition-smooth); } .social-link:hover { color: #00f2fe; transform: translateY(-2px); } / สไตล์กล่องฟอร์ม / .contact-form { padding: 3rem; display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-size: 0.95rem; font-weight: 500; color: var(--color-text-gray); } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem 1rem; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--color-text-white); font-family: var(--font-primary); font-size: 1rem; outline: none; transition: var(--transition-smooth); } .form-group input:focus, .form-group textarea:focus { border-color: #00f2fe; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 10px rgba(0, 242, 254, 0.1); } / การจัดการข้อผิดพลาดข้อมูล Form / .error-msg { color: #ff5858; font-size: 0.85rem; display: none; } .form-group.invalid input, .form-group.invalid textarea { border-color: #ff5858; } .form-group.invalid .error-msg { display: block; } .form-success-msg { background: rgba(46, 213, 115, 0.1); color: #2ed573; border: 1px solid rgba(46, 213, 115, 0.2); padding: 1rem; border-radius: 8px; text-align: center; font-weight: 500; display: none; } / ========================================================================== FOOTER ========================================================================== / .footer { padding: 2.5rem 0; border-top: 1px solid var(--glass-border); text-align: center; background: var(--footer-bg); } .footer-content p { color: var(--color-text-gray); font-size: 0.95rem; } / ========================================================================== RESPONSIVE DESIGN (MEDIA QUERIES) การควบคุมและปรับแต่งเลย์เอาต์ตามขนาดหน้าจอต่างๆ ========================================================================== / / 1. สำหรับขนาด Tablet & Mobile (กว้างน้อยกว่า 992px) / @media screen and (max-width: 992px) { .section { padding: 5rem 0; } .hero-title { font-size: 2.8rem; } .hero-container { flex-direction: column-reverse; text-align: center; gap: 2rem; padding-top: 2rem; } .hero-content { max-width: 100%; } .hero-buttons { justify-content: center; } .profile-img-wrapper { width: 260px; height: 260px; } .about-grid, .contact-grid { grid-template-columns: 1fr; / ยุบจาก Grid 2 คอลัมน์เหลือคอลัมน์เดียว / gap: 2rem; } .about-card, .skills-card, .contact-info-card, .contact-form { padding: 2rem; / ลด Padding เพื่อเว้นระยะที่สวยงาม / } } / 2. สำหรับมือถือ (กว้างน้อยกว่า 768px) - เปลี่ยนเมนูเป็น Hamburger / @media screen and (max-width: 768px) { .hero-title { font-size: 2.2rem; } .hero-desc { font-size: 1.05rem; margin-bottom: 2rem; } / ซ่อน Navbar ปกติ และเปลี่ยนเป็นแบบสไลด์ทับเต็มจอ / .nav-menu { position: fixed; top: 0; right: -100%; / เลื่อนไปซ่อนทางขวาของหน้าจอ / width: 80%; max-width: 400px; height: 100vh; background: var(--nav-menu-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-left: 1px solid var(--glass-border); flex-direction: column; justify-content: center; align-items: center; gap: 3rem; transition: right 0.4s ease-in-out; z-index: 100; } / คลาสที่เพิ่มผ่าน JavaScript เพื่อเลื่อนเมนูออกมา / .nav-menu.open { right: 0; } / แสดงปุ่ม Hamburger / .hamburger-toggle { display: flex; } / เปลี่ยนรูปทรง Hamburger เป็นกากบาท (X) เมื่อเปิดเมนู / .hamburger-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger-toggle.active .bar:nth-child(2) { opacity: 0; } .hamburger-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .section-title { font-size: 2rem; } } / 3. สำหรับหน้าจอมือถือเล็กมาก (กว้างน้อยกว่า 480px) / @media screen and (max-width: 480px) { .hero-title { font-size: 1.8rem; } .hero-buttons { flex-direction: column; / ปุ่มเรียงแนวตั้ง / gap: 1rem; } .btn { width: 100%; / ปุ่มขยายเต็มความกว้าง / } .projects-grid { grid-template-columns: 1fr; / ยุบคอลัมน์การ์ดให้มีแค่ตัวเดียว / } } / ========================================================================== THEME TOGGLE BUTTON STYLES ========================================================================== / .theme-toggle-wrapper { display: flex; align-items: center; } .theme-toggle { background: var(--toggle-btn-bg); border: 1px solid var(--toggle-btn-border); color: var(--toggle-btn-color); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: var(--transition-smooth); padding: 0; outline: none; position: relative; overflow: hidden; margin-left: 1rem; } .theme-toggle:hover { transform: scale(1.1); background: var(--btn-secondary-hover-bg); border-color: var(--contact-link-color); } .theme-toggle svg { width: 20px; height: 20px; position: absolute; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } / Show/hide icons depending on theme / [data-theme="light"] .theme-toggle .sun-icon { transform: translateY(40px); opacity: 0; } [data-theme="light"] .theme-toggle .moon-icon { transform: translateY(0); opacity: 1; } .theme-toggle .sun-icon { transform: translateY(0); opacity: 1; } .theme-toggle .moon-icon { transform: translateY(-40px); opacity: 0; } / ปรับระยะขอบและตำแหน่งในโมบายล์ / @media screen and (max-width: 768px) { .theme-toggle { margin-left: 0; margin-right: 1rem; } } / ========================================================================== STICKY BOTTOM MENU (สำหรับ Mobile & Tablet) ========================================================================== / .sticky-bottom-menu { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 480px; height: 65px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 50px; display: none; / ซ่อนบน Desktop / justify-content: space-around; align-items: center; padding: 0 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); z-index: 999; transition: var(--transition-smooth); } .sticky-menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-gray); font-size: 0.75rem; font-weight: 500; transition: var(--transition-smooth); text-decoration: none; width: 65px; height: 100%; gap: 4px; } .sticky-menu-item svg { width: 22px; height: 22px; transition: var(--transition-smooth); } .sticky-menu-item:hover, .sticky-menu-item.active { color: var(--color-text-white); } .sticky-menu-item.active svg { color: #00f2fe; transform: translateY(-2px); } / แสดงผลเฉพาะบนหน้าจอ Tablet และ Mobile (ต่ำกว่า 768px) / @media screen and (max-width: 768px) { .sticky-bottom-menu { display: flex; } / ป้องกันแถบเมนูบังปุ่ม/ตัวหนังสือล่างสุด */ .footer { padding-bottom: 6rem; } }

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