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 }}
+
+
+
+
+
+ > 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" }}
-
+{{ 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 @@
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 @@
+
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 @@
-
-
-
- {{ .Site.Title }}
-
-
- {{ partial "i18nlist.html" . }}
- {{ if .Site.Menus.main }}
-
- {{ end }}
- {{ partial "social-follow.html" . }}
-
-
-
\ No newline at end of file
+
+
+