diff --git a/assets/js/lavalamp.js b/assets/js/lavalamp.js index 8781e82..15bf862 100644 --- a/assets/js/lavalamp.js +++ b/assets/js/lavalamp.js @@ -1,4 +1,5 @@ (function () { + const blobsContainer = document.querySelector(".blobs-container"); // Changed from lavaLamp const lavaLamp = document.getElementById("lavaLamp"); let blobs = []; let baseSpeed = 0.8; @@ -6,41 +7,71 @@ function createBlob() { const blob = document.createElement("div"); blob.className = "blob"; - const size = Math.random() * 30 + 20; // Smaller blobs (20-50px) - const startY = Math.random() * 100; // Within ~150px height + + // Get container dimensions from lavaLamp + const containerWidth = lavaLamp.offsetWidth; + const containerHeight = lavaLamp.offsetHeight; + + // Size relative to container width (25-50% of width) + const size = (Math.random() * 0.15 + 0.25) * containerWidth; + const duration = (Math.random() * 8 + 12) / baseSpeed; - const maxX = 60 - size; // Adjusted for narrower tube (80px wide) + + // Max X position accounting for blob size + const maxX = containerWidth - size; const startX = Math.random() * maxX; blob.style.width = `${size}px`; blob.style.height = `${size}px`; blob.style.left = `${startX}px`; + blob.style.bottom = "10px"; + blob.style.position = "absolute"; + blob.style.setProperty("--duration", `${duration}s`); + + // Start position (bottom of lamp) blob.style.setProperty("--start-x", "0px"); - blob.style.setProperty("--start-y", `${startY}px`); - blob.style.setProperty("--mid1-x", `${Math.random() * 15 - 15}px`); - blob.style.setProperty("--mid1-y", `${Math.random() * -40 - 40}px`); - blob.style.setProperty("--mid2-x", `${Math.random() * 20 - 20}px`); - blob.style.setProperty("--mid2-y", `${Math.random() * -80 - 40}px`); - blob.style.setProperty("--mid3-x", `${Math.random() * 15 - 15}px`); - blob.style.setProperty("--mid3-y", `${Math.random() * -60 - 10}px`); + blob.style.setProperty("--start-y", "0px"); + + // Movement waypoints (moving upward - negative Y values) + blob.style.setProperty( + "--mid1-x", + `${(Math.random() * 0.3 - 0.15) * containerWidth}px`, + ); + blob.style.setProperty( + "--mid1-y", + `${-(Math.random() * 0.15 + 0.25) * containerHeight}px`, + ); + + blob.style.setProperty( + "--mid2-x", + `${(Math.random() * 0.4 - 0.2) * containerWidth}px`, + ); + blob.style.setProperty( + "--mid2-y", + `${-(Math.random() * 0.2 + 0.5) * containerHeight}px`, + ); + + blob.style.setProperty( + "--mid3-x", + `${(Math.random() * 0.3 - 0.15) * containerWidth}px`, + ); + blob.style.setProperty( + "--mid3-y", + `${-(Math.random() * 0.15 + 0.8) * containerHeight}px`, + ); + + // Scale variations blob.style.setProperty("--scale1", (Math.random() * 0.3 + 1.0).toFixed(2)); blob.style.setProperty("--scale2", (Math.random() * 0.3 + 0.85).toFixed(2)); blob.style.setProperty("--scale3", (Math.random() * 0.3 + 0.95).toFixed(2)); + + // Random delay to stagger animations blob.style.animationDelay = `${Math.random() * -20}s`; return blob; } - function updateBlobColors() { - const color1 = "#FF7800"; - const color2 = "#E01B24"; - const gradient = `radial-gradient(circle at 30% 30%, ${color1}, ${color2})`; - blobs.forEach((blob) => { - blob.style.background = gradient; - }); - } - function updateLampBackground() { const bg1 = "#F8E45C"; const bg2 = "#FF7800"; @@ -51,13 +82,12 @@ const count = parseInt(6); while (blobs.length > count) { const blob = blobs.pop(); - lavaLamp.removeChild(blob); + blobsContainer.removeChild(blob); // Changed } while (blobs.length < count) { const blob = createBlob(); blobs.push(blob); - lavaLamp.appendChild(blob); - updateBlobColors(); + blobsContainer.appendChild(blob); // Changed } } diff --git a/assets/js/terminal.js b/assets/js/terminal.js index aa96f63..6024570 100644 --- a/assets/js/terminal.js +++ b/assets/js/terminal.js @@ -52,7 +52,7 @@ class TerminalShell { let latestPostTitle = document.getElementById("latest-post-title"); let latestPostDate = document.getElementById("latest-post-date"); this.printHTML( - "Latest Post: " + + "Latest Update: " + latestPostTitle.innerText + " (" + latestPostDate.innerText + diff --git a/assets/sass/pages/about.scss b/assets/sass/pages/about.scss new file mode 100644 index 0000000..2c55edf --- /dev/null +++ b/assets/sass/pages/about.scss @@ -0,0 +1,27 @@ +.about-page { + color: white; + margin: auto; + + > .about-content { + width: 50%; + margin: auto; + padding: 2rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + + > .wide-item { + grid-column: 1 / -1; + } + + > .about-header { + text-align: center; + } + } +} + +@media (max-width: 800px) { + .about-page > .about-content { + width: 100%; + } +} diff --git a/assets/sass/partials/_content-screens.scss b/assets/sass/partials/_content-screens.scss new file mode 100644 index 0000000..2cf6910 --- /dev/null +++ b/assets/sass/partials/_content-screens.scss @@ -0,0 +1,111 @@ +.content-screen { + margin: auto; + position: relative; + border-radius: 8px; + width: 100%; + aspect-ratio: 300 / 245; + background: linear-gradient(145deg, #b8b8b0, #989888); + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.7), + 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; + + > .crt { + animation: textShadow 1.6s infinite; + background: black; + color: greenyellow; + font-family: monospace; + + &::before { + content: " "; + display: block; + position: fixed; + top: 6px; + left: 8px; + bottom: 18px; + right: 8px; + border-radius: 8px; + background: + linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), + linear-gradient( + 90deg, + rgba(255, 0, 0, 0.06), + rgba(0, 255, 0, 0.02), + rgba(0, 0, 255, 0.06) + ); + z-index: 2; + background-size: + 100% 2px, + 3px 100%; + pointer-events: none; + } + + &::after { + content: " "; + display: block; + position: fixed; + top: 6px; + left: 8px; + bottom: 18px; + right: 8px; + background: rgba(18, 16, 16, 0.1); + opacity: 0; + z-index: 2; + pointer-events: none; + animation: flicker 0.15s infinite; + } + } + + > .screen-display { + position: relative; + font-size: clamp(0.875rem, 2vw, 1rem); + overflow-x: hidden; + overflow-y: auto; + scrollbar-color: #0f0 #000; + + &.no-scroll { + overflow: hidden; + } + + > p { + margin-bottom: 1em; + } + > p:last-child { + margin-bottom: 0; + } + } + + &::after { + content: ""; + position: fixed; + bottom: 5px; + right: 8px; + width: 5px; + height: 5px; + background: #0f0; + border-radius: 50%; + box-shadow: 0 0 6px #0f0; + animation: pulse 1.8s ease-in-out infinite; + overflow: hidden; + } +} + +.content-screen:nth-child(1) { + transform: rotate(-0.5deg); +} +.content-screen:nth-child(2) { + transform: rotate(0.4deg); +} +.content-screen:nth-child(3) { + transform: rotate(-0.5deg); +} +.content-screen:nth-child(4) { + transform: rotate(1deg); +} +.content-screen:nth-child(5) { + transform: rotate(-1.2deg); +} +.content-screen:nth-child(6) { + transform: rotate(0.3deg); +} diff --git a/assets/sass/partials/_global-styles.scss b/assets/sass/partials/_global-styles.scss index dda5538..f695a85 100644 --- a/assets/sass/partials/_global-styles.scss +++ b/assets/sass/partials/_global-styles.scss @@ -1,10 +1,10 @@ footer[role="contentinfo"] { - position: absolute; + position: fixed; bottom: 0; right: 0; z-index: 10000; - background: #000; // or whatever color you want - color: #0f0; // match your terminal green theme + background: #000; + color: #0f0; padding: 5px; text-align: center; font-family: monospace; diff --git a/assets/sass/partials/_lavalamp.scss b/assets/sass/partials/_lavalamp.scss index 5dc916b..aa2b269 100644 --- a/assets/sass/partials/_lavalamp.scss +++ b/assets/sass/partials/_lavalamp.scss @@ -8,6 +8,26 @@ flex-direction: column; align-items: center; z-index: 999; + + margin: 0 auto; + //width: fit-content; /* or specify a fixed width */ + + .about-content & { + position: relative; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 160px; + height: 300px; + + transform: rotate(-5deg); + + .lamp-text { + font-size: 60px; + color: rgba(224, 27, 36, 0.7); + } + } } .lamp-cap { @@ -21,11 +41,10 @@ position: relative; z-index: 10; } - .lava-lamp { position: relative; width: 100%; - height: 102%; /*Being above 100% fixes the occasional gap when resizing the page, theoretically */ + height: 110%; background: var(--lamp-bg, linear-gradient(180deg, #2a1a4a 0%, #1a0a3a 100%)); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%); overflow: hidden; @@ -53,6 +72,27 @@ pointer-events: none; } +.blobs-container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + filter: url(#goo); + pointer-events: none; + z-index: 2; +} + +.blob { + position: absolute; + border-radius: 50%; + background: #f74b1e; + animation: float var(--duration) ease-in-out infinite; + opacity: 0.95; + mix-blend-mode: normal; + z-index: 3; +} + .lamp-base { width: 100%; height: 20%; @@ -68,20 +108,6 @@ align-items: center; } -.blob { - position: absolute; - border-radius: 50%; - background: var( - --blob-color, - radial-gradient(circle at 30% 30%, #ff6b9d, #c44569) - ); - filter: url(#goo); - animation: float var(--duration) ease-in-out infinite; - opacity: 0.95; - mix-blend-mode: normal; - z-index: 3; -} - @keyframes float { 0%, 100% { @@ -119,4 +145,8 @@ .lava-lamp:hover { cursor: pointer; + + > .lamp-text { + z-index: 4; + } } diff --git a/assets/sass/partials/_neon-sign.scss b/assets/sass/partials/_neon-sign.scss new file mode 100644 index 0000000..8d68b94 --- /dev/null +++ b/assets/sass/partials/_neon-sign.scss @@ -0,0 +1,96 @@ +/* Neon sign styling */ +.neon-sign { + position: absolute; + top: 5%; + left: 60%; + transform: translateX(-50%) rotate(-10deg); + z-index: 1; + + > .neon-text { + font-family: "Neonderthaw", cursive; + font-size: 7rem; + color: #fff; + text-shadow: + /* White core */ + 0 0 5px #fff, + 0 0 5px #fff, + /* Bright green inner glow */ 0 0 21px #0f0, + 0 0 42px #0f0, + 0 0 82px #0f0, + /* Outer green glow */ 0 0 92px #0f0, + 0 0 142px #0f0, + 0 0 181px #0f0; + animation: + neon-flicker 10s infinite alternate, + neon-pulse 3s ease-in-out infinite; + } + + [role="navigation"] & { + display: inline-block; + position: fixed; + top: 20px; + left: 10px; + transform: translateX(0) rotate(-10deg); + z-index: 9999; + > .neon-text { + font-size: 2rem; + text-shadow: + /* White core */ + 0 0 5px #fff, + 0 0 5px #fff, + /* Bright green inner glow */ 0 0 11px #0f0, + 0 0 22px #0f0, + 0 0 42px #0f0, + /* Outer green glow */ 0 0 22px #0f0, + 0 0 42px #0f0, + 0 0 81px #0f0; + } + } +} + +@keyframes neon-pulse { + 0%, + 100% { + text-shadow: + 0 0 7px #fff, + 0 0 10px #fff, + 0 0 21px #0f0, + 0 0 42px #0f0, + 0 0 82px #0f0, + 0 0 92px #0f0, + 0 0 102px #0f0, + 0 0 151px #0f0; + } + 50% { + text-shadow: + 0 0 4px #fff, + 0 0 7px #fff, + 0 0 15px #0f0, + 0 0 30px #0f0, + 0 0 60px #0f0, + 0 0 70px #0f0, + 0 0 80px #0f0, + 0 0 120px #0f0; + } +} + +@keyframes neon-flicker { + 0%, + 19%, + 21%, + 23%, + 25%, + 54%, + 56%, + 100% { + opacity: 1; + } + 20%, + 24%, + 55% { + opacity: 0.4; + } + 22% { + opacity: 0.6; + } +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 005ccd2..4fb5ff3 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -1,11 +1,16 @@ @import "partials/global-styles"; +@import "partials/neon-sign"; @import "partials/music"; @import "partials/vu-meter"; @import "partials/terminal"; @import "partials/now-playing"; @import "partials/lavalamp"; +@import "partials/content-screens"; + +@import "pages/about"; + @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap"); * { @@ -17,7 +22,6 @@ body { width: 100%; height: 100vh; - overflow: hidden; font-family: "Courier New", monospace; background: #1a1a1a; position: relative; @@ -1548,78 +1552,3 @@ body { /* Import a nice cursive font */ @import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap"); - -/* Neon sign styling */ -.neon-sign { - position: absolute; - top: 5%; - left: 60%; - transform: translateX(-50%) rotate(-10deg); - z-index: 1; -} - -.neon-text { - font-family: "Neonderthaw", cursive; - font-size: 7rem; - color: #fff; - text-shadow: - /* White core */ - 0 0 5px #fff, - 0 0 5px #fff, - /* Bright green inner glow */ 0 0 21px #0f0, - 0 0 42px #0f0, - 0 0 82px #0f0, - /* Outer green glow */ 0 0 92px #0f0, - 0 0 142px #0f0, - 0 0 181px #0f0; - animation: - neon-flicker 10s infinite alternate, - neon-pulse 3s ease-in-out infinite; -} - -@keyframes neon-pulse { - 0%, - 100% { - text-shadow: - 0 0 7px #fff, - 0 0 10px #fff, - 0 0 21px #0f0, - 0 0 42px #0f0, - 0 0 82px #0f0, - 0 0 92px #0f0, - 0 0 102px #0f0, - 0 0 151px #0f0; - } - 50% { - text-shadow: - 0 0 4px #fff, - 0 0 7px #fff, - 0 0 15px #0f0, - 0 0 30px #0f0, - 0 0 60px #0f0, - 0 0 70px #0f0, - 0 0 80px #0f0, - 0 0 120px #0f0; - } -} - -@keyframes neon-flicker { - 0%, - 19%, - 21%, - 23%, - 25%, - 54%, - 56%, - 100% { - opacity: 1; - } - 20%, - 24%, - 55% { - opacity: 0.4; - } - 22% { - opacity: 0.6; - } -} diff --git a/config.yml b/config.yml index f96374f..d4821ca 100644 --- a/config.yml +++ b/config.yml @@ -14,6 +14,13 @@ minify: disableXML: true minifyOutput: true +frontmatter: + lastmod: + - lastmod + - :git + - date + - publishDate + params: env: production diff --git a/content/about/index.md b/content/about/index.md index baf3ff5..c8f61a2 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -3,7 +3,8 @@ title: Some stuff about me author: Dan type: about date: 2024-01-09T11:46:01+00:00 +lastmod: 2025-12-09 comments: false --- -This page is coming soon... +This page is coming soon. diff --git a/content/audio/index.md b/content/audio/index.md index f680e0a..d4d8b88 100644 --- a/content/audio/index.md +++ b/content/audio/index.md @@ -1,7 +1,7 @@ --- title: Music & Audio author: Dan -type: about +type: audio date: 2025-12-08T11:46:01+00:00 comments: false --- diff --git a/layouts/about/single.html b/layouts/about/single.html index 8368061..57c799c 100644 --- a/layouts/about/single.html +++ b/layouts/about/single.html @@ -1,6 +1,104 @@ -{{ define "main" }} 1234 +{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define +"main" }}
-

{{ .Title }}

-
{{ .Content }}
+
+
{{ partial "elements/lavalamp.html" . }}
+ +
+
+ > about -v
+ Name / Dan (He/Him)
+ Age / 40-something
+ Location / UK 🇬🇧

+ Interests / + + Programming. Music. Movies. Tech. Photography.
+ _ +
+
+ +
+
+
+ > cat manifesto +
+
+                                         
+                          â–„â–„                    
+                         ██             █▄      
+ ▄              ▄     ▀▀▄██▄           ▄██▄     
+ ███▄███▄ ▄▀▀█▄ ████▄ ██ ██ ▄█▀█▄ ▄██▀█ ██ ▄███▄
+ ██ ██ ██ ▄█▀██ ██ ██ ██ ██ ██▄█▀ ▀███▄ ██ ██ ██
+▄██ ██ ▀█▄▀█▄██▄██ ▀█▄██▄██▄▀█▄▄▄█▄▄██▀▄██▄▀███▀
+                         ██                     
+                        ▀▀                      
+        
+
+ +

I hate being told what to do.

+

+ That's about the long and the short of it. But if you want to know + more... +

+

+ I grew up with the internet. I'm of the generation that saw the + internet come into existence, when it was free, open and finding out + what it could become. There was so much hope. +

+

+ Unfortunately what it became was an algorithmic slopshop. I fucking + hate it. +

+

+ During my formative years I chatted to people from all over the + world, I found them through mutual interests, friends of friends, + and just spending time exploring. IRC, forums, and MSN messenger + were our tools; building connections was our mission. +

+

+ The internet was so inspiring to me I studied it at college and + university and it eventually become a prosperous career. I still + work with the internet daily. +

+

+ Unfortunately, socially the internet become a cesspit. Particularly + in recent years. It's the cyberpunk dystopia of corporations telling + us what to think, billionaires telling us what to feel, and + politicians disregarding everyone. +

+

+ This website is meant to be a giant fuck you to web 2.0, social + media, algorithms and anyone or anything that tells me what to think + or feel. +

+

+ I want to invoke the feeling of the early internet, with some amount + of modernity thrown in. +

+

+ This is my space. Anyone is welcome to hang out if you bring good + vibes. +

+ _ +
+
+
+ +
+
+ > ./hardware -main
+ PC / + Ryzen 7 9800X3D, Radeon RX 7900 XTX, 64gb RAM + / Bazzite • kitty • KDE Plasma
+ Camera / Fuji X-T5
+ Audio / Hiby R4 EVA, Fiio FT-1

+ More info coming soon... +
_ +
+
+
{{ end }} diff --git a/layouts/index.html b/layouts/index.html index b9f2fd4..3f11c95 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,10 +1,10 @@ -{{ define "main" }} +{{ define "header" }} + +{{ end }}{{ define "main" }}
-
-
ritual.sh
-
+{{ partial "elements/neon-sign.html" . }}
fix bugs
@@ -35,7 +35,7 @@ - +
@@ -66,77 +66,6 @@
- - - - - - - - - - - - - - - - - -
-
@@ -253,7 +182,7 @@
-{{ partial "lavalamp.html" . }} +{{ partial "elements/lavalamp.html" . }}
@@ -413,6 +342,6 @@ $pages "Lastmod" "desc") }}
{{ .Permalink }}
{{ .Title }}
-
{{ .Date.Format "Jan 2, 2006" }}
+
{{ .Lastmod.Format "Jan 2, 2006" }}
{{ end }} {{ end }} diff --git a/layouts/partials/lavalamp.html b/layouts/partials/elements/lavalamp.html similarity index 75% rename from layouts/partials/lavalamp.html rename to layouts/partials/elements/lavalamp.html index 1926071..cef601c 100644 --- a/layouts/partials/lavalamp.html +++ b/layouts/partials/elements/lavalamp.html @@ -1,4 +1,4 @@ -
+
@@ -6,7 +6,11 @@ @@ -17,6 +21,8 @@
+
+
ABOUT
diff --git a/layouts/partials/elements/neon-sign.html b/layouts/partials/elements/neon-sign.html new file mode 100644 index 0000000..0708c45 --- /dev/null +++ b/layouts/partials/elements/neon-sign.html @@ -0,0 +1,3 @@ +
+
ritual.sh
+
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html index 27bb601..1df92b9 100644 --- a/layouts/partials/site-navigation.html +++ b/layouts/partials/site-navigation.html @@ -1,22 +1,9 @@ - \ No newline at end of file +