From d0a76be0715283724c4f0c256f4ae0d4ddf41177 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 13 Jun 2026 20:32:38 +0000 Subject: [PATCH 1/5] Footer icons, readable hero in dark mode, round particles, coffee motif MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace the external Font Awesome kit with inline brand SVGs (self-hosted, reliable, accessible) for the footer social links; fix broken Instagram URL - Hero/404 headline: brighter per-theme gradient so every word is legible on the dark background (the old pride gradient's blue/teal stops were too dark); add -webkit-text-fill-color with a solid fallback - Round the three.js hero particles via a soft circular sprite (were squares) - Add the missing coffee motif: steaming cup in the header brand and footer, a warm coffee accent colour, and a 'brewed with coffee' footer line - New draft post: 'Diagnosed, Let Go, and Finding the Volume Knob' (diagnoses, leaving a job that wasn't a fit, landing at Loop) — draft: true Verified with Hugo 0.163.1 + Dart Sass 1.83.4: clean build, 0 axe violations (light + dark), icons/coffee/particles confirmed in a headless browser. --- assets/js/app.js | 24 +++++++- assets/scss/main.scss | 48 +++++++++++++--- config.yaml | 2 +- ...osed-let-go-and-finding-the-volume-knob.md | 56 +++++++++++++++++++ layouts/partials/coffee-cup.html | 10 ++++ layouts/partials/footer.html | 11 ++-- layouts/partials/header.html | 1 + layouts/partials/social-icon.html | 14 +++++ 8 files changed, 149 insertions(+), 17 deletions(-) create mode 100644 content/posts/2026-06-13-diagnosed-let-go-and-finding-the-volume-knob.md create mode 100644 layouts/partials/coffee-cup.html create mode 100644 layouts/partials/social-icon.html diff --git a/assets/js/app.js b/assets/js/app.js index b576bdb..536fa4e 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -53,6 +53,25 @@ /* ---------- three.js hero ---------- */ var hero = { renderer: null, raf: null, running: false }; + // A soft circular sprite so the particles render as round dots, not squares. + var _sprite = null; + function makeRoundSprite() { + if (_sprite) return _sprite; + var c = document.createElement("canvas"); + c.width = c.height = 64; + var g = c.getContext("2d"); + var grd = g.createRadialGradient(32, 32, 0, 32, 32, 32); + grd.addColorStop(0, "rgba(255,255,255,1)"); + grd.addColorStop(0.45, "rgba(255,255,255,0.85)"); + grd.addColorStop(1, "rgba(255,255,255,0)"); + g.fillStyle = grd; + g.beginPath(); + g.arc(32, 32, 32, 0, Math.PI * 2); + g.fill(); + _sprite = new THREE.CanvasTexture(c); + return _sprite; + } + function startHero() { var canvas = document.getElementById("hero-canvas"); if (!canvas || typeof THREE === "undefined" || hero.running) return; @@ -90,8 +109,9 @@ geo.setAttribute("position", new THREE.BufferAttribute(positions, 3)); geo.setAttribute("color", new THREE.BufferAttribute(colors, 3)); var mat = new THREE.PointsMaterial({ - size: 0.16, vertexColors: true, transparent: true, opacity: 0.85, - depthWrite: false, blending: THREE.AdditiveBlending + size: 0.22, vertexColors: true, transparent: true, opacity: 0.9, + depthWrite: false, blending: THREE.AdditiveBlending, + map: makeRoundSprite(), alphaTest: 0.02 }); var points = new THREE.Points(geo, mat); scene.add(points); diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 034a633..6631ca0 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -16,7 +16,10 @@ --accent: #ffd166; /* neurodiversity gold — focus + highlights */ --accent-ink: #1a1430; /* text on accent */ --shadow: 0 14px 40px rgba(0, 0, 0, 0.45); + --coffee: #d8a47f; /* warm latte — the "and Coffee" nod */ --pride: linear-gradient(90deg, #e63946, #f4a261, #2a9d8f, #457b9d, #9d4edd); + /* Brighter pride stops so every word stays legible on the dark background. */ + --hero-gradient: linear-gradient(90deg, #ff8fa3, #ffd166, #6ee7d2, #8ecae6, #d0b3ff); color-scheme: dark; } @@ -33,6 +36,9 @@ --accent: #b8860b; /* darker gold for contrast on light */ --accent-ink: #1c1633; /* dark text on gold — AA on light theme */ --shadow: 0 14px 40px rgba(40, 30, 80, 0.14); + --coffee: #8a4b2f; /* deeper roast for contrast on cream */ + /* Deeper, saturated stops that stay readable on the cream background. */ + --hero-gradient: linear-gradient(90deg, #d62839, #c25e00, #1a7f6b, #2a6f97, #7b2fd4); color-scheme: light; } @@ -175,12 +181,15 @@ img { max-width: 100%; height: auto; display: block; } .hero__title { font-size: clamp(2.1rem, calc(1.3rem + 3.6vw), 4rem); margin: 0 0 1.2rem; - background: var(--pride); - -webkit-background-clip: text; background-clip: text; color: transparent; + background: var(--hero-gradient); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: var(--text); /* fallback colour if clip is unsupported */ } -/* Keep a solid fallback so the headline is always legible if clip is unsupported. */ -@supports not (background-clip: text) { - .hero__title { color: var(--text); background: none; } +/* If neither prefixed nor unprefixed clip is supported, show solid readable text. */ +@supports not ((-webkit-background-clip: text) or (background-clip: text)) { + .hero__title { -webkit-text-fill-color: var(--text); background: none; } } .hero__lede { font-size: 1.15rem; color: var(--text-muted); margin: 0 auto 2rem; max-width: 40rem; } .hero__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; } @@ -311,7 +320,7 @@ img { max-width: 100%; height: auto; display: block; } .page-head__desc { color: var(--text-muted); margin: 0; } .notfound { text-align: center; } -.notfound__code { font-size: clamp(4rem, 10vw, 8rem); margin: 0; background: var(--pride); -webkit-background-clip: text; background-clip: text; color: transparent; } +.notfound__code { font-size: clamp(4rem, 10vw, 8rem); margin: 0; background: var(--hero-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text); } .notfound__msg { color: var(--text-muted); font-size: 1.2rem; margin: 0 0 1.5rem; } /* ========================================================================= @@ -319,18 +328,39 @@ img { max-width: 100%; height: auto; display: block; } ========================================================================= */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-elev); margin-top: 3rem; } .site-footer__inner { max-width: $maxw; margin-inline: auto; padding: 2.5rem 1.25rem; display: grid; gap: 1.2rem; } -.site-footer__title { font-family: $font-display; font-size: 1.3rem; margin: 0; } +.site-footer__title { font-family: $font-display; font-size: 1.3rem; margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; } +.site-footer__coffee { color: var(--coffee); display: inline-flex; } .site-footer__bio { color: var(--text-muted); margin: 0.4rem 0 0; max-width: 40rem; } .social__list { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; flex-wrap: wrap; } .social__link { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; - color: var(--text); font-size: 1.1rem; + color: var(--text); transition: color 0.2s $ease, border-color 0.2s $ease, transform 0.2s $ease; } -.social__link:hover { color: var(--link); border-color: var(--link); } +.social__link:hover { color: var(--link); border-color: var(--link); transform: translateY(-2px); } +.social__icon { width: 1.2rem; height: 1.2rem; display: block; } .site-footer__copyright { color: var(--text-muted); font-size: 0.9rem; margin: 0; } .site-footer__copyright a { color: var(--link); } +.site-footer__brewed { color: var(--text-muted); font-size: 0.82rem; margin: 0; opacity: 0.85; font-style: italic; } + +/* ========================================================================= + Coffee cup (the "and Coffee" motif) — header brand + footer + ========================================================================= */ +.coffee-cup { display: block; } +.coffee-cup__steam { opacity: 0.75; } +.brand__coffee { color: var(--coffee); display: inline-flex; } +.brand__coffee .coffee-cup { width: 22px; height: 22px; } +@media (prefers-reduced-motion: no-preference) { + [data-motion="on"] .coffee-cup__steam { + animation: coffee-steam 3.2s ease-in-out infinite; + transform-origin: center; + } +} +@keyframes coffee-steam { + 0%, 100% { opacity: 0.35; transform: translateY(0); } + 50% { opacity: 0.85; transform: translateY(-1px); } +} /* ========================================================================= Author aside (siteinfo) diff --git a/config.yaml b/config.yaml index 685cb30..8b0dcd7 100644 --- a/config.yaml +++ b/config.yaml @@ -67,7 +67,7 @@ params: - title: twitter link: "https://twitter.com/kaymoonwitch" - title: instagram - link: "https://https://instagram.com/kaymoonwitch" + link: "https://instagram.com/kaymoonwitch" - title: github link: "https://github.com/moonwitch" - title: linkedin diff --git a/content/posts/2026-06-13-diagnosed-let-go-and-finding-the-volume-knob.md b/content/posts/2026-06-13-diagnosed-let-go-and-finding-the-volume-knob.md new file mode 100644 index 0000000..07ba5b5 --- /dev/null +++ b/content/posts/2026-06-13-diagnosed-let-go-and-finding-the-volume-knob.md @@ -0,0 +1,56 @@ +--- +title: "Diagnosed, Let Go, and Finding the Volume Knob" +date: "2026-06-13" +lastmod: "2026-06-13" +categories: + - blog +tags: + - neurodivergent + - adhd + - autism + - personal + - work +comments: true +draft: true +--- + +I've been putting off writing this one, which is very on-brand for me. It's the post where the personal and the professional collide — the stretch of a couple of years where I got a name for how my brain works, lost a job I thought I wanted, and ended up somewhere that, of all the lovely ironies, makes a living helping people turn the volume down. Let me try to tell it honestly. + +> A note before I start: this is my story, from my chair. I'm not writing it as a complaint about anyone in particular, and it isn't medical advice. It's just what happened, and what I learned. + +## Getting the name for it + +For most of my life I assumed everyone was running the same race I was, just complaining about it less. That everyone white-knuckled their way through open-plan offices, rehearsed small talk in the car, and crashed on the sofa at 6pm because being a person all day had used up the whole battery. That everyone's feelings arrived at the volume mine did. + +They don't. I found that out properly as an adult, when I finally went looking for answers and came back with a couple of words — ADHD, and later the autism piece — that suddenly explained a *lot*. The hyperfocus and the total inability to start a boring task. The way criticism doesn't bruise so much as detonate. The sensory stuff I'd spent decades calling "being difficult." The exhaustion that wasn't laziness; it was the cost of pretending all day. + +A diagnosis doesn't fix anything overnight. What it gave me was a manual. I stopped reading my own behaviour as a series of character flaws and started reading it as a system with particular needs — predictable, once you know the wiring. That reframe alone was worth the whole process. + +## The job that didn't work out + +Here's the part that still stings to type. Not long after I'd started understanding myself better, a job I'd been excited about came to an end — not on my terms. I was let go. + +I'm not going to relitigate it here, and I'm deliberately not pointing fingers, because the truth is messier and more human than a villain story. But I'll say the thing I most needed to hear at the time: a workplace not being the right fit for how you're built is not the same as you being broken. I had spent so much energy masking — performing the calm, neurotypical-shaped version of competent — that by the time things went wrong, there was very little of *me* left in the room to advocate for. When you're running on a mask, you don't have the bandwidth to also explain why you need the mask. + +RSD made the ending so much worse than the facts warranted. My brain took "this role isn't working" and translated it, instantly and physically, into *you are a failure and everyone always knew it.* It took a long time, and a lot of help, to separate the real, survivable disappointment from the catastrophe my nervous system insisted on. + +What I took from it, eventually, wasn't bitterness. It was a quiet, stubborn decision: never again would I try to earn my place by hiding the thing that actually needed accommodating. + +## Finding the volume knob + +And then — life's sense of humour — I landed at a company that makes earplugs. + +I work at Loop now, and I won't pretend I didn't laugh when the pieces lined up. A neurodivergent person who spent years overwhelmed by noise, who needs to manage her sensory world carefully to function, working somewhere whose entire reason for existing is giving people a way to turn the volume down without checking out of their own lives. It's the most fitting metaphor I could have stumbled into. Some days the job *is* the metaphor. + +More than the poetry of it, though, it's the first place where I haven't felt I had to choose between being honest about my brain and being taken seriously. Where "I work better like this" is a sentence that gets a "sure," not a raised eyebrow. I don't want to over-romanticise a workplace — they're all imperfect, and I'm still learning where my edges are. But the difference between an environment that treats your needs as a negotiation and one that treats them as information is enormous. It's the difference between surviving the week and actually having something left over at the end of it. + +## What I'd tell past-me + +If I could send a note back to the version of me in the middle of all this — diagnosed but raw, freshly let go, convinced it was proof of something terrible — it would be short: + +- The diagnosis is a map, not a verdict. Use it to route around the potholes, not to decide you're a write-off. +- A bad fit is data, not a sentence. It tells you what you need, if you're willing to listen instead of just bleed. +- Masking has a price, and you've been paying it in a currency you can't afford. Spend less of yourself pretending. +- The right room exists. It might, hilariously, sell earplugs. Keep going until you find it. + +I'm still a work in progress — gloriously, permanently so. But I'm doing it as myself now, at a volume I can actually live at. That turns out to be the whole thing. diff --git a/layouts/partials/coffee-cup.html b/layouts/partials/coffee-cup.html new file mode 100644 index 0000000..5436445 --- /dev/null +++ b/layouts/partials/coffee-cup.html @@ -0,0 +1,10 @@ +{{- /* Decorative steaming coffee cup. aria-hidden; purely a visual nod to the site name. */ -}} + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 7c2b324..7e4f43e 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -3,7 +3,10 @@ @@ -39,8 +43,5 @@ {{ $opts := dict "minify" hugo.IsProduction "target" "es2017" }} {{ $app = $app | js.Build $opts | fingerprint }} - - - diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7015ced..82d88fe 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -25,6 +25,7 @@ {{ .Site.Title }} + {{ partial "coffee-cup.html" . }}