From 30c4252e40a5d2671ae78288a85695f855a71a7a Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Wed, 21 May 2025 15:49:21 +0100
Subject: [PATCH 1/8] hamburger dropdown: match theme background colour

---
 public/style/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/style/header.css b/public/style/header.css
index 48971b5..531649a 100644
--- a/public/style/header.css
+++ b/public/style/header.css
@@ -154,7 +154,7 @@ header ul li a:hover {
         flex-direction: column;
         gap: 1rem;
         border-bottom: 1px solid #888;
-        background: #080808;
+        background: var(--background);
         display: none;
     }
 

From da1cd0204e37ebae2f526d6f8a8f5766c19daa2c Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Fri, 23 May 2025 12:23:05 +0100
Subject: [PATCH 2/8] update socials and projects

---
 views/index.html | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/views/index.html b/views/index.html
index ba0ca15..f18d87a 100644
--- a/views/index.html
+++ b/views/index.html
@@ -91,14 +91,17 @@
         <li>
             <a href="https://twitch.tv/arispacegirl" target="_blank">twitch</a>
         </li>
-        <li>
-            <a href="https://sptfy.com/mellodoot" target="_blank">spotify</a>
-        </li>
         <li>
             <a href="https://arimelody.bandcamp.com" target="_blank">bandcamp</a>
         </li>
         <li>
-            <a href="https://github.com/arimelody" target="_blank">github</a>
+            <a href="https://codeberg.org/arimelody" target="_blank">codeberg</a>
+        </li>
+        <li>
+            <a href="https://bsky.app/profile/arimelody.me" target="_blank">bluesky</a>
+        </li>
+        <li>
+            <a href="https://discord.gg/MmJtBebF28" target="_blank">discord</a>
         </li>
     </ul>
 
@@ -106,6 +109,11 @@
     <strong>projects i've worked on 🛠️</strong>
     </p>
     <ul class="links">
+        <li>
+            <a href="https://codeberg.org/arimelody/mcstatusface" target="_blank">
+                mcstatusface
+            </a>
+        </li>
         <li>
             <a href="https://catdance.arimelody.me" target="_blank">
                 catdance

From fe84a59326f4806001fa0b09da6d535fd4fcf1a6 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sun, 15 Jun 2025 02:51:23 +0100
Subject: [PATCH 3/8] add thermia web button

---
 public/img/buttons/thermia.gif | Bin 0 -> 10184 bytes
 views/index.html               |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 public/img/buttons/thermia.gif

diff --git a/public/img/buttons/thermia.gif b/public/img/buttons/thermia.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a7ee70ae2577b21a6a6f29d8a20e7ce4477bfcbf
GIT binary patch
literal 10184
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
EFTbFaWdHyG

literal 0
HcmV?d00001

diff --git a/views/index.html b/views/index.html
index f18d87a..070d648 100644
--- a/views/index.html
+++ b/views/index.html
@@ -162,8 +162,8 @@
         <a href="https://mae.wtf" target="_blank">
             <img src="/img/buttons/mae.png" alt="vimae web button" width="88" height="31">
         </a>
-        <a href="https://zvava.org" target="_blank">
-            <img src="/img/buttons/zvava.png" alt="zvava web button" width="88" height="31">
+        <a href="https://girlthi.ng/~thermia/" target="_blank">
+            <img src="/img/buttons/thermia.png" alt="thermia web button" width="88" height="31">
         </a>
         <a href="https://elke.cafe" target="_blank">
             <img src="/img/buttons/elke.gif" alt="elke web button" width="88" height="31">

From 69e2e22e47c452151ba686ed6528b10a145b3227 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Mon, 16 Jun 2025 20:32:46 +0100
Subject: [PATCH 4/8] homepage rework for socials and projects

---
 controller/qr.go              |  67 --------------
 public/img/brand/bandcamp.svg |  10 +++
 public/img/brand/bluesky.svg  |  10 +++
 public/img/brand/codeberg.svg | 164 ++++++++++++++++++++++++++++++++++
 public/img/brand/discord.svg  |   1 +
 public/img/brand/twitch.svg   |  21 +++++
 public/img/brand/youtube.svg  |  10 +++
 public/script/index.js        |   7 ++
 public/script/main.js         |  17 ++++
 public/script/music.js        |  12 +--
 public/style/index.css        |  88 ++++++++++++++++--
 views/index.html              | 162 ++++++++++++++++++++++-----------
 12 files changed, 432 insertions(+), 137 deletions(-)
 create mode 100644 public/img/brand/bandcamp.svg
 create mode 100644 public/img/brand/bluesky.svg
 create mode 100644 public/img/brand/codeberg.svg
 create mode 100644 public/img/brand/discord.svg
 create mode 100644 public/img/brand/twitch.svg
 create mode 100644 public/img/brand/youtube.svg

diff --git a/controller/qr.go b/controller/qr.go
index 6b04e69..dd08637 100644
--- a/controller/qr.go
+++ b/controller/qr.go
@@ -1,13 +1,9 @@
 package controller
 
 import (
-    "bytes"
     "encoding/base64"
-    "errors"
-    "fmt"
     "image"
     "image/color"
-    "image/png"
 
     "github.com/skip2/go-qrcode"
 )
@@ -33,69 +29,6 @@ const (
     HIGH
 )
 
-func noDepsGenerateQRCode() (string, error) {
-    version := 1
-
-    size := 0
-    size = 21 + version * 4
-    if version > 10 {
-        return "", errors.New(fmt.Sprintf("QR version %d not supported", version))
-    }
-
-    img := image.NewGray(image.Rect(0, 0, size + margin * 2, size + margin * 2))
-
-    // fill white
-    for y := range size + margin * 2 {
-        for x := range size + margin * 2 {
-            img.Set(x, y, color.White)
-        }
-    }
-
-    // draw alignment squares
-    drawLargeAlignmentSquare(margin, margin, img)
-    drawLargeAlignmentSquare(margin, margin + size - 7, img)
-    drawLargeAlignmentSquare(margin + size - 7, margin, img)
-    drawSmallAlignmentSquare(size - 5, size - 5, img)
-    /*
-    if version > 4 {
-        space := version * 3 - 2
-        end := size / space
-        for y := range size / space + 1 {
-            for x := range size / space + 1 {
-                if x == 0 && y == 0 { continue }
-                if x == 0 && y == end { continue }
-                if x == end && y == 0 { continue }
-                if x == end && y == end { continue }
-                drawSmallAlignmentSquare(
-                    x * space + margin + 4,
-                    y * space + margin + 4,
-                    img,
-                )
-            }
-        }
-    }
-    */
-
-    // draw timing bits
-    for i := margin + 6; i < size - 4; i++ {
-        if (i % 2 == 0) {
-            img.Set(i, margin + 6, color.Black)
-            img.Set(margin + 6, i, color.Black)
-        }
-    }
-    img.Set(margin + 8, size - 4, color.Black)
-
-    var imgBuf bytes.Buffer
-    err := png.Encode(&imgBuf, img)
-    if err != nil {
-        return "", err
-    }
-
-    base64Img := base64.StdEncoding.EncodeToString(imgBuf.Bytes())
-
-    return "data:image/png;base64," + base64Img, nil
-}
-
 func drawLargeAlignmentSquare(x int, y int, img *image.Gray) {
     for yi := range 7 {
         for xi := range 7 {
diff --git a/public/img/brand/bandcamp.svg b/public/img/brand/bandcamp.svg
new file mode 100644
index 0000000..9623ec2
--- /dev/null
+++ b/public/img/brand/bandcamp.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g>
+        <path d="M256,512C397.384,512 512,397.385 512,256C512,114.616 397.384,0 256,0C114.615,0 0,114.616 0,256C0,397.385 114.615,512 256,512Z" style="fill:rgb(35,159,194);"/>
+        <path d="M324.857,238.405C306.507,238.405 297.131,252.847 297.131,274.605C297.131,295.171 307.269,310.609 324.857,310.609C344.746,310.609 352.202,292.407 352.202,274.605C352.188,256.015 342.817,238.405 324.851,238.405L324.857,238.405ZM276.1,184.409L297.896,184.409L297.896,236.624L298.282,236.624C304.209,226.737 316.637,220.603 327.728,220.603C358.89,220.603 374.001,245.137 374.001,275.007C374.001,302.492 360.618,328.405 331.358,328.405C317.974,328.405 303.633,325.051 297.13,311.596L296.752,311.596L296.752,325.647L276.098,325.647L276.098,184.412L276.1,184.409Z" style="fill:white;"/>
+        <path d="M454.389,257.598C452.667,245.136 443.874,238.406 431.827,238.406C420.54,238.406 404.674,244.541 404.674,275.598C404.674,292.61 411.938,310.613 430.87,310.613C443.488,310.613 452.281,301.899 454.389,287.262L476.185,287.262C472.169,313.768 456.302,328.405 430.87,328.405C399.893,328.405 382.876,305.663 382.876,275.598C382.876,244.742 399.129,220.609 431.635,220.609C454.579,220.609 474.089,232.476 476.185,257.6L454.425,257.6L454.389,257.598Z" style="fill:white;"/>
+        <path d="M199.895,325.339L36.407,325.339L112.753,184.409L276.242,184.409L199.895,325.339Z" style="fill:white;"/>
+    </g>
+</svg>
diff --git a/public/img/brand/bluesky.svg b/public/img/brand/bluesky.svg
new file mode 100644
index 0000000..d77fafe
--- /dev/null
+++ b/public/img/brand/bluesky.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 568 501" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-228,-281.442)">
+        <path d="M351.121,315.106C416.241,363.994 486.281,463.123 512,516.315C537.719,463.123 607.759,363.994 672.879,315.106C719.866,279.83 796,252.536 796,339.388C796,356.734 786.055,485.101 780.222,505.943C759.947,578.396 686.067,596.876 620.347,585.691C735.222,605.242 764.444,670.002 701.333,734.762C581.473,857.754 529.061,703.903 515.631,664.481C513.169,657.254 512.017,653.873 512,656.748C511.983,653.873 510.831,657.254 508.369,664.481C494.939,703.903 442.527,857.754 322.667,734.762C259.556,670.002 288.778,605.242 403.653,585.691C337.933,596.876 264.053,578.396 243.778,505.943C237.945,485.101 228,356.734 228,339.388C228,252.536 304.134,279.83 351.121,315.106Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.06233e-14,500.117,-500.117,3.06233e-14,512,281.442)"><stop offset="0" style="stop-color:rgb(10,122,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(89,185,255);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
diff --git a/public/img/brand/codeberg.svg b/public/img/brand/codeberg.svg
new file mode 100644
index 0000000..028b729
--- /dev/null
+++ b/public/img/brand/codeberg.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333332 4.2333335"
+   version="1.1"
+   id="svg1468"
+   sodipodi:docname="codeberg-logo_icon_blue.svg"
+   inkscape:version="1.2-alpha1 (b6a15bb, 2022-02-23)"
+   inkscape:export-filename="/home/mray/Projects/Codeberg/logo/icon/png/codeberg-logo_icon_blue.png"
+   inkscape:export-xdpi="384"
+   inkscape:export-ydpi="384"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <title
+     id="title16">Codeberg logo</title>
+  <defs
+     id="defs1462">
+    <linearGradient
+       xlink:href="#linearGradient6924"
+       id="linearGradient6918"
+       x1="42519.285"
+       y1="-7078.7891"
+       x2="42575.336"
+       y2="-6966.9307"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient6924">
+      <stop
+         style="stop-color:#2185d0;stop-opacity:0"
+         offset="0"
+         id="stop6920" />
+      <stop
+         id="stop6926"
+         offset="0.49517274"
+         style="stop-color:#2185d0;stop-opacity:0.48923996" />
+      <stop
+         style="stop-color:#2185d0;stop-opacity:0.63279623"
+         offset="1"
+         id="stop6922" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient6924-6"
+       id="linearGradient6918-3"
+       x1="42519.285"
+       y1="-7078.7891"
+       x2="42575.336"
+       y2="-6966.9307"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient6924-6">
+      <stop
+         style="stop-color:#2185d0;stop-opacity:0;"
+         offset="0"
+         id="stop6920-7" />
+      <stop
+         id="stop6926-5"
+         offset="0.49517274"
+         style="stop-color:#2185d0;stop-opacity:0.30000001;" />
+      <stop
+         style="stop-color:#2185d0;stop-opacity:0.30000001;"
+         offset="1"
+         id="stop6922-3" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     showborder="false"
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="12.948893"
+     inkscape:cy="12.661631"
+     inkscape:document-units="px"
+     inkscape:current-layer="svg1468"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:snap-global="false"
+     inkscape:snap-page="true"
+     showguides="false"
+     inkscape:window-width="1531"
+     inkscape:window-height="873"
+     inkscape:window-x="69"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2067" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1465">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Codeberg logo</dc:title>
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Robert Martinez</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:rights>
+          <cc:Agent>
+            <dc:title>Codeberg and the Codeberg Logo are trademarks of Codeberg e.V.</dc:title>
+          </cc:Agent>
+        </dc:rights>
+        <dc:date>2020-04-09</dc:date>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title>Codeberg e.V.</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:source>codeberg.org</dc:source>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g370484"
+     inkscape:label="logo"
+     transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)">
+    <path
+       id="path6733-5"
+       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient6918-3);fill-opacity:1;stroke:none;stroke-width:3.67846;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill;stop-color:#000000;stop-opacity:1"
+       d="m 42519.285,-7078.7891 a 0.76086879,0.56791688 0 0 0 -0.738,0.6739 l 33.586,125.8886 a 87.182358,87.182358 0 0 0 39.381,-33.7636 l -71.565,-92.5196 a 0.76086879,0.56791688 0 0 0 -0.664,-0.2793 z"
+       transform="matrix(0.37058478,0,0,0.37058478,-15690.065,2662.0533)"
+       inkscape:label="berg" />
+    <path
+       id="path360787"
+       style="opacity:1;fill:#2185d0;fill-opacity:1;stroke-width:17.0055;paint-order:markers fill stroke;stop-color:#000000"
+       d="m 11249.461,-1883.6961 c -12.74,0 -23.067,10.3275 -23.067,23.0671 0,4.3335 1.22,8.5795 3.522,12.2514 l 19.232,-24.8636 c 0.138,-0.1796 0.486,-0.1796 0.624,0 l 19.233,24.8646 c 2.302,-3.6721 3.523,-7.9185 3.523,-12.2524 0,-12.7396 -10.327,-23.0671 -23.067,-23.0671 z"
+       sodipodi:nodetypes="sccccccs"
+       inkscape:label="sky"
+       transform="matrix(1.4006354,0,0,1.4006354,-15690.065,2662.0533)" />
+  </g>
+</svg>
diff --git a/public/img/brand/discord.svg b/public/img/brand/discord.svg
new file mode 100644
index 0000000..b636d15
--- /dev/null
+++ b/public/img/brand/discord.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96"><defs><style>.cls-1{fill:#5865f2;}</style></defs><path id="Discord-Symbol-Blurple" class="cls-1" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"/></svg>
\ No newline at end of file
diff --git a/public/img/brand/twitch.svg b/public/img/brand/twitch.svg
new file mode 100644
index 0000000..3120fea
--- /dev/null
+++ b/public/img/brand/twitch.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#9146FF;}
+</style>
+<title>Asset 2</title>
+<g>
+	<polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 	"/>
+	<g>
+		<g id="Layer_1-2">
+			<path class="st1" d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
+				V1300z"/>
+			<rect x="1700" y="550" class="st1" width="200" height="600"/>
+			<rect x="1150" y="550" class="st1" width="200" height="600"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/public/img/brand/youtube.svg b/public/img/brand/youtube.svg
new file mode 100644
index 0000000..3286071
--- /dev/null
+++ b/public/img/brand/youtube.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 507 355" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(4.16667,0,0,4.16667,495.608,299.004)">
+        <path d="M0,-58.482C-1.397,-63.709 -5.514,-67.825 -10.741,-69.222C-20.215,-71.761 -58.204,-71.761 -58.204,-71.761C-58.204,-71.761 -96.193,-71.761 -105.667,-69.222C-110.894,-67.825 -115.011,-63.709 -116.408,-58.482C-118.946,-49.008 -118.946,-29.241 -118.946,-29.241C-118.946,-29.241 -118.946,-9.474 -116.408,-0.001C-115.011,5.226 -110.894,9.343 -105.667,10.74C-96.193,13.279 -58.204,13.279 -58.204,13.279C-58.204,13.279 -20.215,13.279 -10.741,10.74C-5.514,9.343 -1.397,5.226 0,-0.001C2.539,-9.474 2.539,-29.241 2.539,-29.241C2.539,-29.241 2.539,-49.008 0,-58.482" style="fill:rgb(255,0,0);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(4.16667,0,0,4.16667,202.472,101.237)">
+        <path d="M0,36.446L31.562,18.223L0,0L0,36.446Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+</svg>
diff --git a/public/script/index.js b/public/script/index.js
index 512ed8f..2197bd4 100644
--- a/public/script/index.js
+++ b/public/script/index.js
@@ -1,3 +1,5 @@
+import { hijackClickEvent } from "./main.js";
+
 const hexPrimary = document.getElementById("hex-primary");
 const hexSecondary = document.getElementById("hex-secondary");
 const hexTertiary = document.getElementById("hex-tertiary");
@@ -14,3 +16,8 @@ updateHexColours();
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
     updateHexColours();
 });
+
+document.querySelectorAll("ul#projects li.project-item").forEach(projectItem => {
+    const link = projectItem.querySelector('a');
+    hijackClickEvent(projectItem, link);
+});
diff --git a/public/script/main.js b/public/script/main.js
index c1d5101..19eddc2 100644
--- a/public/script/main.js
+++ b/public/script/main.js
@@ -45,6 +45,23 @@ function fill_list(list) {
     });
 }
 
+export function hijackClickEvent(container, link) {
+    container.addEventListener('click', event => {
+        if (event.target.tagName.toLowerCase() === 'a') return;
+        event.preventDefault();
+        link.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            button: event.button,
+        }));
+    });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     [...document.querySelectorAll(".typeout")]
         .filter((e) => e.innerText != "")
diff --git a/public/script/music.js b/public/script/music.js
index 273ce2b..91f34ab 100644
--- a/public/script/music.js
+++ b/public/script/music.js
@@ -1,12 +1,6 @@
-import "./main.js";
+import { hijackClickEvent } from "./main.js";
 
 document.querySelectorAll("div.music").forEach(container => {
-    const link = container.querySelector(".music-title a").href
-
-    container.addEventListener("click", event => {
-        if (event.target.href) return;
-
-        event.preventDefault();
-        location = link;
-    });
+    const link = container.querySelector(".music-title a")
+    hijackClickEvent(container, link);
 });
diff --git a/public/style/index.css b/public/style/index.css
index f3cb761..6edb362 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -96,30 +96,36 @@ hr {
     overflow: visible;
 }
 
-ul.links {
+ul.platform-links {
+    padding-left: 1em;
     display: flex;
-    gap: 1em .5em;
+    gap: .5em;
     flex-wrap: wrap;
 }
 
-ul.links li {
+ul.platform-links li {
     list-style: none;
 }
 
-ul.links li a {
+ul.platform-links li a {
     padding: .4em .5em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
     border: 1px solid var(--links);
     color: var(--links);
     border-radius: 2px;
     background-color: transparent;
-    transition-property: color, border-color, background-color;
+    transition-property: color, border-color, background-color, box-shadow;
     transition-duration: .2s;
     animation-delay: 0s;
     animation: list-item-fadein .2s forwards;
     opacity: 0;
 }
 
-ul.links li a:hover {
+ul.platform-links li a:hover {
     color: #eee;
     border-color: #eee;
     background-color: var(--links) !important;
@@ -127,6 +133,75 @@ ul.links li a:hover {
     box-shadow: 0 0 1em var(--links);
 }
 
+ul.platform-links li a img {
+    height: 1em;
+    width: 1em;
+}
+
+ul#projects {
+    padding: 0;
+    list-style: none;
+}
+
+li.project-item {
+    padding: .5em;
+    border: 1px solid var(--links);
+    margin: 1em 0;
+    display: flex;
+    flex-direction: row;
+    gap: .5em;
+    border-radius: 2px;
+    transition-property: color, border-color, background-color, box-shadow;
+    transition-duration: .2s;
+    cursor: pointer;
+}
+li.project-item a {
+    transition: color .2s linear;
+}
+
+li.project-item:hover {
+    color: #eee;
+    border-color: #eee;
+    background-color: var(--links) !important;
+    text-decoration: none;
+    box-shadow: 0 0 1em var(--links);
+}
+li.project-item:hover a {
+    color: #eee;
+}
+
+li.project-item .project-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+li.project-item img.project-icon {
+    width: 2.5em;
+    height: 2.5em;
+    object-fit: cover;
+    border-radius: 2px;
+}
+
+li.project-item span.project-icon {
+    font-size: 2em;
+    display: block;
+    width: 45px;
+    height: 45px;
+    text-align: center;
+    /* background: #0004; */
+    /* border: 1px solid var(--on-background); */
+    border-radius: 2px;
+}
+
+li.project-item a {
+    text-decoration: none;
+}
+
+li.project-item p {
+    margin: 0;
+}
+
 div#web-buttons {
     margin: 2rem 0;
 }
@@ -147,4 +222,3 @@ div#web-buttons {
     transform: translate(-2px, -2px);
     box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
 }
-
diff --git a/views/index.html b/views/index.html
index 070d648..f639c55 100644
--- a/views/index.html
+++ b/views/index.html
@@ -17,7 +17,7 @@
 <link rel="me" href="https://ice.arimelody.me/@ari">
 <link rel="me" href="https://wetdry.world/@ari">
 
-<script type="module" src="/script/index.js" defer> </script>
+<script type="module" src="/script/index.js" defer></script>
 {{end}}
 
 {{define "content"}}
@@ -33,7 +33,7 @@
     </p>
 
     <p>
-    i'm a <a href="/music">musician</a>, <a href="https://github.com/arimelody?tab=repositories">developer</a>,
+    i'm a <a href="/music">musician</a>, <a href="https://codeberg.org/arimelody?tab=repositories">developer</a>,
     <a href="https://twitch.tv/arispacegirl">streamer</a>, <a href="https://youtube.com/@arispacegirl">youtuber</a>, 
     and probably a bunch of other things i forgot to mention!
     </p>
@@ -44,7 +44,7 @@
     <p>	
     if you're looking to support me financially, that's so cool of you!!
     if you like, you can buy some of my music over on
-    <a href="https://arimelody.bandcamp.com" target="_blank">bandcamp</a>
+    <a href="https://arimelody.bandcamp.com">bandcamp</a>
     so you can at least get something for your money.
     thank you very much either way!! 💕
     </p>
@@ -84,65 +84,119 @@
     <p>
     <strong>where to find me 🛰️</strong>
     </p>
+    <!--
     <ul class="links">
         <li>
-            <a href="https://youtube.com/@arispacegirl" target="_blank">youtube</a>
+            <a href="https://youtube.com/@arispacegirl">youtube</a>
         </li>
         <li>
-            <a href="https://twitch.tv/arispacegirl" target="_blank">twitch</a>
+            <a href="https://twitch.tv/arispacegirl">twitch</a>
         </li>
         <li>
-            <a href="https://arimelody.bandcamp.com" target="_blank">bandcamp</a>
+            <a href="https://arimelody.bandcamp.com">bandcamp</a>
         </li>
         <li>
-            <a href="https://codeberg.org/arimelody" target="_blank">codeberg</a>
+            <a href="https://codeberg.org/arimelody">codeberg</a>
         </li>
         <li>
-            <a href="https://bsky.app/profile/arimelody.me" target="_blank">bluesky</a>
+            <a href="https://bsky.app/profile/arimelody.me">bluesky</a>
         </li>
         <li>
-            <a href="https://discord.gg/MmJtBebF28" target="_blank">discord</a>
+            <a href="https://discord.gg/MmJtBebF28">discord</a>
+        </li>
+    </ul>
+    -->
+    <ul class="platform-links">
+        <li>
+            <a href="https://youtube.com/@arispacegirl" title="youtube">
+                <img src="/img/brand/youtube.svg" alt="youtube" width="32" height="32"/>
+                youtube
+            </a>
+        </li>
+        <li>
+            <a href="https://twitch.tv/arispacegirl" title="twitch">
+                <img src="/img/brand/twitch.svg" alt="twitch" width="32" height="32"/>
+                twitch
+            </a>
+        </li>
+        <li>
+            <a href="https://arimelody.bandcamp.com" title="bandcamp">
+                <img src="/img/brand/bandcamp.svg" alt="bandcamp" width="32" height="32"/>
+                bandcamp
+            </a>
+        </li>
+        <li>
+            <a href="https://codeberg.org/arimelody" title="codeberg">
+                <img src="/img/brand/codeberg.svg" alt="codeberg" width="32" height="32"/>
+                codeberg
+            </a>
+        </li>
+        <li>
+            <a href="https://bsky.app/profile/arimelody.me" title="bluesky">
+                <img src="/img/brand/bluesky.svg" alt="bluesky" width="32" height="32"/>
+                bluesky
+            </a>
+        </li>
+        <li>
+            <a href="https://discord.gg/MmJtBebF28" title="discord">
+                <img src="/img/brand/discord.svg" alt="discord" width="32" height="32"/>
+                discord
+            </a>
         </li>
     </ul>
 
     <p>
     <strong>projects i've worked on 🛠️</strong>
     </p>
-    <ul class="links">
-        <li>
-            <a href="https://codeberg.org/arimelody/mcstatusface" target="_blank">
-                mcstatusface
-            </a>
+    <ul id="projects">
+        <li class="project-item">
+            <span aria-hidden=true class="project-icon">⛏️</span>
+            <div class="project-info">
+                <a href="https://mcq.bliss.town">McStatusFace</a>
+                <p>minecraft server query utility</p>
+            </div>
         </li>
-        <li>
-            <a href="https://catdance.arimelody.me" target="_blank">
-                catdance
-            </a>
+        <li class="project-item">
+            <img src="https://catdance.arimelody.me/img/favicon.png" alt="catdance icon" aria-hidden=true class="project-icon" width="64" height="64">
+            <div class="project-info">
+                <a href="https://catdance.arimelody.me">catdance</a>
+                <p>watch the cat dance 🐱</p>
+            </div>
         </li>
-        <li>
-            <a href="https://git.arimelody.me/ari/prideflag" target="_blank">
-                pride flag
-            </a>
+        <li class="project-item">
+            <img src="https://git.arimelody.me/repo-avatars/6b0a1ffb78cbc6f906f83152ea42a710220174e8f48a3e44f159ae58dacd7a2f" alt="catdance icon" aria-hidden=true class="project-icon" width="64" height="64">
+            <div class="project-info">
+                <a href="https://git.arimelody.me/ari/prideflag">pride flag</a>
+                <p>progressive pride flag widget for websites</p>
+            </div>
         </li>
-        <li>
-            <a href="https://github.com/arimelody/ipaddrgen" target="_blank">
-                ipaddrgen
-            </a>
+        <li class="project-item">
+            <span aria-hidden=true class="project-icon">👩‍💻</span>
+            <div class="project-info">
+                <a href="https://github.com/arimelody/ipaddrgen">ipaddrgen</a>
+                <p>silly hackerman IP address generator</p>
+            </div>
         </li>
-        <li>
-            <a href="https://impact.arimelody.me/" target="_blank">
-                impact meme
-            </a>
+        <li class="project-item">
+            <img src="https://impact.arimelody.me/favicon.png" alt="impact meme icon" aria-hidden=true class="project-icon" width="64" height="64">
+            <div class="project-info">
+                <a href="https://impact.arimelody.me/">impact meme</a>
+                <p>impact meme generator</p>
+            </div>
         </li>
-        <li>
-            <a href="https://term.arimelody.me/" target="_blank">
-                OpenTerminal
-            </a>
+        <li class="project-item">
+            <img src="https://codeberg.org/repo-avatars/e67303eeda4fa6d268948e71b7b0837357d8c519772701ffc36b84ae7975319f" alt="OpenTerminal icon" aria-hidden=true class="project-icon" width="64" height="64">
+            <div class="project-info">
+                <a href="https://term.arimelody.me/">OpenTerminal</a>
+                <p>communal online text buffer</p>
+            </div>
         </li>
-        <li>
-            <a href="https://silver.bliss.town/" target="_blank">
-                Silver.js
-            </a>
+        <li class="project-item">
+            <span aria-hidden=true class="project-icon">📜</span>
+            <div class="project-info">
+                <a href="https://silver.bliss.town/">Silver.js</a>
+                <p>lightweight reactive state library</p>
+            </div>
         </li>
     </ul>
 
@@ -156,40 +210,40 @@
         <a href="https://arimelody.me">
             <img src="/img/buttons/ari melody.gif" alt="ari melody web button" width="88" height="31">
         </a>
-        <a href="https://supitszaire.com" target="_blank">
+        <a href="https://supitszaire.com">
             <img src="/img/buttons/zaire.gif" alt="zaire web button" width="88" height="31">
         </a>
-        <a href="https://mae.wtf" target="_blank">
+        <a href="https://mae.wtf">
             <img src="/img/buttons/mae.png" alt="vimae web button" width="88" height="31">
         </a>
-        <a href="https://girlthi.ng/~thermia/" target="_blank">
-            <img src="/img/buttons/thermia.png" alt="thermia web button" width="88" height="31">
+        <a href="https://girlthi.ng/~thermia/">
+            <img src="/img/buttons/thermia.gif" alt="thermia web button" width="88" height="31">
         </a>
-        <a href="https://elke.cafe" target="_blank">
+        <a href="https://elke.cafe">
             <img src="/img/buttons/elke.gif" alt="elke web button" width="88" height="31">
         </a>
-        <a href="https://invoxiplaygames.uk/" target="_blank">
+        <a href="https://invoxiplaygames.uk/">
             <img src="/img/buttons/ipg.png" alt="InvoxiPlayGames web button" width="88" height="31">
         </a>
-        <a href="https://ioletsgo.gay" target="_blank">
+        <a href="https://ioletsgo.gay">
             <img src="/img/buttons/ioletsgo.gif" alt="ioletsgo web button" width="88" height="31">
         </a>
-        <a href="https://notnite.com/" target="_blank">
+        <a href="https://notnite.com/">
             <img src="/img/buttons/notnite.png" alt="notnite web button" width="88" height="31">
         </a>
-        <a href="https://www.da.vidbuchanan.co.uk/" target="_blank">
+        <a href="https://www.da.vidbuchanan.co.uk/">
             <img src="/img/buttons/retr0id_now.gif" alt="retr0id web button" width="88" height="31">
         </a>
-        <a href="https://aikoyori.xyz" target="_blank">
+        <a href="https://aikoyori.xyz">
             <img src="/img/buttons/aikoyori.gif" alt="aikoyori web button" width="88" height="31">
         </a>
-        <a href="https://xenia.blahaj.land/" target="_blank">
+        <a href="https://xenia.blahaj.land/">
             <img src="/img/buttons/xenia.png" alt="xenia web button" width="88" height="31">
         </a>
-        <a href="https://stardust.elysium.gay/" target="_blank">
+        <a href="https://stardust.elysium.gay/">
             <img src="/img/buttons/stardust.png" alt="stardust web button" width="88" height="31">
         </a>
-        <a href="https://isabelroses.com/" target="_blank">
+        <a href="https://isabelroses.com/">
             <img src="/img/buttons/isabelroses.gif" alt="isabel roses web button" width="88" height="31">
         </a>
 
@@ -205,16 +259,16 @@
         <img src="/img/buttons/misc/sprunk.gif" alt="sprunk" width="88" height="31">
         <img src="/img/buttons/misc/tohell.gif" alt="go straight to hell" width="88" height="31">
         <img src="/img/buttons/misc/virusalert.gif" alt="virus alert! click here" onclick="alert('meow :3')" width="88" height="31">
-        <a href="http://wiishopchannel.net/" target="_blank">
+        <a href="http://wiishopchannel.net/">
             <img src="/img/buttons/misc/wii.gif" alt="wii" width="88" height="31">
         </a>
         <img src="/img/buttons/misc/www2.gif" alt="www" width="88" height="31">
         <img src="/img/buttons/misc/iemandatory.gif" alt="get mandatory internet explorer" width="88" height="31">
         <img src="/img/buttons/misc/learn_html.gif" alt="HTML - learn it today!" width="88" height="31">
-        <a href="https://smokepowered.com" target="_blank">
+        <a href="https://smokepowered.com">
             <img src="/img/buttons/misc/smokepowered.gif" alt="high on SMOKE" width="88" height="31">
         </a>
-        <a href="https://epicblazed.com" target="_blank">
+        <a href="https://epicblazed.com">
             <img src="/img/buttons/misc/epicblazed.png" alt="epic blazed" width="88" height="31">
         </a>
         <img src="/img/buttons/misc/blink.gif" alt="closeup anime blink" width="88" height="31">

From f7b3faf8e89b240ca1e65eb698734039fcae9ce3 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Mon, 16 Jun 2025 22:41:54 +0100
Subject: [PATCH 5/8] move source link from header to footer

---
 public/style/header.css | 5 ++---
 views/footer.html       | 7 ++++++-
 views/header.html       | 3 ---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/style/header.css b/public/style/header.css
index 531649a..f399d4d 100644
--- a/public/style/header.css
+++ b/public/style/header.css
@@ -25,7 +25,6 @@ nav {
     flex-grow: 1;
     display: flex;
     gap: .5em;
-    cursor: pointer;
 }
 
 img#header-icon {
@@ -36,19 +35,19 @@ img#header-icon {
 }
 
 #header-text {
-    width: 11em;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    flex-grow: 1;
 }
 
 #header-text h1 {
+    width: fit-content;
     margin: 0;
     font-size: 1em;
 }
 
 #header-text h2 {
+    width: fit-content;
     height: 1.2em;
     line-height: 1.2em;
     margin: 0;
diff --git a/views/footer.html b/views/footer.html
index 217c4b5..eccf125 100644
--- a/views/footer.html
+++ b/views/footer.html
@@ -2,7 +2,12 @@
 
 <footer>
   <div id="footer">
-    <small><em>*made with <span aria-label="love">♥</span> by ari, 2025*</em></small>
+      <small>
+          <em>
+              *made with <span aria-label="love">♥</span> by ari, 2025*
+              <a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
+          </em>
+      </small>
   </div>
 </footer>
 
diff --git a/views/header.html b/views/header.html
index 291b8ac..03a8384 100644
--- a/views/header.html
+++ b/views/header.html
@@ -23,9 +23,6 @@
             <li>
                 <a href="/music" preload="mouseover">music</a>
             </li>
-            <li>
-                <a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
-            </li>
             <li>
                 <!-- coming later! -->
                 <span title="coming later!">blog</span>

From 9274796729a56290d788106e0ed5327643103e4a Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Tue, 17 Jun 2025 01:15:08 +0100
Subject: [PATCH 6/8] early implementation of ari melody LIVE tracker

---
 controller/config.go     |  4 ++
 controller/twitch.go     | 97 ++++++++++++++++++++++++++++++++++++++++
 main.go                  | 47 ++++---------------
 model/appstate.go        |  8 ++++
 model/twitch.go          | 43 ++++++++++++++++++
 public/style/colours.css |  1 +
 public/style/index.css   | 81 +++++++++++++++++++++++++++++++++
 view/index.go            | 45 +++++++++++++++++++
 view/static.go           | 31 +++++++++++++
 views/index.html         | 17 +++++++
 10 files changed, 335 insertions(+), 39 deletions(-)
 create mode 100644 controller/twitch.go
 create mode 100644 model/twitch.go
 create mode 100644 view/index.go
 create mode 100644 view/static.go

diff --git a/controller/config.go b/controller/config.go
index 1d3cbbb..fdfa756 100644
--- a/controller/config.go
+++ b/controller/config.go
@@ -77,5 +77,9 @@ func handleConfigOverrides(config *model.Config) error {
     if env, has := os.LookupEnv("ARIMELODY_DISCORD_CLIENT_ID"); has { config.Discord.ClientID = env }
     if env, has := os.LookupEnv("ARIMELODY_DISCORD_SECRET"); has { config.Discord.Secret = env }
 
+    if env, has := os.LookupEnv("ARIMELODY_TWITCH_BROADCASTER"); has { config.Twitch.Broadcaster = env }
+    if env, has := os.LookupEnv("ARIMELODY_TWITCH_CLIENT_ID"); has { config.Twitch.ClientID = env }
+    if env, has := os.LookupEnv("ARIMELODY_TWITCH_SECRET"); has { config.Twitch.Secret = env }
+
     return nil
 }
diff --git a/controller/twitch.go b/controller/twitch.go
new file mode 100644
index 0000000..f7dc509
--- /dev/null
+++ b/controller/twitch.go
@@ -0,0 +1,97 @@
+package controller
+
+import (
+	"arimelody-web/model"
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/url"
+	"time"
+)
+
+const TWITCH_API_BASE = "https://api.twitch.tv/helix/"
+
+func TwitchSetup(app *model.AppState) error {
+    app.Twitch = &model.TwitchState{}
+    err := RefreshTwitchToken(app)
+    return err
+}
+
+func RefreshTwitchToken(app *model.AppState) error {
+    if app.Twitch != nil && app.Twitch.Token != nil && time.Now().UTC().After(app.Twitch.Token.ExpiresAt) {
+        return nil
+    }
+
+    requestUrl, _ := url.Parse("https://id.twitch.tv/oauth2/token")
+    req, _ := http.NewRequest(http.MethodPost, requestUrl.String(), bytes.NewBuffer([]byte(url.Values{
+        "client_id": []string{ app.Config.Twitch.ClientID },
+        "client_secret": []string{ app.Config.Twitch.Secret },
+        "grant_type": []string{ "client_credentials" },
+    }.Encode())))
+
+    res, err := http.DefaultClient.Do(req)
+    if err != nil {
+        return err
+    }
+
+    type TwitchOAuthToken struct {
+        AccessToken string `json:"access_token"`
+        ExpiresIn int `json:"expires_in"`
+        TokenType string `json:"token_type"`
+    }
+    oauthResponse := TwitchOAuthToken{}
+    err = json.NewDecoder(res.Body).Decode(&oauthResponse)
+    if err != nil {
+        return err
+    }
+
+    app.Twitch.Token = &model.TwitchOAuthToken{
+        AccessToken: oauthResponse.AccessToken,
+        ExpiresAt: time.Now().UTC().Add(time.Second * time.Duration(oauthResponse.ExpiresIn)).UTC(),
+        TokenType: oauthResponse.TokenType,
+    }
+
+    return nil
+}
+
+var lastStreamState *model.TwitchStreamInfo
+var lastStreamStateAt time.Time
+
+func GetTwitchStatus(app *model.AppState, broadcaster string) (*model.TwitchStreamInfo, error) {
+    if lastStreamState != nil && time.Now().UTC().Before(lastStreamStateAt.Add(time.Minute)) {
+        return lastStreamState, nil
+    }
+
+    fmt.Print("MAKING COSTLY REQUEST TO TWITCH.TV API...\n")
+
+    requestUrl, _ := url.Parse(TWITCH_API_BASE + "streams")
+    requestUrl.RawQuery = url.Values{
+        "user_login": []string{ broadcaster },
+    }.Encode()
+    req, _ := http.NewRequest(http.MethodGet, requestUrl.String(), nil)
+    req.Header.Set("Client-Id", app.Config.Twitch.ClientID)
+    req.Header.Set("Authorization", "Bearer " + app.Twitch.Token.AccessToken)
+
+    res, err := http.DefaultClient.Do(req)
+    if err != nil {
+        return nil, err
+    }
+
+    type StreamsResponse struct {
+        Data []model.TwitchStreamInfo `json:"data"`
+    }
+    streamInfo := StreamsResponse{}
+    err = json.NewDecoder(res.Body).Decode(&streamInfo)
+    if err != nil {
+        return nil, err
+    }
+
+    if len(streamInfo.Data) == 0 {
+        return nil, nil
+    }
+
+    lastStreamState = &streamInfo.Data[0]
+    lastStreamStateAt = time.Now().UTC()
+    return lastStreamState, nil
+}
diff --git a/main.go b/main.go
index 29539ac..8f37639 100644
--- a/main.go
+++ b/main.go
@@ -22,7 +22,6 @@ import (
     "arimelody-web/cursor"
     "arimelody-web/log"
     "arimelody-web/model"
-    "arimelody-web/templates"
     "arimelody-web/view"
 
     "github.com/jmoiron/sqlx"
@@ -40,6 +39,7 @@ func main() {
 
     app := model.AppState{
         Config: controller.GetConfig(),
+        Twitch: nil,
     }
 
     // initialise database connection
@@ -460,6 +460,11 @@ func main() {
     // handle DB migrations
     controller.CheckDBVersionAndMigrate(app.DB)
 
+    err = controller.TwitchSetup(&app)
+    if err != nil {
+        fmt.Fprintf(os.Stderr, "WARN: Failed to set up Twitch integration: %v\n", err)
+    }
+
     // initial invite code
     accountsCount := 0
     err = app.DB.Get(&accountsCount, "SELECT count(*) FROM account")
@@ -511,49 +516,13 @@ func createServeMux(app *model.AppState) *http.ServeMux {
     mux.Handle("/admin/", http.StripPrefix("/admin", admin.Handler(app)))
     mux.Handle("/api/", http.StripPrefix("/api", api.Handler(app)))
     mux.Handle("/music/", http.StripPrefix("/music", view.MusicHandler(app)))
-    mux.Handle("/uploads/", http.StripPrefix("/uploads", staticHandler(filepath.Join(app.Config.DataDirectory, "uploads"))))
+    mux.Handle("/uploads/", http.StripPrefix("/uploads", view.StaticHandler(filepath.Join(app.Config.DataDirectory, "uploads"))))
     mux.Handle("/cursor-ws", cursor.Handler(app))
-    mux.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        if r.Method == http.MethodHead {
-            w.WriteHeader(http.StatusOK)
-            return
-        }
-
-        if r.URL.Path == "/" || r.URL.Path == "/index.html" {
-            err := templates.IndexTemplate.Execute(w, nil)
-            if err != nil {
-                http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
-            }
-            return
-        }
-        staticHandler("public").ServeHTTP(w, r)
-    }))
+    mux.Handle("/", view.IndexHandler(app))
 
     return mux
 }
 
-func staticHandler(directory string) http.Handler {
-    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-        info, err := os.Stat(filepath.Join(directory, filepath.Clean(r.URL.Path)))
-
-        // does the file exist?
-        if err != nil {
-            if errors.Is(err, os.ErrNotExist) {
-                http.NotFound(w, r)
-                return
-            }
-        }
-
-        // is thjs a directory? (forbidden)
-        if info.IsDir() {
-            http.NotFound(w, r)
-            return
-        }
-
-        http.FileServer(http.Dir(directory)).ServeHTTP(w, r)
-    })
-}
-
 var PoweredByStrings = []string{
     "nerd rage",
     "estrogen",
diff --git a/model/appstate.go b/model/appstate.go
index a910a29..861a991 100644
--- a/model/appstate.go
+++ b/model/appstate.go
@@ -21,6 +21,12 @@ type (
         Secret string `toml:"secret"`
     }
 
+    TwitchConfig struct {
+        Broadcaster string `toml:"broadcaster"`
+        ClientID string `toml:"client_id"`
+        Secret string `toml:"secret"`
+    }
+
     Config struct {
         BaseUrl string `toml:"base_url" comment:"Used for OAuth redirects."`
         Host string `toml:"host"`
@@ -29,11 +35,13 @@ type (
         TrustedProxies []string `toml:"trusted_proxies"`
         DB DBConfig `toml:"db"`
         Discord DiscordConfig `toml:"discord"`
+        Twitch TwitchConfig `toml:"twitch"`
     }
 
     AppState struct {
         DB *sqlx.DB
         Config Config
         Log log.Logger
+        Twitch *TwitchState
     }
 )
diff --git a/model/twitch.go b/model/twitch.go
new file mode 100644
index 0000000..6bca17d
--- /dev/null
+++ b/model/twitch.go
@@ -0,0 +1,43 @@
+package model
+
+import (
+	"fmt"
+	"strings"
+	"time"
+)
+
+type (
+    TwitchOAuthToken struct {
+        AccessToken string
+        ExpiresAt time.Time
+        TokenType string
+    }
+
+    TwitchState struct {
+        Token *TwitchOAuthToken
+    }
+
+    TwitchStreamInfo struct {
+        ID string `json:"id"`
+        UserID string `json:"user_id"`
+        UserLogin string `json:"user_login"`
+        UserName string `json:"user_name"`
+        GameID string `json:"game_id"`
+        GameName string `json:"game_name"`
+        Type string `json:"type"`
+        Title string `json:"title"`
+        ViewerCount int `json:"viewer_count"`
+        StartedAt string `json:"started_at"`
+        Language string `json:"language"`
+        ThumbnailURL string `json:"thumbnail_url"`
+        TagIDs []string `json:"tag_ids"`
+        Tags []string `json:"tags"`
+        IsMature bool `json:"is_mature"`
+    }
+)
+
+func (info *TwitchStreamInfo) Thumbnail(width int, height int) string {
+    res := strings.Replace(info.ThumbnailURL, "{width}", fmt.Sprintf("%d", width), 1)
+    res = strings.Replace(res, "{height}", fmt.Sprintf("%d", height), 1)
+    return res
+}
diff --git a/public/style/colours.css b/public/style/colours.css
index 2bf607d..de63198 100644
--- a/public/style/colours.css
+++ b/public/style/colours.css
@@ -6,6 +6,7 @@
     --secondary: #f8e05b;
     --tertiary: #f788fe;
     --links: #5eb2ff;
+    --live: #fd3737;
 }
 
 @media (prefers-color-scheme: light) {
diff --git a/public/style/index.css b/public/style/index.css
index 6edb362..f60fdb7 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -222,3 +222,84 @@ div#web-buttons {
     transform: translate(-2px, -2px);
     box-shadow: 1px 1px 0 #eee, 2px 2px 0 #eee;
 }
+
+#live-banner {
+    margin: 1em 0 2em 0;
+    padding: 1em;
+    border-radius: 4px;
+    border: 1px solid var(--primary);
+    box-shadow: 0 0 8px var(--primary);
+}
+
+#live-banner h2 {
+    margin: 0 0 .4em 0;
+    color: var(--on-background);
+}
+
+#live-banner p {
+    margin: 0;
+}
+
+.live-highlight {
+    color: var(--primary);
+}
+
+.live-preview {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1em;
+}
+
+.live-preview div:first-of-type {
+    text-align: center;
+}
+
+.live-thumbnail {
+    border-radius: 4px;
+}
+
+.live-button {
+    margin: .2em;
+    padding: .4em .5em;
+    display: inline-block;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+    border-radius: 4px;
+    transition: color .1s linear, background-color .1s linear, box-shadow .1s linear;
+}
+
+.live-button:hover {
+    color: var(--background);
+    background-color: var(--primary);
+    box-shadow: 0 0 8px var(--primary);
+    text-decoration: none;
+}
+
+.live-info {
+    display: flex;
+    flex-direction: column;
+    gap: .3em;
+    overflow-x: hidden;
+}
+
+.live-game {
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+}
+
+.live-game .live-game-prefix {
+    opacity: .8;
+}
+
+.live-title {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.live-viewers {
+    opacity: .5;
+}
diff --git a/view/index.go b/view/index.go
new file mode 100644
index 0000000..995de44
--- /dev/null
+++ b/view/index.go
@@ -0,0 +1,45 @@
+package view
+
+import (
+	"arimelody-web/controller"
+	"arimelody-web/model"
+	"arimelody-web/templates"
+	"fmt"
+	"net/http"
+	"os"
+)
+
+func IndexHandler(app *model.AppState) http.Handler {
+    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+        if r.Method == http.MethodHead {
+            w.WriteHeader(http.StatusOK)
+            return
+        }
+
+        type IndexData struct {
+            TwitchStatus *model.TwitchStreamInfo
+        }
+
+        var err error
+        var twitchStatus *model.TwitchStreamInfo = nil
+        if len(app.Config.Twitch.Broadcaster) > 0 {
+            twitchStatus, err = controller.GetTwitchStatus(app, app.Config.Twitch.Broadcaster)
+            if err != nil {
+                fmt.Fprintf(os.Stderr, "WARN: Failed to get Twitch status for %s: %v\n", app.Config.Twitch.Broadcaster, err)
+            }
+        }
+
+        if r.URL.Path == "/" || r.URL.Path == "/index.html" {
+            err := templates.IndexTemplate.Execute(w, IndexData{
+                TwitchStatus: twitchStatus,
+            })
+            if err != nil {
+                fmt.Fprintf(os.Stderr, "WARN: Failed to render index page: %v\n", err)
+                http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
+            }
+            return
+        }
+
+        StaticHandler("public").ServeHTTP(w, r)
+    })
+}
diff --git a/view/static.go b/view/static.go
new file mode 100644
index 0000000..52263a2
--- /dev/null
+++ b/view/static.go
@@ -0,0 +1,31 @@
+package view
+
+import (
+	"errors"
+	"net/http"
+	"os"
+	"path/filepath"
+)
+
+func StaticHandler(directory string) http.Handler {
+    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+        info, err := os.Stat(filepath.Join(directory, filepath.Clean(r.URL.Path)))
+
+        // does the file exist?
+        if err != nil {
+            if errors.Is(err, os.ErrNotExist) {
+                http.NotFound(w, r)
+                return
+            }
+        }
+
+        // is thjs a directory? (forbidden)
+        if info.IsDir() {
+            http.NotFound(w, r)
+            return
+        }
+
+        http.FileServer(http.Dir(directory)).ServeHTTP(w, r)
+    })
+}
+
diff --git a/views/index.html b/views/index.html
index f639c55..98a862c 100644
--- a/views/index.html
+++ b/views/index.html
@@ -22,6 +22,23 @@
 
 {{define "content"}}
 <main>
+    {{if .TwitchStatus}}
+    <div id="live-banner">
+        <h2>ari is <span class="live-highlight">LIVE</span> right now!</h2>
+        <div class="live-preview">
+            <div>
+                <img src="{{.TwitchStatus.Thumbnail 144 81}}" alt="livestream thumbnail" class="live-thumbnail">
+                <a href="https://twitch.tv/{{.TwitchStatus.UserName}}" class="live-button">join in!</a>
+            </div>
+            <div class="live-info">
+                <p class="live-game"><span class="live-game-prefix">streaming:</span> {{.TwitchStatus.GameName}}</p>
+                <p class="live-title">{{.TwitchStatus.Title}}</p>
+                <p class="live-viewers">{{.TwitchStatus.ViewerCount}} viewers</p>
+            </div>
+        </div>
+    </div>
+    {{end}}
+    
     <h1 class="typeout">
         # hello, world!
     </h1>

From 581273370de2029c8258564ab2a180eea93f0a0d Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Tue, 17 Jun 2025 02:01:06 +0100
Subject: [PATCH 7/8] improvements to LIVE tracker

---
 controller/twitch.go   |  3 ---
 main.go                |  8 +++++---
 model/appstate.go      |  4 ++--
 public/style/index.css | 41 +++++++++++++++++++++++++++++++++++------
 public/style/main.css  |  1 +
 view/index.go          |  2 +-
 views/index.html       |  2 +-
 7 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/controller/twitch.go b/controller/twitch.go
index f7dc509..98d3b9a 100644
--- a/controller/twitch.go
+++ b/controller/twitch.go
@@ -4,7 +4,6 @@ import (
 	"arimelody-web/model"
 	"bytes"
 	"encoding/json"
-	"fmt"
 	"net/http"
 	"net/url"
 	"time"
@@ -63,8 +62,6 @@ func GetTwitchStatus(app *model.AppState, broadcaster string) (*model.TwitchStre
         return lastStreamState, nil
     }
 
-    fmt.Print("MAKING COSTLY REQUEST TO TWITCH.TV API...\n")
-
     requestUrl, _ := url.Parse(TWITCH_API_BASE + "streams")
     requestUrl.RawQuery = url.Values{
         "user_login": []string{ broadcaster },
diff --git a/main.go b/main.go
index 8f37639..0234d79 100644
--- a/main.go
+++ b/main.go
@@ -460,9 +460,11 @@ func main() {
     // handle DB migrations
     controller.CheckDBVersionAndMigrate(app.DB)
 
-    err = controller.TwitchSetup(&app)
-    if err != nil {
-        fmt.Fprintf(os.Stderr, "WARN: Failed to set up Twitch integration: %v\n", err)
+    if app.Config.Twitch != nil {
+        err = controller.TwitchSetup(&app)
+        if err != nil {
+            fmt.Fprintf(os.Stderr, "WARN: Failed to set up Twitch integration: %v\n", err)
+        }
     }
 
     // initial invite code
diff --git a/model/appstate.go b/model/appstate.go
index 861a991..3a1c230 100644
--- a/model/appstate.go
+++ b/model/appstate.go
@@ -34,8 +34,8 @@ type (
         DataDirectory string `toml:"data_dir"`
         TrustedProxies []string `toml:"trusted_proxies"`
         DB DBConfig `toml:"db"`
-        Discord DiscordConfig `toml:"discord"`
-        Twitch TwitchConfig `toml:"twitch"`
+        Discord *DiscordConfig `toml:"discord"`
+        Twitch *TwitchConfig `toml:"twitch"`
     }
 
     AppState struct {
diff --git a/public/style/index.css b/public/style/index.css
index f60fdb7..6efe241 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -231,11 +231,6 @@ div#web-buttons {
     box-shadow: 0 0 8px var(--primary);
 }
 
-#live-banner h2 {
-    margin: 0 0 .4em 0;
-    color: var(--on-background);
-}
-
 #live-banner p {
     margin: 0;
 }
@@ -252,7 +247,11 @@ div#web-buttons {
 }
 
 .live-preview div:first-of-type {
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: .3em;
 }
 
 .live-thumbnail {
@@ -283,6 +282,36 @@ div#web-buttons {
     overflow-x: hidden;
 }
 
+#live-banner h2 {
+    margin: 0;
+    color: var(--on-background);
+    font-family: 'Inter', sans-serif;
+    font-weight: 800;
+    font-style: italic;
+}
+
+.live-pinger {
+    width: .5em;
+    height: .5em;
+    margin: .1em .2em;
+    display: inline-block;
+    border-radius: 100%;
+    background-color: var(--primary);
+    box-shadow: 0 0 4px var(--primary);
+    animation: live-pinger-pulse 1s infinite alternate ease-in-out;
+}
+
+@keyframes live-pinger-pulse {
+    from {
+        opacity: .8;
+        transform: scale(1.0);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+}
+
 .live-game {
     overflow: hidden;
     text-wrap: nowrap;
diff --git a/public/style/main.css b/public/style/main.css
index 4e9e113..680ee2b 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -3,6 +3,7 @@
 @import url("/style/footer.css");
 @import url("/style/prideflag.css");
 @import url("/style/cursor.css");
+@import url("/font/inter/inter.css");
 
 @font-face {
     font-family: "Monaspace Argon";
diff --git a/view/index.go b/view/index.go
index 995de44..b6e3891 100644
--- a/view/index.go
+++ b/view/index.go
@@ -22,7 +22,7 @@ func IndexHandler(app *model.AppState) http.Handler {
 
         var err error
         var twitchStatus *model.TwitchStreamInfo = nil
-        if len(app.Config.Twitch.Broadcaster) > 0 {
+        if app.Twitch != nil && len(app.Config.Twitch.Broadcaster) > 0 {
             twitchStatus, err = controller.GetTwitchStatus(app, app.Config.Twitch.Broadcaster)
             if err != nil {
                 fmt.Fprintf(os.Stderr, "WARN: Failed to get Twitch status for %s: %v\n", app.Config.Twitch.Broadcaster, err)
diff --git a/views/index.html b/views/index.html
index 98a862c..6985f6c 100644
--- a/views/index.html
+++ b/views/index.html
@@ -24,13 +24,13 @@
 <main>
     {{if .TwitchStatus}}
     <div id="live-banner">
-        <h2>ari is <span class="live-highlight">LIVE</span> right now!</h2>
         <div class="live-preview">
             <div>
                 <img src="{{.TwitchStatus.Thumbnail 144 81}}" alt="livestream thumbnail" class="live-thumbnail">
                 <a href="https://twitch.tv/{{.TwitchStatus.UserName}}" class="live-button">join in!</a>
             </div>
             <div class="live-info">
+                <h2>ari melody <span class="live-highlight">LIVE</span> <i class="live-pinger"></i></h2>
                 <p class="live-game"><span class="live-game-prefix">streaming:</span> {{.TwitchStatus.GameName}}</p>
                 <p class="live-title">{{.TwitchStatus.Title}}</p>
                 <p class="live-viewers">{{.TwitchStatus.ViewerCount}} viewers</p>

From 375ae84ae33d352421dffcfbe44bbbdff32a3b11 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Sun, 22 Jun 2025 18:00:08 +0100
Subject: [PATCH 8/8] update some arimelody.me references to .space

---
 views/index.html | 30 ++++--------------------------
 1 file changed, 4 insertions(+), 26 deletions(-)

diff --git a/views/index.html b/views/index.html
index 6985f6c..37bd2a3 100644
--- a/views/index.html
+++ b/views/index.html
@@ -6,8 +6,8 @@
 
 <meta property="og:title" content="ari melody">
 <meta property="og:type" content="website">
-<meta property="og:url" content="www.arimelody.me">
-<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
+<meta property="og:url" content="www.arimelody.space">
+<meta property="og:image" content="https://www.arimelody.space/img/favicon.png">
 <meta property="og:site_name" content="ari melody">
 <meta property="og:description" content="home to your local SPACEGIRL 💫">
 
@@ -101,28 +101,6 @@
     <p>
     <strong>where to find me 🛰️</strong>
     </p>
-    <!--
-    <ul class="links">
-        <li>
-            <a href="https://youtube.com/@arispacegirl">youtube</a>
-        </li>
-        <li>
-            <a href="https://twitch.tv/arispacegirl">twitch</a>
-        </li>
-        <li>
-            <a href="https://arimelody.bandcamp.com">bandcamp</a>
-        </li>
-        <li>
-            <a href="https://codeberg.org/arimelody">codeberg</a>
-        </li>
-        <li>
-            <a href="https://bsky.app/profile/arimelody.me">bluesky</a>
-        </li>
-        <li>
-            <a href="https://discord.gg/MmJtBebF28">discord</a>
-        </li>
-    </ul>
-    -->
     <ul class="platform-links">
         <li>
             <a href="https://youtube.com/@arispacegirl" title="youtube">
@@ -149,7 +127,7 @@
             </a>
         </li>
         <li>
-            <a href="https://bsky.app/profile/arimelody.me" title="bluesky">
+            <a href="https://bsky.app/profile/arimelody.space" title="bluesky">
                 <img src="/img/brand/bluesky.svg" alt="bluesky" width="32" height="32"/>
                 bluesky
             </a>
@@ -181,7 +159,7 @@
             </div>
         </li>
         <li class="project-item">
-            <img src="https://git.arimelody.me/repo-avatars/6b0a1ffb78cbc6f906f83152ea42a710220174e8f48a3e44f159ae58dacd7a2f" alt="catdance icon" aria-hidden=true class="project-icon" width="64" height="64">
+            <img src="https://git.arimelody.me/repo-avatars/6b0a1ffb78cbc6f906f83152ea42a710220174e8f48a3e44f159ae58dacd7a2f" alt="pride flag icon" aria-hidden=true class="project-icon" width="64" height="64">
             <div class="project-info">
                 <a href="https://git.arimelody.me/ari/prideflag">pride flag</a>
                 <p>progressive pride flag widget for websites</p>