File manager - Edit - /home/webapp69.cm.in.th/u69319090033/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>Portfolio – นาย ธนากร จิ้มจีน</title> <meta name="description" content="Portfolio ของนาย ธนากร จิ้มจีน นักศึกษาวิทยาลัยเชียงใหม่ สาขาอิเล็คทรอนิกส์คอมพิวเตอร์" /> <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=Noto+Sans+Thai:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;600;700;800&display=swap" rel="stylesheet" /> <style> :root { --primary: #6c63ff; --primary-dark: #4c46cc; --secondary: #ff6584; --accent: #43e97b; --gold: #f7c948; --bg-dark: #0d0d1a; --bg-card: #15152a; --bg-card2: #1e1e38; --text-main: #e8e8f5; --text-muted: #9a9ab8; --border: rgba(108,99,255,0.25); --glow: 0 0 40px rgba(108,99,255,0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans Thai', 'Outfit', sans-serif; background: var(--bg-dark); color: var(--text-main); overflow-x: hidden; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; } #particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .particle { position: absolute; border-radius: 50%; animation: float linear infinite; opacity: 0; } @keyframes float { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.4; } 100% { transform: translateY(-10vh) scale(1); opacity: 0; } } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1rem 3rem; background: rgba(13,13,26,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .nav-logo { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.4rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color .3s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width .3s; } .nav-links a:hover { color: var(--text-main); } .nav-links a:hover::after { width: 100%; } section { position: relative; z-index: 1; } #cover { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 4rem; background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(108,99,255,0.35) 0%, transparent 70%), radial-gradient(ellipse 60% 60% at 80% 110%, rgba(255,101,132,0.2) 0%, transparent 60%), var(--bg-dark); } .cover-inner { max-width: 900px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; } .cover-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.4rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(108,99,255,0.1); font-size: .85rem; color: var(--primary); font-weight: 600; animation: fadeDown .8s ease both; } .cover-badge span { color: var(--gold); } .cover-photo-wrap { position: relative; animation: fadeUp 1s ease .2s both; } .cover-photo-wrap::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent)); animation: spin 6s linear infinite; z-index: 0; } .cover-photo-wrap::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(255,101,132,0.2)); z-index: -1; animation: spin 8s linear infinite reverse; } .cover-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; border: 4px solid var(--bg-dark); } @keyframes spin { to { transform: rotate(360deg); } } .cover-name { animation: fadeUp 1s ease .4s both; } .cover-name h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; background: linear-gradient(135deg, #ffffff 30%, var(--primary) 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cover-name .subtitle { font-size: 1.1rem; color: var(--primary); font-weight: 600; margin-top: .4rem; } .cover-tags { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; animation: fadeUp 1s ease .6s both; } .tag { padding: .45rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; border: 1px solid var(--border); background: rgba(255,255,255,0.04); transition: all .3s; } .tag:hover { background: rgba(108,99,255,0.2); border-color: var(--primary); transform: translateY(-2px); } .tag.primary { background: rgba(108,99,255,0.15); border-color: var(--primary); color: #c0bcff; } .tag.secondary { background: rgba(255,101,132,0.12); border-color: rgba(255,101,132,0.4); color: #ffb3c3; } .tag.accent { background: rgba(67,233,123,0.1); border-color: rgba(67,233,123,0.3); color: #a8f5c2; } .cover-school { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 2.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; animation: fadeUp 1s ease .8s both; box-shadow: var(--glow); flex-wrap: wrap; justify-content: center; } .school-icon { width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; } .school-info h3 { font-size: 1.15rem; font-weight: 700; } .school-info p { font-size: .9rem; color: var(--text-muted); margin-top: .25rem; } .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .8rem; animation: fadeUp 1s ease 1s both; margin-top: 1rem; } .scroll-arrow { width: 24px; height: 24px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); animation: bounce 1.5s ease infinite; } @keyframes bounce { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(6px); } } #toc { padding: 5rem 2rem; background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-card) 100%); } .section-header { text-align: center; margin-bottom: 3rem; } .section-header .label { display: inline-block; padding: .3rem 1rem; background: rgba(108,99,255,0.15); border: 1px solid rgba(108,99,255,0.3); border-radius: 999px; color: var(--primary); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; } .section-header h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; } .section-header p { color: var(--text-muted); margin-top: .6rem; font-size: 1rem; } .toc-grid { max-width: 860px; margin: 0 auto; display: grid; gap: 1rem; } .toc-item { display: flex; align-items: center; gap: 1.5rem; padding: 1.2rem 1.8rem; background: var(--bg-card2); border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--text-main); transition: all .3s; cursor: pointer; } .toc-item:hover { border-color: var(--primary); background: rgba(108,99,255,0.1); transform: translateX(6px); box-shadow: -4px 0 0 0 var(--primary); } .toc-num { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--primary); opacity: .5; min-width: 40px; } .toc-text h3 { font-size: 1.05rem; font-weight: 600; } .toc-text p { font-size: .85rem; color: var(--text-muted); margin-top: .2rem; } .toc-arrow { margin-left: auto; color: var(--text-muted); font-size: 1.2rem; transition: transform .3s; } .toc-item:hover .toc-arrow { transform: translateX(4px); color: var(--primary); } #profile { padding: 5rem 2rem; background: var(--bg-dark); } .profile-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: 3rem; align-items: start; } .profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 2.5rem 2rem; text-align: center; box-shadow: var(--glow); position: sticky; top: 90px; } .profile-photo-wrap { position: relative; display: inline-block; margin-bottom: 1.5rem; } .profile-photo-wrap::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); z-index: 0; } .profile-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; border: 3px solid var(--bg-card); } .profile-status { position: absolute; bottom: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-card); z-index: 2; } .profile-card h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .4rem; } .profile-card .role { color: var(--primary); font-size: .9rem; font-weight: 500; margin-bottom: 1.5rem; } .profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; } .stat-box { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 12px; padding: .8rem .5rem; } .stat-box .val { font-size: 1.3rem; font-weight: 800; color: var(--primary); } .stat-box .lbl { font-size: .72rem; color: var(--text-muted); margin-top: .2rem; } .contact-list { text-align: left; display: flex; flex-direction: column; gap: .6rem; } .contact-item { display: flex; align-items: center; gap: .8rem; font-size: .88rem; color: var(--text-muted); } .contact-item .icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .contact-item .icon.purple { background: rgba(108,99,255,0.2); } .contact-item .icon.pink { background: rgba(255,101,132,0.15); } .contact-item .icon.green { background: rgba(67,233,123,0.12); } .contact-item span { color: var(--text-main); } .profile-details { display: flex; flex-direction: column; gap: 2rem; } .detail-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; transition: border-color .3s; } .detail-card:hover { border-color: var(--primary); } .detail-card h3 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; } .detail-card h3 .icon-badge { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .info-rows { display: flex; flex-direction: column; gap: .75rem; } .info-row { display: flex; gap: 1rem; padding: .9rem 1rem; border-radius: 12px; background: var(--bg-card2); align-items: flex-start; } .info-row .key { min-width: 140px; font-size: .82rem; color: var(--text-muted); font-weight: 500; flex-shrink: 0; padding-top: .1rem; } .info-row .value { font-size: .9rem; font-weight: 500; line-height: 1.5; } .hobby-chips { display: flex; flex-wrap: wrap; gap: .6rem; } .hobby-chip { padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; border: 1px solid var(--border); background: rgba(108,99,255,0.1); color: #c0bcff; display: flex; align-items: center; gap: .4rem; transition: all .3s; } .hobby-chip:hover { background: rgba(108,99,255,0.25); transform: scale(1.05); } .edu-timeline { position: relative; padding-left: 2rem; } .edu-timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--primary) 0%, transparent 100%); } .edu-item { position: relative; margin-bottom: 1.5rem; } .edu-dot { position: absolute; left: -2.55rem; top: .3rem; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 3px solid var(--bg-card); box-shadow: 0 0 12px rgba(108,99,255,0.5); } .edu-year { font-size: .75rem; color: var(--primary); font-weight: 700; letter-spacing: .05em; margin-bottom: .3rem; } .edu-school { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; } .edu-detail { font-size: .85rem; color: var(--text-muted); } .edu-gpa { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .3rem .8rem; background: rgba(247,201,72,0.12); border: 1px solid rgba(247,201,72,0.3); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--gold); } .skill-bars { display: flex; flex-direction: column; gap: 1rem; } .skill-bar-header { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .4rem; } .skill-bar-header .skill-name { font-weight: 500; } .skill-bar-header .skill-pct { color: var(--primary); font-weight: 700; } .bar-track { height: 8px; border-radius: 999px; background: var(--bg-card2); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform-origin: left; animation: growBar 1.5s ease forwards; transform: scaleX(0); } @keyframes growBar { to { transform: scaleX(1); } } #projects { padding: 5rem 2rem; background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-card) 100%); } .projects-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .project-card { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 20px; padding: 2rem; transition: all .3s; position: relative; overflow: hidden; } .project-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); transform-origin: left; transition: transform .4s; } .project-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--glow); } .project-card:hover::before { transform: scaleX(1); } .project-icon { font-size: 2.4rem; margin-bottom: 1rem; } .project-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; } .project-card p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; } .project-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; } .project-tag { padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(108,99,255,0.15); color: #c0bcff; border: 1px solid rgba(108,99,255,0.3); } footer { padding: 3rem 2rem; text-align: center; background: var(--bg-dark); border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; } footer strong { color: var(--primary); } @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .7s; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { nav { padding: 1rem 1.5rem; } .nav-links { gap: 1rem; } .profile-grid { grid-template-columns: 1fr; } .profile-card { position: static; } } @media (max-width: 500px) { .nav-links { display: none; } } </style> </head> <body> <div id="particles"></div> <nav> <div class="nav-logo">TJ Portfolio</div> <ul class="nav-links"> <li><a href="#cover">หน้าปก</a></li> <li><a href="#toc">สารบัญ</a></li> <li><a href="#profile">ประวัติ</a></li> <li><a href="#projects">ผลงาน</a></li> </ul> </nav> <section id="cover"> <div class="cover-inner"> <div class="cover-badge">🎓 <span>Portfolio</span> · การเรียนรู้สู่สายอาชีพ</div> <div class="cover-photo-wrap"> <img class="cover-photo" src="2035.jpg" alt="ธนากร จิ้มจีน" /> </div> <div class="cover-name"> <h1>นาย ธนากร จิ้มจีน</h1> <p class="subtitle">นักศึกษาสาขาอิเล็คทรอนิกส์คอมพิวเตอร์</p> </div> <div class="cover-tags"> <span class="tag primary">🏫 วิทยาลัยเชียงใหม่</span> <span class="tag secondary">💻 อิเล็คทรอนิกส์คอมพิวเตอร์</span> <span class="tag accent">🌱 ชอบเรียนรู้สกิลใหม่ๆ</span> <span class="tag">🎵 ดนตรี & ภาพยนตร์</span> <span class="tag">🕊️ รักอิสระ</span> </div> <div class="cover-school"> <div class="school-icon">🏛️</div> <div class="school-info"> <h3>วิทยาลัยเชียงใหม่</h3> <p>สาขาวิชา อิเล็คทรอนิกส์คอมพิวเตอร์ | ปีการศึกษา 2566</p> </div> </div> <div class="scroll-cue"> <span>เลื่อนลงเพื่อดูข้อมูล</span> <div class="scroll-arrow"></div> </div> </div> </section> <section id="toc"> <div class="section-header reveal"> <div class="label">สารบัญ</div> <h2>Table of Contents</h2> <p>เลือกหัวข้อที่ต้องการเพื่อไปยังส่วนนั้นได้เลย</p> </div> <div class="toc-grid reveal"> <a class="toc-item" href="#cover"> <div class="toc-num">01</div> <div class="toc-text"><h3>หน้าปก</h3><p>แนะนำตัว · วิทยาลัยเชียงใหม่ · สาขาอิเล็คทรอนิกส์คอมพิวเตอร์</p></div> <div class="toc-arrow">→</div> </a> <a class="toc-item" href="#profile"> <div class="toc-num">02</div> <div class="toc-text"><h3>ประวัติส่วนตัว</h3><p>ข้อมูลส่วนตัว · ช่องทางติดต่อ · งานอดิเรก</p></div> <div class="toc-arrow">→</div> </a> <a class="toc-item" href="#profile"> <div class="toc-num">03</div> <div class="toc-text"><h3>ประวัติการศึกษา</h3><p>สถาบัน · ระดับการศึกษา · GPA</p></div> <div class="toc-arrow">→</div> </a> <a class="toc-item" href="#projects"> <div class="toc-num">04</div> <div class="toc-text"><h3>ผลงาน / Portfolio</h3><p>โปรเจกต์และความสามารถ</p></div> <div class="toc-arrow">→</div> </a> </div> </section> <section id="profile"> <div style="max-width:1100px;margin:0 auto;"> <div class="section-header reveal" style="margin-bottom:3rem;"> <div class="label">ประวัติส่วนตัว</div> <h2>Personal Profile</h2> <p>รู้จักฉันให้มากขึ้น</p> </div> <div class="profile-grid"> <div class="profile-card reveal"> <div class="profile-photo-wrap"> <img class="profile-photo" src="2035.jpg" alt="ธนากร จิ้มจีน" /> <div class="profile-status"></div> </div> <h2>ธนากร จิ้มจีน</h2> <p class="role">นักศึกษา · อิเล็คทรอนิกส์คอมพิวเตอร์</p> <div class="profile-stats"> <div class="stat-box"><div class="val">2.8</div><div class="lbl">GPA</div></div> <div class="stat-box"><div class="val">ม.6</div><div class="lbl">ระดับการศึกษา</div></div> <div class="stat-box"><div class="val">66</div><div class="lbl">ปีที่ศึกษา</div></div> <div class="stat-box"><div class="val">CM</div><div class="lbl">จ.เชียงใหม่</div></div> </div> <div class="contact-list"> <div class="contact-item"><div class="icon purple">📞</div><span>063-410-1649</span></div> <div class="contact-item"><div class="icon pink">✉️</div><span>mongpcx43@gmail.com</span></div> <div class="contact-item"><div class="icon green">📍</div><span style="font-size:.82rem;">20/10 กู่เต้า ซอย 3 ศรีภูมิ อ.เมือง จ.เชียงใหม่</span></div> </div> </div> <div class="profile-details"> <div class="detail-card reveal"> <h3><div class="icon-badge">👤</div>ข้อมูลส่วนตัว</h3> <div class="info-rows"> <div class="info-row"><div class="key">ชื่อ-สกุล</div><div class="value">นาย ธนากร จิ้มจีน</div></div> <div class="info-row"><div class="key">ที่อยู่</div><div class="value">20/10 กู่เต้า ซอย 3 ศรีภูมิ ถนนสนามกีฬา อำเภอเมือง จังหวัดเชียงใหม่</div></div> <div class="info-row"><div class="key">โทรศัพท์</div><div class="value">063-410-1649</div></div> <div class="info-row"><div class="key">อีเมล</div><div class="value">mongpcx43@gmail.com</div></div> </div> </div> <div class="detail-card reveal"> <h3><div class="icon-badge">🎯</div>งานอดิเรก & ความสามารถพิเศษ</h3> <p style="font-size:.88rem;color:var(--text-muted);margin-bottom:1rem;">เป็นคนชอบอิสระ ชอบเรียนรู้สกิลใหม่ๆ และมองหาโอกาสในการพัฒนาตัวเองอยู่เสมอ</p> <div class="hobby-chips"> <span class="hobby-chip">🎵 ดนตรี</span> <span class="hobby-chip">🎬 ภาพยนตร์</span> <span class="hobby-chip">📚 เรียนรู้สกิลใหม่</span> <span class="hobby-chip">🕊️ รักอิสระ</span> <span class="hobby-chip">🍽️ กินจุ 😄</span> </div> </div> <div class="detail-card reveal"> <h3><div class="icon-badge">🎓</div>ประวัติการศึกษา</h3> <div class="edu-timeline"> <div class="edu-item"> <div class="edu-dot"></div> <div class="edu-year">ปีการศึกษา 2566</div> <div class="edu-school">วิทยาลัยเชียงใหม่</div> <div class="edu-detail">สาขาวิชา อิเล็คทรอนิกส์คอมพิวเตอร์</div> </div> <div class="edu-item"> <div class="edu-dot"></div> <div class="edu-year">ระดับ ม.6 (กศน.)</div> <div class="edu-school">ผาขาว</div> <div class="edu-detail">มัธยมศึกษาตอนปลาย ผ่านระบบ กศน.</div> <div class="edu-gpa">⭐ GPA 2.80</div> </div> </div> </div> <div class="detail-card reveal"> <h3><div class="icon-badge">💡</div>ทักษะ & ความสามารถ</h3> <div class="skill-bars"> <div class="skill-bar-item"> <div class="skill-bar-header"><span class="skill-name">อิเล็คทรอนิกส์</span><span class="skill-pct">75%</span></div> <div class="bar-track"><div class="bar-fill" style="width:75%"></div></div> </div> <div class="skill-bar-item"> <div class="skill-bar-header"><span class="skill-name">คอมพิวเตอร์</span><span class="skill-pct">80%</span></div> <div class="bar-track"><div class="bar-fill" style="width:80%"></div></div> </div> <div class="skill-bar-item"> <div class="skill-bar-header"><span class="skill-name">การเรียนรู้ด้วยตนเอง</span><span class="skill-pct">90%</span></div> <div class="bar-track"><div class="bar-fill" style="width:90%"></div></div> </div> <div class="skill-bar-item"> <div class="skill-bar-header"><span class="skill-name">ดนตรี</span><span class="skill-pct">70%</span></div> <div class="bar-track"><div class="bar-fill" style="width:70%"></div></div> </div> </div> </div> </div> </div> </div> </section> <section id="projects"> <div class="section-header reveal"> <div class="label">ผลงาน</div> <h2>Portfolio & Projects</h2> <p>สิ่งที่ฉันสนใจและกำลังพัฒนา</p> </div> <div class="projects-grid"> <div class="project-card reveal"> <div class="project-icon">💻</div> <h3>การเรียนรู้ด้านคอมพิวเตอร์</h3> <p>ศึกษาและฝึกฝนทักษะด้านคอมพิวเตอร์อย่างต่อเนื่อง ทั้งซอฟต์แวร์และฮาร์ดแวร์ในสาขาอิเล็คทรอนิกส์คอมพิวเตอร์</p> <div class="project-tags"><span class="project-tag">Hardware</span><span class="project-tag">Software</span></div> </div> <div class="project-card reveal"> <div class="project-icon">🔌</div> <h3>อิเล็คทรอนิกส์</h3> <p>เรียนรู้วงจรอิเล็คทรอนิกส์ การประกอบวงจร และการซ่อมบำรุงอุปกรณ์ไฟฟ้า</p> <div class="project-tags"><span class="project-tag">Circuit</span><span class="project-tag">Repair</span></div> </div> <div class="project-card reveal"> <div class="project-icon">🎵</div> <h3>ดนตรี & ความคิดสร้างสรรค์</h3> <p>ชื่นชอบเสียงดนตรีและภาพยนตร์ ช่วยพัฒนาความคิดสร้างสรรค์และมุมมองใหม่ๆ ในชีวิต</p> <div class="project-tags"><span class="project-tag">Music</span><span class="project-tag">Film</span></div> </div> <div class="project-card reveal"> <div class="project-icon">🌱</div> <h3>การพัฒนาตนเอง</h3> <p>เรียนรู้สกิลใหม่ๆ อยู่ตลอดเวลา ชอบเปิดรับประสบการณ์และความรู้ที่ท้าทายตลอดเส้นทางการเรียนรู้สู่สายอาชีพ</p> <div class="project-tags"><span class="project-tag">Self-learning</span><span class="project-tag">Growth</span></div> </div> </div> </section> <footer> <p>© 2566 <strong>นาย ธนากร จิ้มจีน</strong> · วิทยาลัยเชียงใหม่ · อิเล็คทรอนิกส์คอมพิวเตอร์</p> <p style="margin-top:.5rem;font-size:.8rem;">จัดทำเพื่อแนะนำตัวและนำเสนอประวัติส่วนตัว</p> </footer> <script> const container = document.getElementById('particles'); const colors = ['#6c63ff','#ff6584','#43e97b','#f7c948','#a78bfa']; for (let i = 0; i < 40; i++) { const p = document.createElement('div'); p.className = 'particle'; const size = Math.random() * 6 + 2; p.style.cssText = `width:${size}px;height:${size}px;left:${Math.random()*100}%;background:${colors[Math.floor(Math.random()*colors.length)]};animation-duration:${Math.random()*15+8}s;animation-delay:${Math.random()*10}s;`; container.appendChild(p); } const revealEls = document.querySelectorAll('.reveal'); const observer = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } }); }, { threshold: 0.12 }); revealEls.forEach(el => observer.observe(el)); document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if (t) t.scrollIntoView({ behavior: 'smooth' }); }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.31 |
proxy
|
phpinfo
|
Settings