diff --git a/assets/sass/pages/about.scss b/assets/sass/pages/about.scss index 0156fe9..84c2552 100644 --- a/assets/sass/pages/about.scss +++ b/assets/sass/pages/about.scss @@ -2,6 +2,10 @@ color: white; margin: auto; + .content-screen { + position: relative !important; + } + > .about-content { width: 50%; margin: auto; @@ -14,6 +18,125 @@ grid-column: 1 / -1; } + .about-contact-section { + margin-top: 1rem; + + p { + margin-bottom: 1.5rem; + line-height: 1.6; + } + + .contact-info { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .contact-item { + display: flex; + flex-direction: column; + gap: 0.5rem; + + @media (min-width: 600px) { + flex-direction: row; + align-items: center; + flex-wrap: wrap; + } + } + + .contact-label { + font-weight: bold; + white-space: nowrap; + } + + .info { + color: #0f0; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); + text-decoration: none; + border-bottom: 1px dotted rgba(0, 255, 0, 0.5); + transition: all 0.3s ease; + + &:hover { + border-bottom-style: solid; + border-bottom-color: rgba(0, 255, 0, 0.8); + text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); + } + } + + .pgp-actions { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-left: 0; + + @media (min-width: 600px) { + margin-left: 0.5rem; + } + } + + .pgp-button { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 10px; + background: rgba(0, 255, 0, 0.1); + border: 1px solid rgba(0, 255, 0, 0.3); + color: #0f0; + text-decoration: none; + font-family: monospace; + font-size: 0.8rem; + cursor: pointer; + transition: all 0.3s ease; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); + border-radius: 3px; + + .button-icon { + font-size: 1em; + line-height: 1; + } + + &:hover { + background: rgba(0, 255, 0, 0.2); + border-color: rgba(0, 255, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 255, 0, 0.4); + text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); + } + + &:active { + transform: translateY(1px); + } + } + + .copy-feedback { + margin-top: 0.5rem; + font-size: 0.85rem; + padding: 6px 10px; + border-radius: 3px; + opacity: 0; + transform: translateY(-10px); + transition: all 0.3s ease; + + &.show { + opacity: 1; + transform: translateY(0); + } + + &.success { + color: #0f0; + background: rgba(0, 255, 0, 0.1); + border: 1px solid rgba(0, 255, 0, 0.3); + text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); + } + + &.error { + color: #f00; + background: rgba(255, 0, 0, 0.1); + border: 1px solid rgba(255, 0, 0, 0.3); + text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); + } + } + } + .about-header { position: absolute; left: -80px; @@ -37,6 +160,10 @@ } } + > .about-container { + position: relative; + } + > .info-badges { display: grid; grid-template-columns: 1fr 1fr; @@ -55,6 +182,23 @@ transform: rotate(5deg); } } + + .about-music { + pointer-events: none; + + > .music { + scale: 1.6; + + .ipod-group { + top: 50%; + left: 25%; + } + + .vu-meter { + position: relative; + } + } + } } } diff --git a/assets/sass/pages/blog.scss b/assets/sass/pages/blog.scss index 1879456..4ed1a18 100644 --- a/assets/sass/pages/blog.scss +++ b/assets/sass/pages/blog.scss @@ -558,6 +558,142 @@ } } + // Contact section styling + .blog-contact-section { + margin-top: 40px; + padding: 20px; + background: rgba(0, 255, 0, 0.05); + border: 1px solid rgba(0, 255, 0, 0.3); + border-radius: 4px; + + @include media-down(lg) { + margin-top: 30px; + padding: 15px; + } + + .contact-title { + font-size: 1.3rem; + margin-bottom: 15px; + color: greenyellow; + text-shadow: 0 0 10px rgba(173, 255, 47, 0.5); + + @include media-down(lg) { + font-size: 1.1rem; + } + } + + .contact-content { + display: flex; + flex-direction: column; + gap: 15px; + } + + .contact-email, + .contact-pgp { + font-size: 0.95rem; + line-height: 1.6; + + @include media-down(lg) { + font-size: 0.9rem; + } + } + + .contact-label { + color: greenyellow; + font-weight: bold; + margin-right: 10px; + text-shadow: 0 0 5px rgba(173, 255, 47, 0.5); + } + + .contact-email a { + color: #0f0; + text-decoration: none; + border-bottom: 1px dotted rgba(0, 255, 0, 0.5); + transition: all 0.3s ease; + + &:hover { + border-bottom-style: solid; + border-bottom-color: rgba(0, 255, 0, 0.8); + text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); + background: rgba(0, 255, 0, 0.05); + } + } + + .pgp-actions { + display: flex; + gap: 10px; + margin-top: 10px; + flex-wrap: wrap; + } + + .pgp-button { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 8px 15px; + background: rgba(0, 255, 0, 0.1); + border: 1px solid rgba(0, 255, 0, 0.3); + color: #0f0; + text-decoration: none; + font-family: monospace; + font-size: 0.85rem; + cursor: pointer; + transition: all 0.3s ease; + text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); + border-radius: 3px; + + @include media-down(lg) { + font-size: 0.8rem; + padding: 6px 12px; + } + + .button-icon { + font-size: 1.1em; + line-height: 1; + } + + &:hover { + background: rgba(0, 255, 0, 0.2); + border-color: rgba(0, 255, 0, 0.6); + box-shadow: 0 0 10px rgba(0, 255, 0, 0.4); + text-shadow: 0 0 10px rgba(0, 255, 0, 0.8); + } + + &:active { + transform: translateY(1px); + } + } + + .copy-feedback { + margin-top: 10px; + font-size: 0.85rem; + padding: 8px 12px; + border-radius: 3px; + opacity: 0; + transform: translateY(-10px); + transition: all 0.3s ease; + + &.show { + opacity: 1; + transform: translateY(0); + } + + &.success { + color: #0f0; + background: rgba(0, 255, 0, 0.1); + border: 1px solid rgba(0, 255, 0, 0.3); + text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); + } + + &.error { + color: #f00; + background: rgba(255, 0, 0, 0.1); + border: 1px solid rgba(255, 0, 0, 0.3); + text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); + } + } + } + // Blog image styling .blog-img-container { position: relative; diff --git a/assets/sass/pages/resources.scss b/assets/sass/pages/resources.scss index 3735953..d615573 100644 --- a/assets/sass/pages/resources.scss +++ b/assets/sass/pages/resources.scss @@ -16,7 +16,7 @@ .whiteboard { background: linear-gradient(135deg, #f5f5f0 0%, #e8e8dd 100%); border-radius: 8px; - padding: 3rem 2rem; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), inset 0 0 100px rgba(0, 0, 0, 0.02); @@ -24,15 +24,27 @@ // Subtle texture overlay &::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: - repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px), - repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.01) 2px, rgba(0, 0, 0, 0.01) 4px); + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.01) 2px, + rgba(0, 0, 0, 0.01) 4px + ), + repeating-linear-gradient( + 90deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.01) 2px, + rgba(0, 0, 0, 0.01) 4px + ); pointer-events: none; border-radius: 8px; } @@ -77,18 +89,20 @@ .resource-pin { position: relative; transform: rotate(0deg); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; // Random slight rotations for pins - &:nth-child(3n+1) { + &:nth-child(3n + 1) { transform: rotate(-1deg); } - &:nth-child(3n+2) { + &:nth-child(3n + 2) { transform: rotate(1deg); } - &:nth-child(3n+3) { + &:nth-child(3n + 3) { transform: rotate(-0.5deg); } @@ -120,7 +134,7 @@ transition: transform 0.3s ease; &::after { - content: ''; + content: ""; position: absolute; top: 50%; left: 50%; @@ -147,19 +161,19 @@ gap: 1rem; // Vary note colors - .resource-pin:nth-child(4n+1) & { + .resource-pin:nth-child(4n + 1) & { background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); // Yellow } - .resource-pin:nth-child(4n+2) & { + .resource-pin:nth-child(4n + 2) & { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); // Blue } - .resource-pin:nth-child(4n+3) & { + .resource-pin:nth-child(4n + 3) & { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); // Green } - .resource-pin:nth-child(4n+4) & { + .resource-pin:nth-child(4n + 4) & { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); // Pink } } @@ -172,7 +186,13 @@ // Lavalamp icon &.lavalamp { - background: linear-gradient(180deg, transparent 0%, transparent 20%, #9333ea 20%, #7c3aed 100%); + background: linear-gradient( + 180deg, + transparent 0%, + transparent 20%, + #9333ea 20%, + #7c3aed 100% + ); border-radius: 10px 10px 40px 40px; border: 3px solid #6b21a8; position: relative; @@ -180,7 +200,7 @@ // Lamp base &::before { - content: ''; + content: ""; position: absolute; bottom: -8px; left: 50%; @@ -193,7 +213,7 @@ // Lava blobs &::after { - content: ''; + content: ""; position: absolute; top: 30%; left: 30%; @@ -219,7 +239,7 @@ // Equalizer bars &::before, &::after { - content: ''; + content: ""; position: absolute; bottom: 15px; width: 8px; @@ -280,7 +300,8 @@ } @keyframes float-blob { - 0%, 100% { + 0%, + 100% { transform: translateY(0) scale(1); } 50% { @@ -289,7 +310,8 @@ } @keyframes float-blob-2 { - 0%, 100% { + 0%, + 100% { transform: translateY(0) scale(1); } 50% { @@ -298,7 +320,8 @@ } @keyframes equalizer-1 { - 0%, 100% { + 0%, + 100% { height: 35px; } 50% { @@ -307,7 +330,8 @@ } @keyframes equalizer-2 { - 0%, 100% { + 0%, + 100% { height: 25px; } 50% { @@ -316,7 +340,8 @@ } @keyframes equalizer-3 { - 0%, 100% { + 0%, + 100% { height: 30px; } 50% { diff --git a/assets/sass/partials/_content-screens.scss b/assets/sass/partials/_content-screens.scss index 2cf6910..61e57fc 100644 --- a/assets/sass/partials/_content-screens.scss +++ b/assets/sass/partials/_content-screens.scss @@ -6,7 +6,7 @@ aspect-ratio: 300 / 245; background: linear-gradient(145deg, #b8b8b0, #989888); box-shadow: - 0 8px 20px rgba(0, 0, 0, 0.7), + 0 8px 20px #000000b3, inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.3); padding: 6px 8px 18px 8px; @@ -20,7 +20,7 @@ &::before { content: " "; display: block; - position: fixed; + position: absolute; top: 6px; left: 8px; bottom: 18px; @@ -44,7 +44,7 @@ &::after { content: " "; display: block; - position: fixed; + position: absolute; top: 6px; left: 8px; bottom: 18px; diff --git a/assets/sass/partials/_global-styles.scss b/assets/sass/partials/_global-styles.scss index 97880d1..cff4408 100644 --- a/assets/sass/partials/_global-styles.scss +++ b/assets/sass/partials/_global-styles.scss @@ -12,6 +12,10 @@ footer[role="contentinfo"] { border-left: 1px solid #0f0; border-top-left-radius: 5px; + > .crt { + position: relative; + } + @include media-down(lg) { display: none; } diff --git a/assets/sass/partials/_vu-meter.scss b/assets/sass/partials/_vu-meter.scss index fb1f578..9d640bd 100644 --- a/assets/sass/partials/_vu-meter.scss +++ b/assets/sass/partials/_vu-meter.scss @@ -43,6 +43,10 @@ justify-content: space-around; height: 100%; gap: 2px; + + &.crt { + position: relative; + } } .vu-bar { diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 56bb0e1..bdde189 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -103,6 +103,7 @@ body { pointer-events: none; } .crt { + position: absolute; animation: textShadow 1.6s infinite; background: black; color: greenyellow; @@ -813,7 +814,6 @@ body { text-decoration: none !important; } - /* Desk-mounted CRT - on desk left side */ .desk-monitor { bottom: 10%; @@ -1036,8 +1036,6 @@ body { } } - - @keyframes pulse-slow { 0%, 100% { diff --git a/content/blog/the-downfall-of-stackoverflow/index.md b/content/blog/the-downfall-of-stackoverflow/index.md index d4f97c4..95410a3 100644 --- a/content/blog/the-downfall-of-stackoverflow/index.md +++ b/content/blog/the-downfall-of-stackoverflow/index.md @@ -11,7 +11,7 @@ _Quick note: This isn't an "AI bad" rant. AI tools are a useful thing to have in This post was inspired by a post on [Hacker News](https://news.ycombinator.com/item?id=46482345) that linked to this [StackOverflow data](https://data.stackexchange.com/stackoverflow/query/1926661#graph). -My kneejerk reaction to the data was that the rise in AI and its code analysis capabilities have caused the downfall of StackOverflow, but I needed some data to back it up. +My kneejerk reaction to the data was that the rise in AI and its code analysis capabilities have caused the downfall of StackOverflow, but I needed some data to back it up. We can see a peak after a gradual decline in early 2020 (COVID bedroom coders?) which then returns to a roughly normal level by 2021, before starting a stark decline into obscurity, very much accelerating at the end of 2022. @@ -55,7 +55,7 @@ Zooming in on 2019 onwards makes it clearer: StackOverflow's real decline starts in 2021, well before anyone gave a shit about AI coding. From January 2021 (140,009 questions) to December 2022 (96,767 questions), it lost 31% of its traffic while "AI coding" searches sat at baseline. -The AI coding surge doesn't really kick off until early 2023, then explodes through 2025, peaking in August. But by then StackOverflow was already down to 5,885 questions per month. +The AI coding surge doesn't really kick off until early 2023, then explodes through 2025, peaking in August. By then StackOverflow was already down to 5,885 questions per month. ## Did the rise of GitHub contribute? @@ -90,7 +90,7 @@ Could it be a contributing factor? Absolutely. If you had a choice between askin To actually test this properly you'd need to pull years of StackOverflow comments and run sentiment analysis to see if moderation got worse over time. That's way more effort than I'm putting into this blog post. Maybe one for another day. -## So what's actually going on? +## So what's was the actual cause? The data suggests AI accelerated something that was already happening. A few things probably contributed: @@ -102,13 +102,13 @@ The data suggests AI accelerated something that was already happening. A few thi **The collapse (2025-2026)**: By mid-2025, AI coding tools are just... everywhere. GitHub Copilot, ChatGPT, Claude, all of them baked into every IDE and workflow. The August 2025 peak in "AI coding" searches lines up with StackOverflow hitting 5,885 questions. That's a 96% decline from five years earlier. -## The bottom line +## Summary AI didn't kill StackOverflow, but it's definitely finishing the job. The platform was already bleeding out when ChatGPT showed up: content saturation, better tooling, the ecosystem maturing. But AI coding tools changed the game completely. Why search through old forum posts when you can just ask? The inverse relationship is stark: as AI coding interest hits its peak in 2025, StackOverflow craters. By December 2025 we're at 3,862 questions. That's roughly the same as September 2008, just a few months after the platform launched. -Twelve years to build it. Five years to tear it down. And yeah, the last three were almost certainly AI finishing what was already started. +Twelve years to build it. Five years to watch it end. The last three were almost certainly AI finishing what was already started. ### Footnote @@ -116,7 +116,7 @@ This is the hardest and longest I have thought about anything in a long time. I The CSV data for this post can be found on my [GitHub](https://github.com/unbolt/ritual.sh/tree/main/content/blog/the-downfall-of-stackoverflow). -I hope you found this interesting. Rock on. +I hope you found this interesting. Please get in touch if you have any further insights. --- @@ -135,5 +135,3 @@ I hope you found this interesting. Rock on. [^5]: [Comment](https://news.ycombinator.com/item?id=46482624) [^6]: In 2013, Tim Schreiber wrote about ["StackOverlords"](https://timschreiber.com/2013/10/30/beware-the-stackoverlords/) who "ruthlessly wield" their privileges against newcomers. By 2018, StackOverflow officially acknowledged the problem in their blog post ["Stack Overflow Isn't Very Welcoming. It's Time for That to Change."](https://stackoverflow.blog/2018/04/26/stack-overflow-isnt-very-welcoming-its-time-for-that-to-change/) - - diff --git a/layouts/about/single.html b/layouts/about/single.html index 8f8061d..72dc3dd 100644 --- a/layouts/about/single.html +++ b/layouts/about/single.html @@ -1,17 +1,15 @@ -{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define -"main" }} +{{ define "main" }}
{{ partial "elements/lavalamp.html" . }}
- > about -v
+ > about -s
Name / Dan (He/Him)
Age / 40-something
Location / UK 🇬🇧

Interests / - - Programming. Music. Movies. Tech. Photography. Programming. Music. Movies. Tech. Photography.
_
@@ -23,6 +21,16 @@ partial "elements/lcd-screen.html" (dict "text" .) }} {{ end }}
+
+
+
+ > cat manifesto + + _ +
+
+
+
@@ -105,10 +113,96 @@ >
Camera / Fuji X-T5
Audio / Hiby R4 EVA, Fiio FT-1

- More info coming soon... -
_ + Check out my /now page to see more hardware and + software information.
_ +
+
+ +
+
+ {{ partial "elements/ipod.html" . }} + +
{{ partial "elements/vu-meter.html" . }}
+
+
+ +
+
+ > cat contact_info
+
+

+ If you have any comments, questions, corrections, or just fancy + saying "hello" please feel free to get in touch. +

+

+ I am still debating with myself if I want to put more effort into a + mastodon/bluesky type thing, so for now email is the best way to + talk to me. PGP is available if that's your kind of thing. +

+
+
+ Email / + dan@ritual.sh +
+
+ PGP Public Key / +
+ + ↓ Download + + +
+
+
+
+
+ 
+|     .-.
+|    /   \         .-.
+|   /     \       /   \       .-.     .-.     _   _
++--/-------\-----/-----\-----/---\---/---\---/-\-/-\/\/---
+| /         \   /       \   /     '-'     '-'
+|/           '-'         '-'
+
+
+ _
+ + + {{ end }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html index 48ffd6c..1a9cec6 100644 --- a/layouts/blog/single.html +++ b/layouts/blog/single.html @@ -23,6 +23,37 @@
{{ .Content }}
+
+

Contact

+
+

+ If you found this interesting, have any comments, questions, + corrections, or just fancy saying "hello" please feel free to get + in touch. +

+
+ Email: + dan@ritual.sh +
+
+ PGP Public Key: +
+ + ↓ Download + + +
+
+
+
+
+