From 69e2e22e47c452151ba686ed6528b10a145b3227 Mon Sep 17 00:00:00 2001 From: ari melody Date: Mon, 16 Jun 2025 20:32:46 +0100 Subject: [PATCH] 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 @@ + + + + + + + + + + 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 @@ + + + + + + + + + + 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 @@ + + + Codeberg logo + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + Codeberg logo + + + + Robert Martinez + + + + + Codeberg and the Codeberg Logo are trademarks of Codeberg e.V. + + + 2020-04-09 + + + Codeberg e.V. + + + codeberg.org + + + + + + + + + + + + + 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 @@ + \ 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 @@ + + + + +Asset 2 + + + + + + + + + + + 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 @@ + + + + + + + + + + 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 @@ - + {{end}} {{define "content"}} @@ -33,7 +33,7 @@

- i'm a musician, developer, + i'm a musician, developer, streamer, youtuber, and probably a bunch of other things i forgot to mention!

@@ -44,7 +44,7 @@

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 - bandcamp + bandcamp so you can at least get something for your money. thank you very much either way!! 💕

@@ -84,65 +84,119 @@

where to find me 🛰️

+ +

projects i've worked on 🛠️

-