From 21658c450d0261f0ac03e26c9adc9343a152fe6c Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Mon, 24 Feb 2025 04:00:06 +0700
Subject: [PATCH] redesign contact links

---
 index-avatar.html | 205 ++++++++++++-------------------------------
 index.html        | 218 +++++++++++-----------------------------------
 2 files changed, 107 insertions(+), 316 deletions(-)
diff --git a/index-avatar.html b/index-avatar.html
index e455519..e779dd3 100644
--- a/index-avatar.html
+++ b/index-avatar.html
@@ -2,18 +2,36 @@
 <html>
   <head>
     <link rel="stylesheet" href="https://www.techtransthai.org/style.css">
+    <link rel="stylesheet" href="/customwidgets.css">
     <meta http-equiv="Content-Language" content="th">
     <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
     <meta name="description" content="Late Night Defender's profile">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Late Night Defender's profile</title>
-    <link rel="icon" type="image/webp" href="icons/icon.webp">
+    <link rel="icon" type="image/webp" href="/icons/icon.webp">
   </head>
   
   <body>
 
-    <div style="display: flex; justify-content: center; align-items: center; margin-top: 2cm;">
-      <img src="icons/avatar.webp" alt="latenightdef" width="160" height="160" style="border-radius: 80px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
+    <div class="topbar stealth">
+      <div style="display: flex; align-items: center;">
+        <a class="button header selected">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><path d="m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 1.5 c 0 1 1 1 1 1 h 10 s 1 0 1 -1 v -1.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0" fill="currentColor"/></svg>
+          <p style="margin-left: 5px;">About</p>
+        </a>
+        <a href="/works" class="button header">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 1.5 2 h 2 c 0.277344 0 0.5 0.222656 0.5 0.5 v 12 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -2 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -12 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 5.5 4 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 10 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -10 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 8.5 3 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 11 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -11 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 10.707031 1.460938 l 0.964844 -0.261719 c 0.265625 -0.070313 0.539063 0.089843 0.613281 0.355469 l 3.363282 12.558593 c 0.070312 0.265625 -0.085938 0.539063 -0.351563 0.609375 l -0.96875 0.261719 c -0.265625 0.070313 -0.539063 -0.089844 -0.613281 -0.355469 l -3.363282 -12.554687 c -0.070312 -0.269531 0.085938 -0.542969 0.355469 -0.613281 z m 0 0"/></g></svg>
+          <p style="margin-left: 5px;">Works</p>
+        </a>
+        <a href="/links" class="button header">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 4 11.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -2.199219 1.800781 -4 4 -4 h 3 c 2.199219 0 4 1.800781 4 4 c 0 1.640624 -0.992188 3.070312 -2.421875 3.679687 l -0.785156 -1.839844 c 0.710937 -0.304687 1.207031 -1 1.207031 -1.839843 c 0 -1.125 -0.875 -2 -2 -2 h -3 c -1.125 0 -2 0.875 -2 2 s 0.875 2 2 2 z m 0 0"/><path d="m 9 13.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -1.621094 0.96875 -3.03125 2.367188 -3.65625 l 0.816406 1.828124 c -0.699219 0.3125 -1.183594 1 -1.183594 1.828126 c 0 1.125 0.875 2 2 2 h 3 c 1.125 0 2 -0.875 2 -2 s -0.875 -2 -2 -2 v -2 c 2.199219 0 4 1.800781 4 4 c 0 2.199218 -1.800781 4 -4 4 z m 0 0"/></g></svg>
+          <p style="margin-left: 5px;">Links</p>
+        </a>
+      </div>
+    </div>
+
+    <div style="display: flex; justify-content: center; align-items: center; margin-top: 3cm;">
+      <img src="/icons/avatar.webp" alt="profile picture" width="160" height="160" style="border-radius: 80px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
     </div>
     <div class="name">
       <h1 style="text-align: center;">Late Night Defender</h1>
@@ -25,12 +43,43 @@
         <a class="button accent pill" href="https://resume.superresume.com/ViewResume?Key=6EExIkqpFyFVL0DxIkwQxFuwINuduo&Enc=biygyyt8wMYenvVirUTScBSggyLic8">Super Resume</a>
         <a class="button pill" href="https://cloud.techtransthai.org/s/b9dJeTMp4GxX77t">PDF Resume</a>
       </div>
+      <div style="display: flex;">
+      <a alt="Telegram" class="button circle" target="_blank" rel="noopener noreferrer" href="https://t.me/latenightdef">
+        <svg width="20px" height="20px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="plane" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <path d="M1.3311718,6.36592184 C5.3576954,4.67244493 8.04267511,3.5560013 9.38611094,3.01659096 C13.2218932,1.47646481 14.0189359,1.2089284 14.5384372,1.2 C14.6526967,1.19815119 14.9081723,1.22548649 15.0736587,1.35511219 C15.2133922,1.4645656 15.2518384,1.61242159 15.2702362,1.71619544 C15.288634,1.81996929 15.3115436,2.05636876 15.2933322,2.24108442 C15.0854698,4.34939964 14.1860526,9.46572464 13.7284802,11.8270738 C13.5348641,12.8262491 13.1536281,13.1612675 12.7845475,13.1940535 C11.9824498,13.265305 11.3733733,12.6823476 10.5965026,12.190753 C9.3808532,11.4215044 8.69408865,10.9426448 7.51409044,10.1920004 C6.15039834,9.32450079 7.03442319,8.84770795 7.81158733,8.06849502 C8.01497489,7.86457129 11.5490353,4.7615061 11.6174372,4.48000946 C11.625992,4.44480359 11.6339313,4.31357282 11.5531696,4.24427815 C11.472408,4.17498349 11.3532107,4.19867957 11.2671947,4.21752527 C11.1452695,4.24423848 9.20325394,5.48334063 5.44114787,7.93483171 C4.88991321,8.30022994 4.39062196,8.47826423 3.94327414,8.46893456 C3.45010907,8.45864936 2.50145729,8.19975808 1.79623221,7.97846422 C0.931244952,7.70703829 0.243770289,7.56353344 0.303633888,7.10256824 C0.334814555,6.86246904 0.677327192,6.61692024 1.3311718,6.36592184 Z" id="Path-3" fill="currentColor"></path>
+          </g>
+        </svg>
+      </a>
+      <a alt="Email" class="button circle" target="_blank" rel="noopener noreferrer" href="mailto:pongpeera.w@outlook.com">
+        <svg height="20px" viewBox="0 0 16 16" width="20px" >
+          <g fill="currentColor">
+              <path d="m 1.800781 3.019531 c -0.257812 0.050781 -0.484375 0.207031 -0.632812 0.425781 c -0.304688 0.460938 -0.183594 1.082032 0.277343 1.386719 l 5.167969 3.445313 c 0.835938 0.558594 1.9375 0.558594 2.773438 0 l 5.167969 -3.445313 c 0.460937 -0.304687 0.582031 -0.925781 0.277343 -1.386719 c -0.304687 -0.460937 -0.925781 -0.582031 -1.386719 -0.277343 l -5.167968 3.445312 c -0.171875 0.113281 -0.382813 0.113281 -0.554688 0 l -5.167968 -3.445312 c -0.222657 -0.148438 -0.492188 -0.199219 -0.753907 -0.148438 z m 0 0"/>
+              <path d="m 3 2 c -1.644531 0 -3 1.355469 -3 3 v 6 c 0 1.644531 1.355469 3 3 3 h 10 c 1.644531 0 3 -1.355469 3 -3 v -6 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 10 c 0.570312 0 1 0.429688 1 1 v 6 c 0 0.570312 -0.429688 1 -1 1 h -10 c -0.570312 0 -1 -0.429688 -1 -1 v -6 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0"/>
+          </g>
+        </svg>
+      </a>
+      <a alt="Phone" class="button circle" target="_blank" rel="noopener noreferrer" href="tel:0982891252">
+        <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 11 15 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 c -3.882812 0 -7 -3.117188 -7 -7 c 0 -0.828125 -0.671875 -1.5 -1.5 -1.5 s -1.5 0.671875 -1.5 1.5 c 0 5.503906 4.496094 10 10 10 z m 0 0"/><path d="m 15.003906 11 c 0 -0.554688 -0.445312 -1 -1 -1 h -4 c -0.550781 0 -1 0.445312 -1 1 v 1.710938 l 2 2.289062 h 1.5 c 1.382813 0 2.5 -1.121094 2.5 -2.5 z m 0 0"/><path d="m 5.003906 1 c 0.554688 0 1 0.445312 1 1 v 4 c 0 0.554688 -0.445312 1 -1 1 h -1.710937 l -2.289063 -2 v -1.5 c 0 -1.378906 1.121094 -2.5 2.5 -2.5 z m 0 0"/></g></svg>
+      </a>
+      <a alt="Matrix" class="button circle" target="_blank" rel="noopener noreferrer" href="https://matrix.to/#/@latenightdef:matrix.org">
+        <svg height="24px" width="24px" viewBox="0 0 520 520"><g fill="currentColor"></g><path d="M13.7 11.9v496.2h35.7V520H0V0h49.4v11.9zm152.6 157.3v25.1h.7c6.7-9.6 14.8-17 24.2-22.2 9.4-5.3 20.3-7.9 32.5-7.9 11.7 0 22.4 2.3 32.1 6.8s17 12.6 22.1 24c5.5-8.1 13-15.3 22.4-21.5s20.6-9.3 33.5-9.3q14.7 0 27.3 3.6c8.4 2.4 15.5 6.2 21.5 11.5s10.6 12.1 14 20.6c3.3 8.5 5 18.7 5 30.7v124.1h-50.9V249.6c0-6.2-.2-12.1-.7-17.6s-1.8-10.3-3.9-14.3c-2.2-4.1-5.3-7.3-9.5-9.7s-9.9-3.6-17-3.6c-7.2 0-13 1.4-17.4 4.1-4.4 2.8-7.9 6.3-10.4 10.8-2.5 4.4-4.2 9.4-5 15.1-.8 5.6-1.3 11.3-1.3 17v103.3h-50.9v-104c0-5.5-.1-10.9-.4-16.3-.2-5.4-1.3-10.3-3.1-14.9-1.8-4.5-4.8-8.2-9-10.9s-10.3-4.1-18.5-4.1c-2.4 0-5.6.5-9.5 1.6s-7.8 3.1-11.5 6.1-6.9 7.3-9.5 12.9-3.9 13-3.9 22.1v107.6h-50.9V169.2zm340 338.9V11.9h-35.7V0H520v520h-49.4v-11.9z" style="fill:currentColor"/></svg>
+      </a>
+      <a alt="Facebook" class="button circle" target="_blank" rel="noopener noreferrer" href="https://web.facebook.com/pongpeera054">
+        <svg width="20" height="20" viewBox="0 0 666.67 666.67"><path d="M0 0c0 138.071-111.929 250-250 250S-500 138.071-500 0c0-117.245 80.715-215.622 189.606-242.638v166.242h-51.552V0h51.552v32.919c0 85.092 38.508 124.532 122.048 124.532 15.838 0 43.167-3.105 54.347-6.211V81.986c-5.901.621-16.149.932-28.882.932-40.993 0-56.832-15.528-56.832-55.9V0h81.659l-14.028-76.396h-67.631v-171.773C-95.927-233.218 0-127.818 0 0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 666.667 333.333)"/></svg>
+      </a>
+      <a alt="Instagram" class="button circle" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/latenightdef">
+        <svg width="24" height="24" viewBox="0 0 264.583 264.583"><path fill="currentColor" d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535s.119 30.037.594 40.522c.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796s11.804-5.284 11.804-11.796c0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482s22.62 50.471 50.52 50.471 50.51-22.592 50.51-50.471-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767s-32.791-14.671-32.791-32.767c0-18.098 14.68-32.767 32.791-32.767" style="fill:currentColor"/></svg>
+      </a>
+      <a alt="Discord" class="button circle" target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/451202827549802496">
+        <svg width="24"  viewBox="0 0 47.615 36.513"><defs><clipPath id="a"><path d="M0 0h292v56.471H0z" style="fill:currentColor" transform="translate(0 11.765)"/></clipPath><clipPath id="b"><path d="M0 0h292v56.471H0z" style="fill:#fff" transform="translate(0 11.765)"/></clipPath></defs><g clip-path="url(#a)" style="fill:none" transform="matrix(.6527 0 0 .64658 0 -7.607)"><g clip-path="url(#b)"><path d="M61.796 16.494a59.4 59.4 0 0 0-15.05-4.73 44 44 0 0 0-1.928 4.003q-8.418-1.266-16.68 0a43 43 0 0 0-1.95-4.002 59.2 59.2 0 0 0-15.063 4.74C1.601 30.9-.98 44.936.31 58.772c6.317 4.717 12.44 7.583 18.458 9.458a46 46 0 0 0 3.953-6.51 39 39 0 0 1-6.225-3.03 31 31 0 0 0 1.526-1.208c12.004 5.615 25.046 5.615 36.906 0q.75.625 1.526 1.208a39 39 0 0 1-6.237 3.035 45.7 45.7 0 0 0 3.953 6.511c6.025-1.875 12.153-4.74 18.47-9.464 1.515-16.04-2.588-29.947-10.844-42.277m-37.44 33.768c-3.603 0-6.558-3.364-6.558-7.46 0-4.097 2.892-7.467 6.559-7.467 3.666 0 6.621 3.364 6.558 7.466.006 4.097-2.892 7.46-6.558 7.46m24.237 0c-3.603 0-6.558-3.364-6.558-7.46 0-4.097 2.892-7.467 6.558-7.467s6.622 3.364 6.558 7.466c0 4.097-2.891 7.46-6.558 7.46" style="fill:currentColor"/></g></g></svg>
+      </a>
     </div>
-  
-    
+
+
     <div class="grid-container">
   
-      <div class="middle">
+      <div class="middle" style="margin-top: 1cm;">
         
         <h3>Basic information</h3>
         <div class="list" >
@@ -119,150 +168,6 @@
           </a>
         </div>
 
-        <h3>Works & contributions</h3>
-
-        <div class="list" >
-          
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="work-kmitl.html" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Student at KMITL</p>
-                <p class="row-subtitle">C++, UX/UI, CI/CD, Linux, Documentation</p>
-              </div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="work-i-bitz.html" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Intern at i-bitz company limited</p>
-                <p class="row-subtitle">Python, Go, MongoDB, Docker, Kubernetes</p>
-              </div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="work-others.html" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Other works</p>
-                <p class="row-subtitle">WebDev, Cloud & Self-hosting, Email and more </p>
-              </div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-        </div>
-
-        <h3>Talks</h3>
-
-        <div class="list" >
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/techtransthai/openlkb-slides/raw/branch/main/Improving%20accessibility%20data%20on%20OpenStreetMap.pdf" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Improving accessibility data on OpenStreetMap</p>
-                <p class="row-subtitle">Bangkok Open Source Hackathon, 2023</p>
-              </div>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-        </div>
-
-        <h3>Links/Contact</h3>
-
-        <div class="list" >
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://t.me/latenightdef">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Telegram</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="mailto:pongpeera054@protonmail.com">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Email (Proton)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="mailto:pongpeera.w@outlook.com">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Email (Outlook)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="tel:0982891252">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Phone</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://f-social.techtransthai.org/@latenightdef">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Fediverse</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://pixels.techtransthai.org/i/web/profile/711147700789940225">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Pixelfed</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://matrix.to/#/@latenightdef:matrix.org">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Matrix</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://web.facebook.com/pongpeera054">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Facebook (May take longer to respond)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/latenightdef">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Instagram (May take longer to respond)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a>
-            <div class="propertyrow" style="margin-left: 0.5cm;">
-              <p class="propertyrow-property">Discord username (May take longer to respond)</p>
-              <p class="propertyrow-value">latenightdef</p>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a>
-            <div class="propertyrow" style="margin-left: 0.5cm;">
-              <p class="propertyrow-property">LINE (line.me) ID (May take longer to respond)</p>
-              <p class="propertyrow-value">pongpeera054</p>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="links-contrib.html">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Contributor profiles</p>
-                <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="links-misc.html">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Miscellaneous</p>
-                <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-        </div>
       </div>
     </div>
   
diff --git a/index.html b/index.html
index e42962c..ae40ac3 100644
--- a/index.html
+++ b/index.html
@@ -2,30 +2,36 @@
 <html>
   <head>
     <link rel="stylesheet" href="https://www.techtransthai.org/style.css">
-    <link rel="stylesheet" href="customwidgets.css">
+    <link rel="stylesheet" href="/customwidgets.css">
     <meta http-equiv="Content-Language" content="th">
     <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
     <meta name="description" content="Pongpeera Wongprasitthiporn's profile">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pongpeera Wongprasitthiporn's profile</title>
-    <link rel="icon" type="image/webp" href="icons/icon.webp">
+    <link rel="icon" type="image/webp" href="/icons/icon.webp">
   </head>
   
   <body>
 
     <div class="topbar stealth">
-  
-
-        <div style="display: flex; align-items: center;">
-          <a href="/team" class="button header">About</a>
-          <a href="" class="button header">Work</a>
-          <a href="" class="button header">Links</a>
-
+      <div style="display: flex; align-items: center;">
+        <a class="button header selected">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><path d="m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 1.5 c 0 1 1 1 1 1 h 10 s 1 0 1 -1 v -1.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0" fill="currentColor"/></svg>
+          <p style="margin-left: 5px;">About</p>
+        </a>
+        <a href="/works" class="button header">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 1.5 2 h 2 c 0.277344 0 0.5 0.222656 0.5 0.5 v 12 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -2 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -12 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 5.5 4 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 10 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -10 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 8.5 3 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 11 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -11 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 10.707031 1.460938 l 0.964844 -0.261719 c 0.265625 -0.070313 0.539063 0.089843 0.613281 0.355469 l 3.363282 12.558593 c 0.070312 0.265625 -0.085938 0.539063 -0.351563 0.609375 l -0.96875 0.261719 c -0.265625 0.070313 -0.539063 -0.089844 -0.613281 -0.355469 l -3.363282 -12.554687 c -0.070312 -0.269531 0.085938 -0.542969 0.355469 -0.613281 z m 0 0"/></g></svg>
+          <p style="margin-left: 5px;">Works</p>
+        </a>
+        <a href="/links" class="button header">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 4 11.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -2.199219 1.800781 -4 4 -4 h 3 c 2.199219 0 4 1.800781 4 4 c 0 1.640624 -0.992188 3.070312 -2.421875 3.679687 l -0.785156 -1.839844 c 0.710937 -0.304687 1.207031 -1 1.207031 -1.839843 c 0 -1.125 -0.875 -2 -2 -2 h -3 c -1.125 0 -2 0.875 -2 2 s 0.875 2 2 2 z m 0 0"/><path d="m 9 13.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -1.621094 0.96875 -3.03125 2.367188 -3.65625 l 0.816406 1.828124 c -0.699219 0.3125 -1.183594 1 -1.183594 1.828126 c 0 1.125 0.875 2 2 2 h 3 c 1.125 0 2 -0.875 2 -2 s -0.875 -2 -2 -2 v -2 c 2.199219 0 4 1.800781 4 4 c 0 2.199218 -1.800781 4 -4 4 z m 0 0"/></g></svg>
+          <p style="margin-left: 5px;">Links</p>
+        </a>
       </div>
-  </div>
+    </div>
 
-    <div style="display: flex; justify-content: center; align-items: center; margin-top: 2cm;">
-      <img src="icons/pfp.webp" alt="profile picture" width="160" height="160" style="border-radius: 80px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
+    <div style="display: flex; justify-content: center; align-items: center; margin-top: 3cm;">
+      <img src="/icons/pfp.webp" alt="profile picture" width="160" height="160" style="border-radius: 80px; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13)">
     </div>
     <div class="name">
       <h1 style="text-align: center;">Pongpeera Wongprasitthiporn</h1>
@@ -37,12 +43,43 @@
         <a class="button accent pill" href="https://resume.superresume.com/ViewResume?Key=6EExIkqpFyFVL0DxIkwQxFuwINuduo&Enc=biygyyt8wMYenvVirUTScBSggyLic8">Super Resume</a>
         <a class="button pill" href="https://cloud.techtransthai.org/s/b9dJeTMp4GxX77t">PDF Resume</a>
       </div>
+      <div class="quickbuttons" style="display: flex; justify-content: center;">
+      <a alt="Telegram" class="button circle" target="_blank" rel="noopener noreferrer" href="https://t.me/latenightdef">
+        <svg width="20px" height="20px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="plane" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <path d="M1.3311718,6.36592184 C5.3576954,4.67244493 8.04267511,3.5560013 9.38611094,3.01659096 C13.2218932,1.47646481 14.0189359,1.2089284 14.5384372,1.2 C14.6526967,1.19815119 14.9081723,1.22548649 15.0736587,1.35511219 C15.2133922,1.4645656 15.2518384,1.61242159 15.2702362,1.71619544 C15.288634,1.81996929 15.3115436,2.05636876 15.2933322,2.24108442 C15.0854698,4.34939964 14.1860526,9.46572464 13.7284802,11.8270738 C13.5348641,12.8262491 13.1536281,13.1612675 12.7845475,13.1940535 C11.9824498,13.265305 11.3733733,12.6823476 10.5965026,12.190753 C9.3808532,11.4215044 8.69408865,10.9426448 7.51409044,10.1920004 C6.15039834,9.32450079 7.03442319,8.84770795 7.81158733,8.06849502 C8.01497489,7.86457129 11.5490353,4.7615061 11.6174372,4.48000946 C11.625992,4.44480359 11.6339313,4.31357282 11.5531696,4.24427815 C11.472408,4.17498349 11.3532107,4.19867957 11.2671947,4.21752527 C11.1452695,4.24423848 9.20325394,5.48334063 5.44114787,7.93483171 C4.88991321,8.30022994 4.39062196,8.47826423 3.94327414,8.46893456 C3.45010907,8.45864936 2.50145729,8.19975808 1.79623221,7.97846422 C0.931244952,7.70703829 0.243770289,7.56353344 0.303633888,7.10256824 C0.334814555,6.86246904 0.677327192,6.61692024 1.3311718,6.36592184 Z" id="Path-3" fill="currentColor"></path>
+          </g>
+        </svg>
+      </a>
+      <a alt="Email" class="button circle" target="_blank" rel="noopener noreferrer" href="mailto:pongpeera.w@outlook.com">
+        <svg height="20px" viewBox="0 0 16 16" width="20px" >
+          <g fill="currentColor">
+              <path d="m 1.800781 3.019531 c -0.257812 0.050781 -0.484375 0.207031 -0.632812 0.425781 c -0.304688 0.460938 -0.183594 1.082032 0.277343 1.386719 l 5.167969 3.445313 c 0.835938 0.558594 1.9375 0.558594 2.773438 0 l 5.167969 -3.445313 c 0.460937 -0.304687 0.582031 -0.925781 0.277343 -1.386719 c -0.304687 -0.460937 -0.925781 -0.582031 -1.386719 -0.277343 l -5.167968 3.445312 c -0.171875 0.113281 -0.382813 0.113281 -0.554688 0 l -5.167968 -3.445312 c -0.222657 -0.148438 -0.492188 -0.199219 -0.753907 -0.148438 z m 0 0"/>
+              <path d="m 3 2 c -1.644531 0 -3 1.355469 -3 3 v 6 c 0 1.644531 1.355469 3 3 3 h 10 c 1.644531 0 3 -1.355469 3 -3 v -6 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 10 c 0.570312 0 1 0.429688 1 1 v 6 c 0 0.570312 -0.429688 1 -1 1 h -10 c -0.570312 0 -1 -0.429688 -1 -1 v -6 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0"/>
+          </g>
+        </svg>
+      </a>
+      <a alt="Phone" class="button circle" target="_blank" rel="noopener noreferrer" href="tel:0982891252">
+        <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 11 15 c 0.828125 0 1.5 -0.671875 1.5 -1.5 s -0.671875 -1.5 -1.5 -1.5 c -3.882812 0 -7 -3.117188 -7 -7 c 0 -0.828125 -0.671875 -1.5 -1.5 -1.5 s -1.5 0.671875 -1.5 1.5 c 0 5.503906 4.496094 10 10 10 z m 0 0"/><path d="m 15.003906 11 c 0 -0.554688 -0.445312 -1 -1 -1 h -4 c -0.550781 0 -1 0.445312 -1 1 v 1.710938 l 2 2.289062 h 1.5 c 1.382813 0 2.5 -1.121094 2.5 -2.5 z m 0 0"/><path d="m 5.003906 1 c 0.554688 0 1 0.445312 1 1 v 4 c 0 0.554688 -0.445312 1 -1 1 h -1.710937 l -2.289063 -2 v -1.5 c 0 -1.378906 1.121094 -2.5 2.5 -2.5 z m 0 0"/></g></svg>
+      </a>
+      <a alt="Matrix" class="button circle" target="_blank" rel="noopener noreferrer" href="https://matrix.to/#/@latenightdef:matrix.org">
+        <svg height="24px" width="24px" viewBox="0 0 520 520"><g fill="currentColor"></g><path d="M13.7 11.9v496.2h35.7V520H0V0h49.4v11.9zm152.6 157.3v25.1h.7c6.7-9.6 14.8-17 24.2-22.2 9.4-5.3 20.3-7.9 32.5-7.9 11.7 0 22.4 2.3 32.1 6.8s17 12.6 22.1 24c5.5-8.1 13-15.3 22.4-21.5s20.6-9.3 33.5-9.3q14.7 0 27.3 3.6c8.4 2.4 15.5 6.2 21.5 11.5s10.6 12.1 14 20.6c3.3 8.5 5 18.7 5 30.7v124.1h-50.9V249.6c0-6.2-.2-12.1-.7-17.6s-1.8-10.3-3.9-14.3c-2.2-4.1-5.3-7.3-9.5-9.7s-9.9-3.6-17-3.6c-7.2 0-13 1.4-17.4 4.1-4.4 2.8-7.9 6.3-10.4 10.8-2.5 4.4-4.2 9.4-5 15.1-.8 5.6-1.3 11.3-1.3 17v103.3h-50.9v-104c0-5.5-.1-10.9-.4-16.3-.2-5.4-1.3-10.3-3.1-14.9-1.8-4.5-4.8-8.2-9-10.9s-10.3-4.1-18.5-4.1c-2.4 0-5.6.5-9.5 1.6s-7.8 3.1-11.5 6.1-6.9 7.3-9.5 12.9-3.9 13-3.9 22.1v107.6h-50.9V169.2zm340 338.9V11.9h-35.7V0H520v520h-49.4v-11.9z" style="fill:currentColor"/></svg>
+      </a>
+      <a alt="Facebook" class="button circle" target="_blank" rel="noopener noreferrer" href="https://web.facebook.com/pongpeera054">
+        <svg width="20" height="20" viewBox="0 0 666.67 666.67"><path d="M0 0c0 138.071-111.929 250-250 250S-500 138.071-500 0c0-117.245 80.715-215.622 189.606-242.638v166.242h-51.552V0h51.552v32.919c0 85.092 38.508 124.532 122.048 124.532 15.838 0 43.167-3.105 54.347-6.211V81.986c-5.901.621-16.149.932-28.882.932-40.993 0-56.832-15.528-56.832-55.9V0h81.659l-14.028-76.396h-67.631v-171.773C-95.927-233.218 0-127.818 0 0" style="fill:currentColor;fill-opacity:1;fill-rule:nonzero;stroke:none" transform="matrix(1.33333 0 0 -1.33333 666.667 333.333)"/></svg>
+      </a>
+      <a alt="Instagram" class="button circle" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/latenightdef">
+        <svg width="24" height="24" viewBox="0 0 264.583 264.583"><path fill="currentColor" d="M132.345 33.973c-26.716 0-30.07.117-40.563.594-10.472.48-17.62 2.136-23.876 4.567-6.47 2.51-11.958 5.87-17.426 11.335-5.472 5.464-8.834 10.948-11.354 17.412-2.44 6.252-4.1 13.397-4.57 23.858-.47 10.486-.593 13.838-.593 40.535s.119 30.037.594 40.522c.482 10.465 2.14 17.609 4.57 23.859 2.515 6.465 5.876 11.95 11.346 17.414 5.466 5.468 10.955 8.834 17.42 11.345 6.26 2.431 13.41 4.088 23.881 4.567 10.493.477 13.844.594 40.559.594 26.719 0 30.061-.117 40.555-.594 10.472-.48 17.63-2.136 23.888-4.567 6.468-2.51 11.948-5.877 17.414-11.345 5.472-5.464 8.834-10.949 11.354-17.412 2.419-6.252 4.079-13.398 4.57-23.858.472-10.486.595-13.828.595-40.525s-.123-30.047-.594-40.533c-.492-10.465-2.152-17.608-4.57-23.858-2.521-6.466-5.883-11.95-11.355-17.414-5.472-5.468-10.944-8.827-17.42-11.335-6.271-2.431-13.424-4.088-23.897-4.567-10.493-.477-13.834-.594-40.558-.594zm-8.825 17.715c2.62-.004 5.542 0 8.825 0 26.266 0 29.38.094 39.752.565 9.591.438 14.797 2.04 18.264 3.385 4.591 1.782 7.864 3.912 11.305 7.352 3.443 3.44 5.575 6.717 7.362 11.305 1.346 3.46 2.951 8.663 3.388 18.247.47 10.363.573 13.475.573 39.71 0 26.233-.102 29.346-.573 39.709-.44 9.584-2.042 14.786-3.388 18.247-1.783 4.587-3.919 7.854-7.362 11.292-3.443 3.441-6.712 5.57-11.305 7.352-3.463 1.352-8.673 2.95-18.264 3.388-10.37.47-13.486.573-39.752.573-26.268 0-29.38-.102-39.751-.573-9.592-.443-14.797-2.044-18.267-3.39-4.59-1.781-7.87-3.911-11.313-7.352-3.443-3.44-5.574-6.709-7.362-11.298-1.346-3.461-2.95-8.663-3.387-18.247-.472-10.363-.566-13.476-.566-39.726s.094-29.347.566-39.71c.438-9.584 2.04-14.786 3.387-18.25 1.783-4.588 3.919-7.865 7.362-11.305 3.443-3.441 6.722-5.57 11.313-7.357 3.468-1.351 8.675-2.949 18.267-3.389 9.075-.41 12.592-.532 30.926-.553zm61.337 16.322c-6.518 0-11.805 5.277-11.805 11.792 0 6.512 5.287 11.796 11.805 11.796s11.804-5.284 11.804-11.796c0-6.513-5.287-11.796-11.805-11.796zm-52.512 13.782c-27.9 0-50.519 22.603-50.519 50.482s22.62 50.471 50.52 50.471 50.51-22.592 50.51-50.471-22.613-50.482-50.513-50.482zm0 17.715c18.11 0 32.792 14.67 32.792 32.767 0 18.096-14.683 32.767-32.792 32.767s-32.791-14.671-32.791-32.767c0-18.098 14.68-32.767 32.791-32.767" style="fill:currentColor"/></svg>
+      </a>
+      <a alt="Discord" class="button circle" target="_blank" rel="noopener noreferrer" href="https://discordapp.com/users/451202827549802496">
+        <svg width="24"  viewBox="0 0 47.615 36.513"><defs><clipPath id="a"><path d="M0 0h292v56.471H0z" style="fill:currentColor" transform="translate(0 11.765)"/></clipPath><clipPath id="b"><path d="M0 0h292v56.471H0z" style="fill:#fff" transform="translate(0 11.765)"/></clipPath></defs><g clip-path="url(#a)" style="fill:none" transform="matrix(.6527 0 0 .64658 0 -7.607)"><g clip-path="url(#b)"><path d="M61.796 16.494a59.4 59.4 0 0 0-15.05-4.73 44 44 0 0 0-1.928 4.003q-8.418-1.266-16.68 0a43 43 0 0 0-1.95-4.002 59.2 59.2 0 0 0-15.063 4.74C1.601 30.9-.98 44.936.31 58.772c6.317 4.717 12.44 7.583 18.458 9.458a46 46 0 0 0 3.953-6.51 39 39 0 0 1-6.225-3.03 31 31 0 0 0 1.526-1.208c12.004 5.615 25.046 5.615 36.906 0q.75.625 1.526 1.208a39 39 0 0 1-6.237 3.035 45.7 45.7 0 0 0 3.953 6.511c6.025-1.875 12.153-4.74 18.47-9.464 1.515-16.04-2.588-29.947-10.844-42.277m-37.44 33.768c-3.603 0-6.558-3.364-6.558-7.46 0-4.097 2.892-7.467 6.559-7.467 3.666 0 6.621 3.364 6.558 7.466.006 4.097-2.892 7.46-6.558 7.46m24.237 0c-3.603 0-6.558-3.364-6.558-7.46 0-4.097 2.892-7.467 6.558-7.467s6.622 3.364 6.558 7.466c0 4.097-2.891 7.46-6.558 7.46" style="fill:currentColor"/></g></g></svg>
+      </a>
     </div>
-  
-    
+
+
     <div class="grid-container">
   
-      <div class="middle">
+      <div class="middle" style="margin-top: 1cm;">
         
         <h3>Basic information</h3>
         <div class="list" >
@@ -131,157 +168,6 @@
           </a>
         </div>
 
-        <h3>Works & contributions</h3>
-
-        <div class="list" >
-          
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="work-kmitl.html" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Student at KMITL</p>
-                <p class="row-subtitle">C++, UX/UI, CI/CD, Linux, Documentation</p>
-              </div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="work-i-bitz.html" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Intern at i-bitz company limited</p>
-                <p class="row-subtitle">Python, Go, MongoDB, Docker, Kubernetes</p>
-              </div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="work-others.html" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Other works</p>
-                <p class="row-subtitle">WebDev, Cloud & Self-hosting, Email and more </p>
-              </div>
-              <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-        </div>
-
-        <h3>Talks</h3>
-
-        <div class="list" >
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/techtransthai/openlkb-slides/raw/branch/main/Improving%20accessibility%20data%20on%20OpenStreetMap.pdf" >
-            <div class="row" style="margin-left: 0.5cm; ">
-              <div class="propertyrow">
-                <p class="row-title">Improving accessibility data on OpenStreetMap</p>
-                <p class="row-subtitle">Bangkok Open Source Hackathon, 2023</p>
-              </div>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-        </div>
-
-        <h3>Links/Contact</h3>
-
-        <div class="list" >
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://t.me/latenightdef">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Telegram</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="mailto:pongpeera054@protonmail.com">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Email (Proton)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="mailto:pongpeera.w@outlook.com">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Email (Outlook)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="tel:0982891252">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Phone</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://f-social.techtransthai.org/@latenightdef">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Fediverse</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://pixels.techtransthai.org/i/web/profile/711147700789940225">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Pixelfed</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/pongpeera-wongprasitthiporn">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">LinkedIn</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://matrix.to/#/@latenightdef:matrix.org">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Matrix</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://web.facebook.com/pongpeera054">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Facebook (May take longer to respond)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/latenightdef">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Instagram (May take longer to respond)</p>
-              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a>
-            <div class="propertyrow" style="margin-left: 0.5cm;">
-              <p class="propertyrow-property">Discord username (May take longer to respond)</p>
-              <p class="propertyrow-value">latenightdef</p>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a>
-            <div class="propertyrow" style="margin-left: 0.5cm;">
-              <p class="propertyrow-property">LINE (line.me) ID (May take longer to respond)</p>
-              <p class="propertyrow-value">pongpeera054</p>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="links-contrib.html">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Contributor profiles</p>
-                <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-          <div class="separator"></div>
-          <a style="text-decoration: none;" href="links-misc.html">
-            <div class="row" style="margin-left: 0.5cm; ">
-                <p class="row-title-no-subtitle">Miscellaneous</p>
-                <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
-            </div>
-          </a>
-        </div>
       </div>
     </div>
   
