From 83e8d3af37fec72b1e8cacefdb6cec9e360b9992 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Tue, 25 Mar 2025 04:13:03 +0700
Subject: [PATCH] add theming for works by type buttons

---
 icons/docs.svg     |  27 +++++
 icons/opendata.svg |  48 +++++++++
 icons/sysadmin.svg |  53 +++++++++
 icons/video.svg    | 260 +++++++++++++++++++++++++++++++++++++++++++++
 works/index.html   |  22 ++--
 5 files changed, 399 insertions(+), 11 deletions(-)
 create mode 100644 icons/docs.svg
 create mode 100644 icons/opendata.svg
 create mode 100644 icons/sysadmin.svg
 create mode 100644 icons/video.svg

diff --git a/icons/docs.svg b/icons/docs.svg
new file mode 100644
index 0000000..dd73be1
--- /dev/null
+++ b/icons/docs.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <radialGradient id="a" cx="413.639404" cy="226.77327" gradientTransform="matrix(0.231318 0.400655 0.244759 -0.141312 -89.187302 -67.681122)" gradientUnits="userSpaceOnUse" r="192">
+        <stop offset="0" stop-color="#50db81"/>
+        <stop offset="1" stop-color="#8ff0a4" stop-opacity="0.003922"/>
+    </radialGradient>
+    <radialGradient id="b" cx="521.890137" cy="228.371063" gradientTransform="matrix(0.00000003 -0.278432 -0.284052 0 110.869301 251.310974)" gradientUnits="userSpaceOnUse" r="192">
+        <stop offset="0" stop-color="#4a86cf"/>
+        <stop offset="1" stop-color="#87bae1" stop-opacity="0"/>
+    </radialGradient>
+    <path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
+    <g fill="#deddda">
+        <path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0"/>
+        <path d="m 82 100 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 82 92 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 82 84 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 82 76 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 82 68 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 82 60 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 82 52 h 12 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -12 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 44 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 36 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+        <path d="m 34 28 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+    </g>
+    <path d="m 36 104 h 34 c 2.210938 0 4 -1.789062 4 -4 v -42.035156 c 0 -2.207032 -1.789062 -4 -4 -4 h -34 c -2.210938 0 -4 1.792968 -4 4 v 42.035156 c 0 2.210938 1.789062 4 4 4 z m 0 0" fill="url(#a)"/>
+    <path d="m 36 104 h 34 c 2.210938 0 4 -1.789062 4 -4 v -42.035156 c 0 -2.207032 -1.789062 -4 -4 -4 h -34 c -2.210938 0 -4 1.792968 -4 4 v 42.035156 c 0 2.210938 1.789062 4 4 4 z m 0 0" fill="url(#b)"/>
+</svg>
diff --git a/icons/opendata.svg b/icons/opendata.svg
new file mode 100644
index 0000000..8cb1974
--- /dev/null
+++ b/icons/opendata.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <filter id="a" height="100%" width="100%" x="0%" y="0%">
+        <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+    </filter>
+    <mask id="b">
+        <g filter="url(#a)">
+            <rect fill-opacity="0.3" height="128" width="128"/>
+        </g>
+    </mask>
+    <clipPath id="c">
+        <rect height="152" width="192"/>
+    </clipPath>
+    <path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
+    <path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0" fill="#deddda"/>
+    <g fill="#d5d3cf">
+        <g clip-path="url(#c)" mask="url(#b)" transform="matrix(1 0 0 1 -8 -16)">
+            <path d="m 42 36 h 2 v 30 h -2 z m 0 0"/>
+            <path d="m 52 36 h 2 v 30 h -2 z m 0 0"/>
+            <path d="m 68 36 h 2 v 30 h -2 z m 0 0"/>
+            <path d="m 84 58 h 2 v 8 h -2 z m 0 0"/>
+            <path d="m 100 58 h 2 v 8 h -2 z m 0 0"/>
+            <path d="m 42 64 h 60 v 2 h -60 z m 0 0"/>
+            <path d="m 42 58 h 60 v 2 h -60 z m 0 0"/>
+            <path d="m 42 52 h 28 v 2 h -28 z m 0 0"/>
+            <path d="m 42 46 h 28 v 2 h -28 z m 0 0"/>
+            <path d="m 42 40 h 28 v 2 h -28 z m 0 0"/>
+            <path d="m 42 34 h 28 v 2 h -28 z m 0 0"/>
+            <path d="m 42 114 h 60 v 2 h -60 z m 0 0"/>
+            <path d="m 42 120 h 60 v 2 h -60 z m 0 0"/>
+            <path d="m 42 126 h 60 v 2 h -60 z m 0 0"/>
+            <path d="m 42 114 h 2 v 14 h -2 z m 0 0"/>
+            <path d="m 52 114 h 2 v 14 h -2 z m 0 0"/>
+            <path d="m 68 114 h 2 v 14 h -2 z m 0 0"/>
+            <path d="m 84 114 h 2 v 14 h -2 z m 0 0"/>
+            <path d="m 100 114 h 2 v 14 h -2 z m 0 0"/>
+        </g>
+        <path d="m 34 54 h 2 v 38 h -2 z m 0 0"/>
+        <path d="m 94 90 v 2 h -60 v -2 z m 0 0"/>
+    </g>
+    <path d="m 38 68 h 6 v 20 h -6 z m 0 0" fill="#50db81"/>
+    <path d="m 46 76 h 6 v 12 h -6 z m 0 0" fill="#8f5aa0"/>
+    <path d="m 54 60 h 6 v 28 h -6 z m 0 0" fill="#fb8c14"/>
+    <path d="m 62 64 h 6 v 24 h -6 z m 0 0" fill="#e01b24"/>
+    <path d="m 70 74 h 6 v 14 h -6 z m 0 0" fill="#8f5aa0"/>
+    <path d="m 78 80 h 6 v 8 h -6 z m 0 0" fill="#4a86cf"/>
+    <path d="m 86 70 h 6 v 18 h -6 z m 0 0" fill="#f6d32d"/>
+</svg>
diff --git a/icons/sysadmin.svg b/icons/sysadmin.svg
new file mode 100644
index 0000000..fa65381
--- /dev/null
+++ b/icons/sysadmin.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <linearGradient id="a" gradientTransform="matrix(0 -0.932866 -1 0 -0.000006 -170.918221)" gradientUnits="userSpaceOnUse" x1="-280.623596" x2="-287.76535" y1="-66.117432" y2="-66.117432">
+        <stop offset="0" stop-color="#313133"/>
+        <stop offset="1" stop-color="#9a9996"/>
+    </linearGradient>
+    <linearGradient id="b" gradientTransform="matrix(0 -1 -1 0 0 -172)" gradientUnits="userSpaceOnUse" x1="-271.974609" x2="-266.414551" y1="-62.938477" y2="-62.938477">
+        <stop offset="0" stop-color="#aeadab"/>
+        <stop offset="1" stop-color="#aeadab" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="c" gradientTransform="matrix(2.381786 0 0 2.083491 -2851.15332 1636.15686)" gradientUnits="userSpaceOnUse" x1="1202" x2="1246" y1="-735" y2="-735">
+        <stop offset="0" stop-color="#9a9996" stop-opacity="0"/>
+        <stop offset="0.0909091" stop-color="#9a9996"/>
+        <stop offset="0.909091" stop-color="#9a9996"/>
+        <stop offset="1" stop-color="#9a9996" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="d" gradientTransform="matrix(0.25 0 0 0.166667 -164.000015 168.666656)" gradientUnits="userSpaceOnUse" x1="904" x2="904" y1="-340" y2="-385.948242">
+        <stop offset="0" stop-color="#77767b"/>
+        <stop offset="0.603496" stop-color="#c0bfbc"/>
+        <stop offset="1" stop-color="#aeadab"/>
+    </linearGradient>
+    <linearGradient id="e" gradientTransform="matrix(0.232338 0 0 0.233165 -8.671706 198.782745)" gradientUnits="userSpaceOnUse" x1="88.595886" x2="536.595886" y1="-449.394012" y2="-449.394012">
+        <stop offset="0" stop-color="#c4c4c6"/>
+        <stop offset="0.0357143" stop-color="#f0f0ee"/>
+        <stop offset="0.0713653" stop-color="#cfcfcd"/>
+        <stop offset="0.928571" stop-color="#d5d5d5"/>
+        <stop offset="0.964286" stop-color="#c0bfbc"/>
+        <stop offset="1" stop-color="#77767b"/>
+    </linearGradient>
+    <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="45.543945" x2="45.543945" y1="72.562012" y2="83.275391">
+        <stop offset="0" stop-color="#77767b"/>
+        <stop offset="1" stop-color="#c0bfbc"/>
+    </linearGradient>
+    <path d="m 68 105.210938 v -29.851563 h -8 v 29.851563 z m 0 0" fill="url(#a)"/>
+    <path d="m 63.796875 105.210938 v -29.851563 h -1.796875 v 29.851563 z m 0 0" fill="url(#b)"/>
+    <path d="m 8.179688 105.832031 h 111.945312 v 4.167969 h -111.945312 z m 0 0" fill="url(#c)"/>
+    <path d="m 51.730469 104 h 24.539062 c 2.0625 0 3.730469 1.667969 3.730469 3.730469 v 0.539062 c 0 2.0625 -1.667969 3.730469 -3.730469 3.730469 h -24.539062 c -2.0625 0 -3.730469 -1.667969 -3.730469 -3.730469 v -0.539062 c 0 -2.0625 1.667969 -3.730469 3.730469 -3.730469 z m 0 0" fill="url(#d)"/>
+    <path d="m 19.355469 23.117188 h 89.203125 c 4.109375 0 7.441406 3.339843 7.441406 7.460937 v 55.960937 c 0 4.121094 -3.332031 7.460938 -7.441406 7.460938 h -89.203125 c -4.109375 0 -7.441407 -3.339844 -7.441407 -7.460938 v -55.960937 c 0 -4.121094 3.332032 -7.460937 7.441407 -7.460937 z m 0 0" fill="url(#e)"/>
+    <path d="m 19.5625 12 h 88.929688 c 4.148437 0 7.507812 3.359375 7.507812 7.507812 v 40.722657 c 0 4.148437 -3.359375 7.507812 -7.507812 7.507812 h -88.929688 c -4.144531 0 -7.507812 -3.359375 -7.507812 -7.507812 v -40.722657 c 0 -4.148437 3.363281 -7.507812 7.507812 -7.507812 z m 0 0" fill="#deddda"/>
+    <g fill="#ff7800">
+        <path d="m 104 84.996094 c 0 0.5625 -0.457031 1.023437 -1.023438 1.023437 c -0.5625 0 -1.019531 -0.460937 -1.019531 -1.023437 s 0.457031 -1.023438 1.019531 -1.023438 c 0.566407 0 1.023438 0.460938 1.023438 1.023438 z m 0 0"/>
+        <path d="m 104 81.023438 c 0 0.5625 -0.457031 1.019531 -1.023438 1.019531 c -0.5625 0 -1.019531 -0.457031 -1.019531 -1.019531 c 0 -0.566407 0.457031 -1.023438 1.019531 -1.023438 c 0.566407 0 1.023438 0.457031 1.023438 1.023438 z m 0 0"/>
+        <path d="m 104 77.039062 c 0 0.566407 -0.457031 1.023438 -1.023438 1.023438 c -0.5625 0 -1.019531 -0.457031 -1.019531 -1.023438 c 0 -0.5625 0.457031 -1.019531 1.019531 -1.019531 c 0.566407 0 1.023438 0.457031 1.023438 1.019531 z m 0 0"/>
+    </g>
+    <path d="m 11.914062 58.566406 v 1.859375 c 0 4.167969 3.347657 7.519531 7.507813 7.519531 h 89.066406 c 4.160157 0 7.511719 -3.351562 7.511719 -7.519531 v -1.859375 c 0 4.164063 -3.351562 7.519532 -7.511719 7.519532 h -89.066406 c -4.160156 0 -7.507813 -3.355469 -7.507813 -7.519532 z m 0 0" fill="#f6f5f4"/>
+    <path d="m 101.011719 84.996094 c 0 0.5625 -0.457031 1.023437 -1.019531 1.023437 c -0.566407 0 -1.023438 -0.460937 -1.023438 -1.023437 s 0.457031 -1.023438 1.023438 -1.023438 c 0.5625 0 1.019531 0.460938 1.019531 1.023438 z m 0 0" fill="#c01c28"/>
+    <path d="m 101.011719 81.023438 c 0 0.5625 -0.457031 1.019531 -1.019531 1.019531 c -0.566407 0 -1.023438 -0.457031 -1.023438 -1.019531 c 0 -0.566407 0.457031 -1.023438 1.023438 -1.023438 c 0.5625 0 1.019531 0.457031 1.019531 1.023438 z m 0 0" fill="#ff7800"/>
+    <path d="m 101.011719 77.039062 c 0 0.566407 -0.457031 1.023438 -1.019531 1.023438 c -0.566407 0 -1.023438 -0.457031 -1.023438 -1.023438 c 0 -0.5625 0.457031 -1.019531 1.023438 -1.019531 c 0.5625 0 1.019531 0.457031 1.019531 1.019531 z m 0 0" fill="#c01c28"/>
+    <path d="m 98.027344 84.996094 c 0 0.5625 -0.457032 1.023437 -1.023438 1.023437 c -0.5625 0 -1.019531 -0.460937 -1.019531 -1.023437 s 0.457031 -1.023438 1.019531 -1.023438 c 0.566406 0 1.023438 0.460938 1.023438 1.023438 z m 0 0" fill="#ff7800"/>
+    <path d="m 98.027344 81.023438 c 0 0.5625 -0.457032 1.019531 -1.023438 1.019531 c -0.5625 0 -1.019531 -0.457031 -1.019531 -1.019531 c 0 -0.566407 0.457031 -1.023438 1.019531 -1.023438 c 0.566406 0 1.023438 0.457031 1.023438 1.023438 z m 0 0" fill="#c01c28"/>
+    <path d="m 98.027344 77.039062 c 0 0.566407 -0.457032 1.023438 -1.023438 1.023438 c -0.5625 0 -1.019531 -0.457031 -1.019531 -1.023438 c 0 -0.5625 0.457031 -1.019531 1.019531 -1.019531 c 0.566406 0 1.023438 0.457031 1.023438 1.019531 z m 0 0" fill="#c01c28"/>
+    <path d="m 65.421875 80.441406 c -0.511719 0.007813 -0.996094 0.214844 -1.355469 0.578125 l -3.644531 3.714844 c -0.742187 0.757813 -0.730469 1.972656 0.027344 2.714844 c 0.757812 0.742187 1.972656 0.730469 2.714843 -0.023438 l 3.644532 -3.71875 c 0.742187 -0.757812 0.730468 -1.972656 -0.023438 -2.714843 c -0.367187 -0.355469 -0.855468 -0.554688 -1.363281 -0.550782 z m -35.875 -8.375 c -0.507813 0.007813 -0.996094 0.214844 -1.351563 0.578125 l -3.644531 3.714844 c -0.742187 0.757813 -0.730469 1.972656 0.023438 2.714844 c 0.757812 0.746093 1.972656 0.734375 2.714843 -0.023438 l 3.648438 -3.71875 c 0.742188 -0.757812 0.730469 -1.972656 -0.027344 -2.714843 c -0.363281 -0.355469 -0.855468 -0.554688 -1.363281 -0.550782 z m 8.675781 -0.066406 c -0.511718 -0.003906 -1 0.195312 -1.363281 0.550781 l -12.285156 12.097657 c -0.757813 0.746093 -0.765625 1.960937 -0.023438 2.714843 c 0.746094 0.757813 1.960938 0.765625 2.714844 0.023438 l 12.289063 -12.097657 c 0.753906 -0.746093 0.765624 -1.960937 0.019531 -2.714843 c -0.355469 -0.363281 -0.84375 -0.570313 -1.351563 -0.574219 z m 9.117188 0 c -0.511719 -0.003906 -1 0.195312 -1.363282 0.550781 l -12.289062 12.097657 c -0.753906 0.746093 -0.761719 1.960937 -0.019531 2.714843 c 0.746093 0.757813 1.960937 0.765625 2.714843 0.023438 l 12.289063 -12.097657 c 0.753906 -0.746093 0.765625 -1.960937 0.019531 -2.714843 c -0.355468 -0.363281 -0.84375 -0.570313 -1.351562 -0.574219 z m 9.117187 0 c -0.507812 -0.003906 -0.996093 0.195312 -1.359375 0.550781 l -12.289062 12.097657 c -0.753906 0.746093 -0.765625 1.960937 -0.019532 2.714843 c 0.355469 0.363281 0.84375 0.570313 1.351563 0.574219 c 0.511719 0.003906 1 -0.195312 1.363281 -0.550781 l 12.289063 -12.097657 c 0.753906 -0.746093 0.761719 -1.960937 0.019531 -2.714843 c -0.359375 -0.363281 -0.84375 -0.570313 -1.355469 -0.574219 z m 7.757813 0.550781 l -12.285156 12.097657 c -0.753907 0.746093 -0.765626 1.960937 -0.019532 2.714843 c 0.742188 0.757813 1.957032 0.765625 2.714844 0.023438 l 12.285156 -12.097657 c 0.757813 -0.746093 0.765625 -1.960937 0.019532 -2.714843 c -0.742188 -0.757813 -1.957032 -0.765625 -2.714844 -0.023438 z m 0 0" fill="url(#f)"/>
+</svg>
diff --git a/icons/video.svg b/icons/video.svg
new file mode 100644
index 0000000..b5a5422
--- /dev/null
+++ b/icons/video.svg
@@ -0,0 +1,260 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="128"
+   height="128"
+   fill="none"
+   version="1.1"
+   id="svg40"
+   sodipodi:docname="org.gnome.Showtime.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview40"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="5.921875"
+     inkscape:cx="38.754617"
+     inkscape:cy="69.065963"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg40" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M111.967 61H16.003c0 1.984 0 3.968-.003 5.951v16.486c0 1.365 0 2.729.002 4.093.002 5.457.004 10.914-.002 16.37-.03 1.62.23 3.209.713 4.723l.014.039a15.652 15.652 0 0 0 .969 2.364c.01.02.018.04.029.06.075.163.153.326.234.486a15.982 15.982 0 0 0 1.805 2.637 16 16 0 0 0 3.892 3.326c.387.24.784.464 1.19.67a14.757 14.757 0 0 0 5.62 1.606c.03.002.058.006.086.01.033.004.065.009.098.011.247.019.494.032.74.039.357.019.713.032 1.067.022l.078-.006c.45-.016.9-.047 1.344-.106 2.157-.252 4.24-.94 6.121-2.023l.266-.153c.59-.316 1.172-.647 1.734-1.002l.002-.002L72 99.281l32-18.474a16.003 16.003 0 0 0 6.083-6.27c1.407-2.614 1.884-5.537 1.884-8.531-.077-1.708 0-5.006 0-5.006Z"
+     fill="url(#a)"
+     id="path1" />
+  <mask
+     id="i"
+     style="mask-type:alpha"
+     maskUnits="userSpaceOnUse"
+     x="15"
+     y="8"
+     width="97"
+     height="112">
+    <path
+       d="M16 24c.002-8.983 7.396-16.205 16.377-15.994 2.68.063 5.301.798 7.623 2.139l61.752 35.65.102.037c.049.017.098.034.146.053 3.534 1.86 6.831 4.469 8.471 8.215 1.162 2.339 1.631 4.92 1.496 7.475v4.43c0 2.995-.477 5.918-1.884 8.532a16.003 16.003 0 0 1-6.083 6.27L42.002 116.6l-.002.002c-.562.355-1.144.686-1.734 1.002l-.266.153a15.993 15.993 0 0 1-6.121 2.023c-.445.059-.893.09-1.344.106l-.078.006c-.354.01-.71-.003-1.066-.022a15.21 15.21 0 0 1-.74-.039c-.034-.002-.066-.007-.099-.011a1.225 1.225 0 0 0-.085-.01 14.757 14.757 0 0 1-5.621-1.606c-.406-.206-.803-.43-1.19-.67a16 16 0 0 1-3.892-3.326 15.982 15.982 0 0 1-1.805-2.637 15.735 15.735 0 0 1-.263-.546 16.183 16.183 0 0 1-.97-2.364l-.013-.039A14.645 14.645 0 0 1 16 103.9l.003-5.334A14.216 14.216 0 0 1 16 97.9V24Z"
+       fill="#000"
+       id="path6" />
+  </mask>
+  <defs
+     id="defs40">
+    <linearGradient
+       id="a"
+       x1="16"
+       y1="72"
+       x2="112"
+       y2="72"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#0E8266"
+         id="stop10"
+         offset="0"
+         style="stop-color:#deddda;stop-opacity:1;" />
+      <stop
+         offset="0.086"
+         stop-color="#2EC27E"
+         id="stop11"
+         style="stop-color:#f6f5f4;stop-opacity:1;" />
+      <stop
+         offset="0.27000001"
+         stop-color="#0E8266"
+         id="stop12"
+         style="stop-color:#deddda;stop-opacity:1;" />
+      <stop
+         offset="0.64499998"
+         stop-color="#26A269"
+         id="stop13"
+         style="stop-color:#deddda;stop-opacity:1;" />
+      <stop
+         offset="0.926"
+         stop-color="#E66100"
+         id="stop15"
+         style="stop-color:#f6f5f4;stop-opacity:1;" />
+      <stop
+         offset="1"
+         stop-color="#C64600"
+         id="stop16"
+         style="stop-color:#deddda;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="b"
+       x1="16"
+       y1="72"
+       x2="112"
+       y2="72"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#0E8266"
+         id="stop17" />
+      <stop
+         offset=".086"
+         stop-color="#2EC27E"
+         id="stop18" />
+      <stop
+         offset=".27"
+         stop-color="#0E8266"
+         id="stop19" />
+      <stop
+         offset=".645"
+         stop-color="#26A269"
+         id="stop20" />
+      <stop
+         offset=".862"
+         stop-color="#E5A50A"
+         id="stop21" />
+      <stop
+         offset=".926"
+         stop-color="#E66100"
+         id="stop22" />
+      <stop
+         offset="1"
+         stop-color="#C64600"
+         id="stop23" />
+    </linearGradient>
+    <linearGradient
+       id="d"
+       x1="112"
+       y1="92.354"
+       x2="19.33"
+       y2="109.922"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#FFA348"
+         id="stop24" />
+      <stop
+         offset="1"
+         stop-color="#1C71D8"
+         id="stop26" />
+    </linearGradient>
+    <linearGradient
+       id="h"
+       x1="99.5"
+       y1="78"
+       x2="18.749"
+       y2="61.802"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#F8E45C"
+         id="stop27" />
+      <stop
+         offset=".513"
+         stop-color="#2EC27E"
+         id="stop28" />
+    </linearGradient>
+    <linearGradient
+       id="j"
+       x1="19.5"
+       y1="54"
+       x2="19.5"
+       y2="74"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-opacity=".5"
+         id="stop29" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity=".2"
+         id="stop30" />
+    </linearGradient>
+    <linearGradient
+       id="k"
+       x1="19.5"
+       y1="78"
+       x2="19.5"
+       y2="98"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-opacity=".5"
+         id="stop31" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity=".2"
+         id="stop32" />
+    </linearGradient>
+    <linearGradient
+       id="l"
+       x1="19.5"
+       y1="102"
+       x2="19.5"
+       y2="122"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-opacity=".5"
+         id="stop33" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity=".2"
+         id="stop34" />
+    </linearGradient>
+    <radialGradient
+       id="e"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0 71 -71 0 104 77)">
+      <stop
+         stop-color="#F8E45C"
+         stop-opacity="0"
+         id="stop35" />
+      <stop
+         offset="1"
+         stop-color="#F8E45C"
+         id="stop36" />
+    </radialGradient>
+    <radialGradient
+       id="f"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0 45 -45.5 0 105.5 77)">
+      <stop
+         stop-color="#F8E45C"
+         stop-opacity="0"
+         id="stop37" />
+      <stop
+         offset="1"
+         stop-color="#F8E45C"
+         id="stop38" />
+    </radialGradient>
+    <radialGradient
+       id="g"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0 26 -26 0 111 77)">
+      <stop
+         stop-color="#F8E45C"
+         stop-opacity="0"
+         id="stop39" />
+      <stop
+         offset="1"
+         stop-color="#F8E45C"
+         id="stop40" />
+    </radialGradient>
+  </defs>
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M 32.377,8.006 C 23.397,7.796 16.002,15.016 16,24 v 41.9 l 0.014,0.03 C 15.994,76.586 16.011,87.244 16,97.9 c -0.15,8.053 6.603,15.428 14.65,15.932 3.202,0.357 6.302,-0.538 9.127,-1.973 0.075,-0.036 0.148,-0.062 0.223,-0.101 l 0.266,-0.153 c 0.59,-0.316 1.172,-0.647 1.734,-1.001 L 42.002,110.602 104,74.752 c 7.048,-3.897 10.057,-13.431 6.471,-20.652 -1.64,-3.746 -4.937,-6.356 -8.471,-8.215 -0.082,-0.033 -0.165,-0.06 -0.248,-0.09 L 40,10.145 a 16.002,16.002 0 0 0 -7.623,-2.14 z"
+     fill="#f6f5f4"
+     id="path40"
+     style="display:inline;fill:#f6f5f4" />
+</svg>
diff --git a/works/index.html b/works/index.html
index 11da499..bf35c73 100644
--- a/works/index.html
+++ b/works/index.html
@@ -56,10 +56,10 @@
               <h3>DevOps</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works/sysadmin" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
+          <a class="itemcard-works" href="/works/sysadmin" style="background: linear-gradient(to bottom, rgb(28, 113, 216) 0%,rgb(129, 61, 156) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/applocalization.svg" width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>SysAdmin</h3>
+              <img src="/icons/sysadmin.svg"  width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: white;">SysAdmin</h3>
             </div>
           </a>
           <a class="itemcard-works" href="/works/uidesign" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
@@ -74,9 +74,9 @@
               <h3>Icon Design</h3>
             </div>
           </a> -->
-          <a class="itemcard-works" href="/works/opendata" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
+          <a class="itemcard-works" href="/works/opendata" style="background: linear-gradient(to bottom, rgb(246, 211, 45) 0%,rgb(255, 120, 0) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/mappingthailand.svg" width="36" height="36" style="margin: 0.3cm;">  -->
+              <img src="/icons/opendata.svg"  width="36" height="36" style="margin: 0.3cm;"> 
               <h3>Open Data</h3>
             </div>
           </a>
@@ -92,16 +92,16 @@
               <h3>Code</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works/docs" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
+          <a class="itemcard-works" href="/works/docs" style="background: linear-gradient(to bottom, rgb(46, 194, 126) 0%,rgb(28, 113, 216) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Documentation</h3>
+              <img src="/icons/docs.svg"  width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: white;">Documentation</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works/video" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
+          <a class="itemcard-works" href="/works/video" style="background: linear-gradient(to bottom, rgb(224, 27, 36) 0%,rgb(165, 29, 45) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Video</h3>
+              <img src="/icons/video.svg"  width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: white;">Video</h3>
             </div>
           </a>
           <a class="itemcard-works" href="/works/other" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">