From 823010d163650dff6f9beb2bf0efd8fa8625ae94 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Tue, 6 May 2025 13:22:21 +0700
Subject: [PATCH] add missing icons

---
 icons/code.svg   |  44 ++++++
 icons/icond.svg  | 199 ++++++++++++++++++++++++
 icons/l10n.svg   | 130 ++++++++++++++++
 icons/other.svg  |  86 +++++++++++
 icons/ui.svg     | 382 +++++++++++++++++++++++++++++++++++++++++++++++
 works/index.html |  26 ++--
 6 files changed, 854 insertions(+), 13 deletions(-)
 create mode 100644 icons/code.svg
 create mode 100644 icons/icond.svg
 create mode 100644 icons/l10n.svg
 create mode 100644 icons/other.svg
 create mode 100644 icons/ui.svg

diff --git a/icons/code.svg b/icons/code.svg
new file mode 100644
index 0000000..78792bb
--- /dev/null
+++ b/icons/code.svg
@@ -0,0 +1,44 @@
+<?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" gradientUnits="userSpaceOnUse" x1="12" x2="116" y1="64" y2="64">
+        <stop offset="0" stop-color="#77767b"/>
+        <stop offset="0.05" stop-color="#c0bfbc"/>
+        <stop offset="0.1" stop-color="#9a9996"/>
+        <stop offset="0.899999" stop-color="#9a9996"/>
+        <stop offset="0.95" stop-color="#c0bfbc"/>
+        <stop offset="1" stop-color="#77767b"/>
+    </linearGradient>
+    <filter id="b" 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="c">
+        <g filter="url(#b)">
+            <rect fill-opacity="0.05" height="128" width="128"/>
+        </g>
+    </mask>
+    <radialGradient id="d" cx="63.999996" cy="194.190475" gradientTransform="matrix(4.727273 -0.00000079 0.0000003 1.636364 -230.545471 -205.766182)" gradientUnits="userSpaceOnUse" r="44">
+        <stop offset="0" stop-color="#ffffff"/>
+        <stop offset="1" stop-color="#ffffff" stop-opacity="0.094118"/>
+    </radialGradient>
+    <clipPath id="e">
+        <rect height="152" width="192"/>
+    </clipPath>
+    <path d="m 20 22 h 88 c 4.417969 0 8 3.582031 8 8 v 78 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -78 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0" fill="url(#a)"/>
+    <path d="m 20 12 h 88 c 4.417969 0 8 3.582031 8 8 v 80 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -80 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0" fill="#deddda"/>
+    <path d="m 20 104 h 88 c 2.210938 0 4 -1.789062 4 -4 v -80 c 0 -2.210938 -1.789062 -4 -4 -4 h -88 c -2.210938 0 -4 1.789062 -4 4 v 80 c 0 2.210938 1.789062 4 4 4 z m 0 0" fill="#241f31"/>
+    <g clip-path="url(#e)" mask="url(#c)" transform="matrix(1 0 0 1 -8 -16)">
+        <path d="m 116 116 h -88 v -78 h 88 z m 0 0" fill="url(#d)"/>
+    </g>
+    <path d="m 24 28 h 28 v 4 h -28 z m 0 0" fill="#ff7800"/>
+    <path d="m 24 36 h 16 v 4 h -16 z m 0 0" fill="#deddda"/>
+    <path d="m 32 44 h 42 v 4 h -42 z m 0 0" fill="#3584e4"/>
+    <path d="m 32 52 h 22 v 4 h -22 z m 0 0" fill="#deddda"/>
+    <path d="m 40 60 h 36 v 4 h -36 z m 0 0" fill="#deddda"/>
+    <path d="m 40 68 h 20 v 4 h -20 z m 0 0" fill="#8ff0a4"/>
+    <path d="m 48 76 h 24 v 4 h -24 z m 0 0" fill="#ff7800"/>
+    <path d="m 24 84 h 32 v 4 h -32 z m 0 0" fill="#deddda"/>
+    <path d="m 24 92 h 18 v 4 h -18 z m 0 0" fill="#3584e4"/>
+    <path d="m 32 76 h 14 v 4 h -14 z m 0 0" fill="#8ff0a4"/>
+    <path d="m 62 68 h 20 v 4 h -20 z m 0 0" fill="#deddda"/>
+    <path d="m 78 60 h 18 v 4 h -18 z m 0 0" fill="#3584e4"/>
+</svg>
diff --git a/icons/icond.svg b/icons/icond.svg
new file mode 100644
index 0000000..0311fc4
--- /dev/null
+++ b/icons/icond.svg
@@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="128"
+   width="128"
+   version="1.1"
+   id="svg39"
+   sodipodi:docname="org.mypaint.MyPaint.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">
+  <defs
+     id="defs39" />
+  <sodipodi:namedview
+     id="namedview39"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.9609375"
+     inkscape:cx="25.329815"
+     inkscape:cy="96.591029"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg39" />
+  <linearGradient
+     id="a"
+     gradientTransform="matrix(.25 0 0 .24405 -.750885 51.640579)"
+     gradientUnits="userSpaceOnUse"
+     x1="51.003555"
+     x2="467.003571"
+     y1="43.921288"
+     y2="43.921288">
+    <stop
+       offset="0"
+       stop-color="#babdb6"
+       id="stop1" />
+    <stop
+       offset=".038462"
+       stop-color="#f6f5f4"
+       id="stop2" />
+    <stop
+       offset=".115385"
+       stop-color="#d5d3cf"
+       id="stop3" />
+    <stop
+       offset=".884615"
+       stop-color="#deddda"
+       id="stop4" />
+    <stop
+       offset=".961538"
+       stop-color="#f6f5f4"
+       id="stop5" />
+    <stop
+       offset="1"
+       stop-color="#babdb6"
+       id="stop6" />
+  </linearGradient>
+  <linearGradient
+     id="b"
+     gradientTransform="matrix(0.73973976,0.73973976,-0.73973976,0.73973976,-2.648818,-144.25857)"
+     gradientUnits="userSpaceOnUse"
+     x1="195.347656"
+     x2="211.371094"
+     y1="90.037666"
+     y2="90.037666">
+    <stop
+       offset="0"
+       stop-color="#9497a9"
+       id="stop7" />
+    <stop
+       offset="1"
+       stop-color="#4d5167"
+       id="stop8" />
+  </linearGradient>
+  <linearGradient
+     id="c"
+     gradientTransform="matrix(1.528972,1.1316569,-1.1316569,1.528972,57.123838,-120.86902)"
+     gradientUnits="userSpaceOnUse"
+     x1="61.443886"
+     x2="70.099663"
+     y1="97.697983"
+     y2="76.563164">
+    <stop
+       offset="0"
+       stop-color="#a1886c"
+       id="stop9" />
+    <stop
+       offset="1"
+       stop-color="#250c03"
+       id="stop10" />
+  </linearGradient>
+  <linearGradient
+     id="d"
+     gradientTransform="matrix(.94927796 -.31443817 .31443817 .94927796 -38.782526 8.897673)"
+     gradientUnits="userSpaceOnUse"
+     x1="46.208195"
+     x2="58.283535"
+     y1="107.775642"
+     y2="109.131493">
+    <stop
+       offset="0"
+       stop-color="#0acbfc"
+       id="stop11" />
+    <stop
+       offset="1"
+       stop-color="#0acbfc"
+       stop-opacity="0"
+       id="stop12" />
+  </linearGradient>
+  <radialGradient
+     id="e"
+     cx="-46.61"
+     cy="89.1"
+     gradientTransform="matrix(8.99763 -.7141 .95465 12.02868 375.101802 -1009.7405)"
+     gradientUnits="userSpaceOnUse"
+     r="5.6537">
+    <stop
+       offset="0"
+       stop-color="#00caff"
+       stop-opacity=".972549"
+       id="stop13" />
+    <stop
+       offset="1"
+       stop-color="#f0c100"
+       id="stop14" />
+  </radialGradient>
+  <clipPath
+     id="f">
+    <path
+       d="m0 0h192v152h-192z"
+       id="path14" />
+  </clipPath>
+  <filter
+     id="g"
+     height="1"
+     width="1"
+     x="0"
+     y="0">
+    <feColorMatrix
+       in="SourceGraphic"
+       values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+       id="feColorMatrix14" />
+  </filter>
+  <mask
+     id="h">
+    <g
+       filter="url(#g)"
+       id="g15">
+      <path
+         d="m0 0h128v128h-128z"
+         fill-opacity=".123747"
+         id="path15" />
+    </g>
+  </mask>
+  <g
+     id="g39"
+     transform="matrix(1.1811532,0,0,1.1811532,-32.291167,-15.187453)">
+    <path
+       d="m 121.7852,32.207 c -2.7695,-2.7695 -7.2656,-2.7578 -10.0508,0.0273 L 78.668,65.3007 88.6914,75.3241 121.7578,42.2577 c 2.7852,-2.7852 2.7969,-7.2852 0.0273,-10.0508 z m 0,0"
+       fill="#cd8742"
+       id="path32" />
+    <path
+       d="m 121.7852,32.207 c -0.6055,-0.6016 -1.3125,-1.0898 -2.0938,-1.4375 2.2852,2.8164 1.4766,6.0781 -1.1016,8.6602 L 85.9999,72 l 2.6875,3.3281 33.0703,-33.0742 c 2.7852,-2.7813 2.7969,-7.2813 0.0273,-10.0469 z m 0,0"
+       fill="#a9713c"
+       id="path33" />
+    <path
+       d="m 89.9648,64.0273 c -2.7813,-2.7813 -6.3125,-3.75 -7.8984,-2.1719 -0.0156,0.0156 -0.0273,0.0313 -0.043,0.0508 l -14.1563,12.332 0.0078,0.0078 c -0.0078,0.0039 -0.0117,0.0078 -0.0156,0.0117 2.5313,0.625 5.1914,2.2188 7.4102,4.4336 2.2188,2.2188 3.8125,4.8828 4.4336,7.418 0.1094,-0.125 0.2852,-0.3125 0.3125,-0.3516 L 92.3125,71.7265 c 1.332,-1.6836 0.3047,-5.0508 -2.3477,-7.6992 z m 0,0"
+       fill="url(#b)"
+       id="path34"
+       style="fill:url(#b)" />
+    <path
+       d="m 77.543,81.3555 c 0.668,1.1719 1.8711,3.582 2.1602,4.7539 0.1094,-0.125 0.2852,-0.3125 0.3125,-0.3516 L 92.2032,71.8359 c 0.918,-0.9414 1.0391,-3.1406 -0.4688,-5.5664 z m 0,0"
+       fill="#16110d"
+       fill-opacity="0.25"
+       id="path35" />
+    <path
+       d="m 70.6641,71.2188 c -4.3828,-0.6289 -8.8984,0.9141 -12.4297,3.5781 -3.3594,2.5352 -5.8945,6.0039 -8.082,9.6016 -1.1602,1.9063 -2.2383,3.8711 -3.582,5.6563 -1.9727,2.6211 -4.5039,4.8164 -7.3789,6.3945 5.1055,5.0273 12.3516,7.8008 19.5039,7.4688 7.1563,-0.3281 14.1133,-3.7578 18.7344,-9.2305 1.4336,-1.6953 2.6523,-3.5859 3.4609,-5.6523 0.8047,-2.0703 1.1914,-4.3203 0.9609,-6.5273 -0.293,-2.8359 -1.625,-5.5469 -3.6445,-7.5586 -2.0234,-2.0117 -4.7188,-3.3242 -7.543,-3.7305 z m 0,0"
+       fill="url(#c)"
+       id="path36"
+       style="fill:url(#c)" />
+    <path
+       d="m 77.7109,74.4844 c -0.2148,7.0352 -3.0547,13.9609 -7.8398,19.1211 -4.9922,5.3867 -12.0586,8.7969 -19.3789,9.3555 2.9219,0.8398 5.9922,1.1484 9.0234,0.9063 6.0039,-0.4766 11.7734,-3.1523 16.1484,-7.293 2.1602,-2.0469 4.0117,-4.4688 5.1289,-7.2266 1.1172,-2.7617 1.4727,-5.875 0.7031,-8.75 -0.293,-1.0859 -0.7383,-2.1289 -1.3086,-3.0938 -0.668,-1.125 -1.5039,-2.1484 -2.4766,-3.0195 z m 0,0"
+       fill-opacity="0.2"
+       id="path37" />
+    <path
+       d="m 68,80 c 0,2.2109 -1.7891,4 -4,4 -2.2109,0 -4,-1.7891 -4,-4 0,-2.2109 1.7891,-4 4,-4 2.2109,0 4,1.7891 4,4 z m 0,0"
+       fill="#ffffff"
+       fill-opacity="0.031373"
+       id="path39" />
+  </g>
+</svg>
diff --git a/icons/l10n.svg b/icons/l10n.svg
new file mode 100644
index 0000000..9a490ec
--- /dev/null
+++ b/icons/l10n.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="128px"
+   viewBox="0 0 128 128"
+   width="128px"
+   version="1.1"
+   id="svg17"
+   sodipodi:docname="l10n.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">
+  <defs
+     id="defs17" />
+  <sodipodi:namedview
+     id="namedview17"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.5625"
+     inkscape:cx="-117.44"
+     inkscape:cy="12.16"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g3557" />
+  <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"
+       id="stop1" />
+    <stop
+       offset="1"
+       stop-color="#8ff0a4"
+       stop-opacity="0.003922"
+       id="stop2" />
+  </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"
+       id="stop3" />
+    <stop
+       offset="1"
+       stop-color="#87bae1"
+       stop-opacity="0"
+       id="stop4" />
+  </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"
+     id="path4" />
+  <g
+     fill="#deddda"
+     id="g15">
+    <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"
+       id="path5" />
+  </g>
+  <g
+     id="g3557"
+     transform="translate(108.4649,88.445427)"
+     style="display:inline">
+    <path
+       sodipodi:nodetypes="ccccccccccccccc"
+       inkscape:connector-curvature="0"
+       id="path10150"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:40px;line-height:0%;font-family:FreeSans;-inkscape-font-specification:'FreeSans Bold';text-align:center;text-anchor:middle;display:inline;fill:#241f31;fill-opacity:0.141176;stroke:none;stroke-width:1.10453"
+       d="m -61.735654,18.839412 h -11.201932 l -2.010604,5.732011 h -6.278006 l -0.0034,-1.999994 10.630848,-26.4261006 h 6.811432 l 10.375362,26.4261006 -0.03511,1.999994 h -6.319038 z m -1.682341,-4.874158 -3.898109,-11.1130829 -3.898108,11.1130829 z" />
+    <path
+       d="M -61.730168,16.839419 H -72.9321 l -2.010603,5.732011 h -6.278007 l 10.627475,-28.4260956 h 6.811431 L -53.441558,22.57143 h -6.319039 z M -63.412509,11.96526 -67.310618,0.85217711 -71.208726,11.96526 Z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:40px;line-height:0%;font-family:FreeSans;-inkscape-font-specification:'FreeSans Bold';text-align:center;text-anchor:middle;display:inline;fill:#5e5c64;fill-opacity:1;stroke:none;stroke-width:1.10453"
+       id="path967" />
+    <path
+       style="font-size:64px;font-family:'Noto Sans Thai Looped';-inkscape-font-specification:'Noto Sans Thai Looped';fill:#5e5c64;paint-order:stroke fill markers"
+       d="m 85.333,39.914915 q 3.904,0 7.168,1.28 3.264,1.28 5.184,3.968 1.984,2.688 1.984,6.976 v 23.808 h -5.504 v -23.232 q 0,-4.288 -2.56,-6.208 -2.56,-1.984 -6.336,-1.984 -4.032,0 -6.336,1.92 -2.24,1.856 -2.688,5.248 l 7.552,2.752 -0.64,3.776 q -2.56,0 -4.16,1.536 -1.536,1.472 -1.536,4.864 v 11.328 h -5.504 v -11.392 q 0,-3.52 1.728,-5.632 1.792,-2.176 4.416,-2.752 v -0.128 l -7.424,-2.56 v -2.112 q 0,-3.2 1.792,-5.76 1.792,-2.624 5.056,-4.16 3.328,-1.536 7.808,-1.536 z"
+       id="text17"
+       aria-label="ก"
+       transform="translate(-108.4649,-88.445427)" />
+    <path
+       style="font-size:64px;font-family:'Noto Sans Thai Looped';-inkscape-font-specification:'Noto Sans Thai Looped';fill:#241f31;fill-opacity:0.137611;paint-order:stroke fill markers"
+       d="m 85.333206,41.915006 q 3.904,0 7.168,1.28 3.264,1.28 5.184,3.968 1.984,2.688 1.984,6.976 v 23.808 h -5.504 v -23.232 q 0,-4.288 -2.56,-6.208 -2.56,-1.984 -6.336,-1.984 -4.032,0 -6.336,1.92 -2.24,1.856 -2.688,5.248 l 7.552,2.752 -0.64,3.776 q -2.56,0 -4.16,1.536 -1.536,1.472 -1.536,4.864 v 11.328 h -5.504 v -11.392 q 0,-3.52 1.728,-5.632 1.792,-2.176 4.416,-2.752 v -0.128 l -7.424,-2.56 v -2.112 q 0,-3.2 1.792,-5.76 1.792,-2.624 5.056,-4.16 3.328,-1.536 7.808,-1.536 z"
+       id="text17-8"
+       aria-label="ก"
+       transform="translate(-108.4649,-88.445427)" />
+    <path
+       style="display:inline;opacity:1;fill:#424040;fill-opacity:0.141176;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
+       d="m -54.990577,-28.231957 1.5814,4.83266 11.022049,-12.14429 v -2.93699 l -16.019933,-5.08485 0.05112,2.80593 0.883963,4.60191 c -14.024732,7.0668 -19.629899,18.48872 -19.629899,19.01046 v 2.93699 l 8.903131,1.46896 c 2.013853,-8.5135 6.961348,-12.81866 13.208171,-15.49078 z"
+       id="path10126"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccsccc" />
+    <path
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0"
+       id="path10058"
+       d="m -54.990577,-31.168937 1.5814,4.83265 11.022049,-12.14429 -16.019933,-5.08485 0.935075,4.47085 c -15.804688,7.9637 -17.454299,14.93718 -19.629893,21.94745 l 8.53494,1.50988 c 2.013853,-8.51351 7.329539,-12.85958 13.576362,-15.53169 z"
+       style="display:inline;opacity:1;fill:#33d17a;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new" />
+    <path
+       sodipodi:nodetypes="cccccccccccc"
+       inkscape:connector-curvature="0"
+       id="path10124"
+       d="m -34.918688,11.852913 -1.581401,-4.8326602 -11.910461,9.3579802 0.0076,2.78631 16.072632,5.49891 -0.08702,-3.2594 -0.512868,-1.5072 c 15.804688,-7.9637 18.683942,-18.5633402 19.196122,-21.0855202 l 0.01508,-3.77218 -7.623353,1.28207 c -2.013853,8.5135 -7.329539,12.85957 -13.576361,15.5316902 z"
+       style="display:inline;opacity:1;fill:#000000;fill-opacity:0.141914;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new" />
+    <path
+       style="display:inline;opacity:1;fill:#33d17a;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
+       d="m -35.818304,9.0794828 -1.5814,-4.83265 -11.022049,12.1442802 16.019933,5.08485 -0.935075,-4.47084 C -17.532207,9.0414228 -15.882596,2.0679328 -13.707002,-4.9423272 l -8.53494,-1.50988 c -2.013853,8.51351 -7.329539,12.85957 -13.576362,15.53169 z"
+       id="path10060"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>
diff --git a/icons/other.svg b/icons/other.svg
new file mode 100644
index 0000000..f092d5c
--- /dev/null
+++ b/icons/other.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="128px"
+   viewBox="0 0 128 128"
+   width="128px"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="other.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">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="3.125"
+     inkscape:cx="56.16"
+     inkscape:cy="98.88"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     d="M 14.561316,19.238487 62.857608,6.2975352 99.620231,27.420381 118.78801,98.955489 c 1.14749,4.282521 -1.40978,8.684231 -5.6923,9.831721 l -69.546661,18.63497 c -4.282522,1.14749 -8.65046,-1.37433 -9.797958,-5.65686 L 8.9044626,29.036447 c -1.1474991,-4.282523 1.3743314,-8.650461 5.6568534,-9.79796 z m 0,0"
+     fill="#f6f5f4"
+     id="path13"
+     style="display:inline;fill:#c0bfbc" />
+  <path
+     d="M 43.721269,0.58510738 92.01756,13.52606 113.2935,50.200291 94.125727,121.7354 c -1.1475,4.28253 -5.563013,6.81587 -9.845532,5.66837 L 14.733536,108.7688 C 10.451013,107.6213 7.929184,103.25336 9.0766816,98.970841 L 33.92331,6.2419616 c 1.147498,-4.2825229 5.515436,-6.80435279 9.797959,-5.65685422 z m 0,0"
+     fill="#f6f5f4"
+     id="path14"
+     style="display:inline;fill:#deddda" />
+  <path
+     d="m 28,8 h 50 l 30.04297,29.917969 V 111.97656 C 108.04297,116.41016 104.43359,120 100,120 H 28 c -4.433594,0 -8,-3.56641 -8,-8 V 16 c 0,-4.433594 3.566406,-8 8,-8 z m 0,0"
+     fill="#f6f5f4"
+     id="path1"
+     style="display:inline" />
+  <g
+     fill="#deddda"
+     id="g12">
+    <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"
+       id="path2" />
+    <path
+       d="m 34 100 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"
+       id="path3" />
+    <path
+       d="m 34 92 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"
+       id="path4" />
+    <path
+       d="m 34 84 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"
+       id="path5" />
+    <path
+       d="m 34 76 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"
+       id="path6" />
+    <path
+       d="m 34 68 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"
+       id="path7" />
+    <path
+       d="m 34 60 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"
+       id="path8" />
+    <path
+       d="m 34 52 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"
+       id="path9" />
+    <path
+       d="m 34 44 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"
+       id="path10" />
+    <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"
+       id="path11" />
+    <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"
+       id="path12" />
+  </g>
+</svg>
diff --git a/icons/ui.svg b/icons/ui.svg
new file mode 100644
index 0000000..4c016f1
--- /dev/null
+++ b/icons/ui.svg
@@ -0,0 +1,382 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="128px"
+   viewBox="0 0 128 128"
+   width="128px"
+   version="1.1"
+   id="svg14"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="ttt-org-blueprint.svg"
+   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">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="-38.714096"
+     inkscape:cy="52.856232"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <linearGradient
+     id="a"
+     gradientUnits="userSpaceOnUse"
+     x1="11.999989"
+     x2="115.999989"
+     y1="64"
+     y2="64">
+    <stop
+       offset="0"
+       stop-color="#3d3846"
+       id="stop1"
+       style="stop-color:#1c71d8;stop-opacity:1;" />
+    <stop
+       offset="0.05"
+       stop-color="#77767b"
+       id="stop2"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="0.1"
+       stop-color="#5e5c64"
+       id="stop3"
+       style="stop-color:#3584e4;stop-opacity:1;" />
+    <stop
+       offset="0.90328687"
+       stop-color="#504e56"
+       id="stop4"
+       style="stop-color:#3584e4;stop-opacity:1;" />
+    <stop
+       offset="0.94999999"
+       stop-color="#77767b"
+       id="stop5"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="1"
+       stop-color="#3d3846"
+       id="stop6"
+       style="stop-color:#1c71d8;stop-opacity:1;" />
+  </linearGradient>
+  <linearGradient
+     id="b"
+     gradientUnits="userSpaceOnUse"
+     x1="12"
+     x2="112.041023"
+     y1="60"
+     y2="80.988281">
+    <stop
+       offset="0"
+       stop-color="#77767b"
+       id="stop7"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="0.38444301"
+       stop-color="#9a9996"
+       id="stop8"
+       style="stop-color:#99c1f1;stop-opacity:1;" />
+    <stop
+       offset="0.72056699"
+       stop-color="#77767b"
+       id="stop9"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="1"
+       stop-color="#68666f"
+       id="stop10"
+       style="stop-color:#3584e4;stop-opacity:1;" />
+  </linearGradient>
+  <path
+     d="m 20 22 h 88 c 4.417969 0 8 3.582031 8 8 v 78 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -78 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0"
+     fill="url(#a)"
+     id="path10" />
+  <path
+     d="m 20 12 h 88 c 4.417969 0 8 3.582031 8 8 v 80 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -80 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0"
+     fill="url(#b)"
+     id="path11" />
+  <path
+     d="m 20 14 h 88 c 3.3125 0 6 2.6875 6 6 v 80 c 0 3.3125 -2.6875 6 -6 6 h -88 c -3.3125 0 -6 -2.6875 -6 -6 v -80 c 0 -3.3125 2.6875 -6 6 -6 z m 0 0"
+     fill="#241f31"
+     id="path12"
+     style="fill:#1a5fb4;fill-opacity:1" />
+  <g
+     id="g14-3"
+     transform="translate(3,-3.3761482)"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none">
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-5"
+       width="36"
+       height="12"
+       x="47"
+       y="44.376148"
+       ry="2.4000001" />
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-3-6"
+       width="12"
+       height="48"
+       x="59"
+       y="44.376148"
+       ry="2.4000001" />
+  </g>
+  <g
+     id="g14"
+     transform="translate(-1,-7.3761484)"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none">
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14"
+       width="36"
+       height="12"
+       x="47"
+       y="44.376148"
+       ry="2.4000001" />
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-3"
+       width="12"
+       height="48"
+       x="59"
+       y="44.376148"
+       ry="2.4000001" />
+  </g>
+  <g
+     id="g14-2"
+     transform="translate(-5,-11.376148)"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none">
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-9"
+       width="36"
+       height="12"
+       x="47"
+       y="44.376148"
+       ry="2.4000001" />
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-3-1"
+       width="12"
+       height="48"
+       x="59"
+       y="44.376148"
+       ry="2.4000001" />
+  </g>
+  <g
+     id="g4">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3"
+       width="100"
+       height="2.5"
+       x="14"
+       y="35.75" />
+  </g>
+  <g
+     id="g4-1"
+     transform="translate(0,-12)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-2"
+       width="100"
+       height="2.5"
+       x="14"
+       y="31.75" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-31"
+       width="100"
+       height="2.5"
+       x="14"
+       y="39.75" />
+  </g>
+  <g
+     id="g5">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7"
+       width="100"
+       height="2.5"
+       x="14"
+       y="43.75" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-2"
+       width="100"
+       height="2.5"
+       x="14"
+       y="51.75" />
+  </g>
+  <g
+     id="g4-2"
+     transform="translate(0,24)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-2"
+       width="100"
+       height="2.5"
+       x="14"
+       y="35.75" />
+  </g>
+  <g
+     id="g5-7"
+     transform="translate(0,24)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-59"
+       width="100"
+       height="2.5"
+       x="14"
+       y="43.75" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-2-8"
+       width="100"
+       height="2.5"
+       x="14"
+       y="51.75" />
+  </g>
+  <g
+     id="g5-1"
+     transform="translate(0,36)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-7"
+       width="100"
+       height="2.5"
+       x="14"
+       y="47.75" />
+  </g>
+  <g
+     id="g5-1-9"
+     transform="translate(0,48)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-8-7"
+       width="100"
+       height="2.5"
+       x="14"
+       y="43.75" />
+  </g>
+  <g
+     id="g2">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6"
+       width="2.5"
+       height="92"
+       x="60.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-7"
+     transform="translate(-12)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-9"
+       width="2.5"
+       height="92"
+       x="56.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-7-6"
+     transform="translate(-24)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-0-1"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6-3-6"
+       width="2.5"
+       height="92"
+       x="60.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-7-6-3"
+     transform="translate(-36)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-9-0-0"
+       width="2.5"
+       height="92"
+       x="56.75"
+       y="14" />
+  </g>
+  <g
+     id="g3">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6-2-9"
+       width="2.5"
+       height="92"
+       x="68.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-6"
+     transform="translate(24)"
+     style="stroke-width:1;stroke-dasharray:none">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-06"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6-6"
+       width="2.5"
+       height="92"
+       x="60.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-6-9"
+     transform="translate(36)"
+     style="stroke-width:1;stroke-dasharray:none">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-2-7"
+       width="2.5"
+       height="92"
+       x="56.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-6-9-4"
+     transform="translate(48)"
+     style="stroke-width:1;stroke-dasharray:none">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-06-4-5"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+  </g>
+</svg>
diff --git a/works/index.html b/works/index.html
index 6d111db..325a8e7 100644
--- a/works/index.html
+++ b/works/index.html
@@ -56,10 +56,10 @@
               <h3 style="color: white;">DevOps & 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%);">
+          <a class="itemcard-works" href="/works/uidesign" style="background: #FAF5D4;">
             <div class="listaction">
-              <!-- <img src="resources/icons/c4c.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>UI Design</h3>
+              <img src="/icons/ui.svg"  width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: black;">UI Design</h3>
             </div>
           </a>
           <!-- <a class="itemcard-works" href="/works/icondesign" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
@@ -71,19 +71,19 @@
           <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="/icons/opendata.svg"  width="36" height="36" style="margin: 0.3cm;"> 
-              <h3>Open Data</h3>
+              <h3 style="color: black;">Open Data</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works/l10n" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
+          <a class="itemcard-works" href="/works/l10n" style="background: linear-gradient(to bottom, rgb(51, 209, 122) 0%,rgb(38, 162, 105) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/opensourcefund.svg" width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Translation</h3>
+              <img src="/icons/l10n.svg" width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: white;">Translation</h3>
             </div>
           </a>
-          <a class="itemcard-works" href="/works/code" style="background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%,rgba(60, 60, 60, 0) 100%);">
+          <a class="itemcard-works" href="/works/code" style="background: linear-gradient(to bottom, rgb(100, 100, 100) 0%,rgba(60, 60, 60) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Code</h3>
+              <img src="/icons/code.svg"  width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: white;">Code</h3>
             </div>
           </a>
           <a class="itemcard-works" href="/works/docs" style="background: linear-gradient(to bottom, rgb(46, 194, 126) 0%,rgb(28, 113, 216) 100%);">
@@ -98,10 +98,10 @@
               <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%);">
+          <a class="itemcard-works" href="/works/other" style="background: linear-gradient(to bottom, rgb(181, 131, 90) 0%,rgb(134, 94, 60) 100%);">
             <div class="listaction">
-              <!-- <img src="resources/icons/openvoice.svg"  width="36" height="36" style="margin: 0.3cm;">  -->
-              <h3>Other</h3>
+              <img src="/icons/other.svg"  width="36" height="36" style="margin: 0.3cm;"> 
+              <h3 style="color: white;">Other</h3>
             </div>
           </a>
         </div>