Making stuff work better, adding a floppy

assets/js/lavalamp.js

@@ -92,9 +92,11 @@
   }
 
   function init() {
+    if (document.getElementById("lavaLamp")) {
       updateBlobCount();
       updateLampBackground();
     }
+  }
 
   init();
 })();

assets/js/pages/audio.js

@@ -0,0 +1,25 @@
+if (document.getElementById("starfield")) {
+  let starfield = document.getElementById("starfield");
+  let numStars = 200;
+
+  // Create static twinkling stars
+  for (let i = 0; i < numStars; i++) {
+    const star = document.createElement("div");
+    star.className = "star";
+
+    // Random size
+    const sizeClass =
+      Math.random() < 0.7 ? "small" : Math.random() < 0.9 ? "medium" : "large";
+    star.classList.add(sizeClass);
+
+    // Random position
+    star.style.left = Math.random() * 100 + "%";
+    star.style.top = Math.random() * 100 + "%";
+
+    // Random animation duration (2-6 seconds) and delay
+    star.style.animationDuration = 2 + Math.random() * 4 + "s";
+    star.style.animationDelay = Math.random() * 5 + "s";
+
+    starfield.appendChild(star);
+  }
+}

assets/sass/pages/about.scss

@@ -17,11 +17,30 @@
     > .about-header {
       text-align: center;
     }
+
+    > .manifesto-container {
+      position: relative;
+      > .manifesto-floppy {
+        position: absolute;
+        right: -50px;
+        top: -20px;
+        width: 150px;
+        transform: rotate(5deg);
+      }
+    }
   }
 }
 
 @media (max-width: 800px) {
   .about-page > .about-content {
     width: 100%;
+
+    > .manifesto-container {
+      > .manifesto-floppy {
+        width: 75px;
+        top: -10px;
+        right: -20px;
+      }
+    }
   }
 }

assets/sass/pages/audio.scss

@@ -0,0 +1,42 @@
+.audio-page {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
+  overflow: hidden;
+}
+
+.star {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: white;
+  border-radius: 50%;
+  animation: twinkle linear infinite;
+}
+
+.star.small {
+  width: 1px;
+  height: 1px;
+}
+
+.star.medium {
+  width: 2px;
+  height: 2px;
+}
+
+.star.large {
+  width: 3px;
+  height: 3px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}

assets/sass/partials/_floppy.scss

@@ -0,0 +1,104 @@
+.floppy-disk {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 2%;
+  position: relative;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  container-type: inline-size;
+  pointer-events: none;
+  clip-path: polygon(
+    0 0,
+    /* Top left */ 95% 0,
+    /* Top edge before diagonal */ 100% 5%,
+    /* Top right diagonal corner */ 100% 100%,
+    /* Bottom right */ 0 100% /* Bottom left */
+  );
+}
+
+.metal-shutter {
+  position: absolute;
+  top: 0px;
+  right: 0;
+  transform: translateX(-40%);
+  width: 50%;
+  height: 30%;
+  background: linear-gradient(180deg, #c0c0c0 0%, #808080 50%, #606060 100%);
+  border-radius: 5%;
+  border-top-left-radius: 0px;
+  box-shadow:
+    0 1cqw 2cqw rgba(0, 0, 0, 0.4),
+    inset 0 0.25cqw 0.5cqw rgba(255, 255, 255, 0.3);
+  z-index: 5;
+
+  &::before {
+    content: " ";
+    height: 100%;
+    top: 0px;
+    right: 0px;
+    left: -35%;
+    position: absolute;
+    border-bottom-left-radius: 5%;
+    box-shadow:
+      inset 0.5cqw 0 0.5cqw rgba(0, 0, 0, 0.5),
+      inset 0 -0.25cqw 0.5cqw rgba(255, 255, 255, 0.4);
+    z-index: 4;
+  }
+}
+
+.shutter-opening {
+  position: absolute;
+  top: 15%;
+  right: 10%;
+  transform: translateX(-50%);
+  width: 20%;
+  height: 70%;
+  background: #000;
+  border-radius: 5%;
+  box-shadow: inset 0 0.5cqw 1cqw rgba(0, 0, 0, 0.8);
+}
+
+.label {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 55%;
+  background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
+  border-radius: 2%;
+  overflow: hidden;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  font-family: "Caveat", cursive;
+  color: black;
+  font-size: clamp(0.7rem, 5cqw, 2rem);
+  font-weight: bold;
+}
+
+/* Yellow header on label */
+.label-header {
+  width: 100%;
+  height: 20%;
+  background: linear-gradient(180deg, #f4d03f 0%, #e1b700 100%);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+  padding: 2%;
+  text-align: center;
+}
+
+.label-lines {
+  padding: 5%;
+  display: flex;
+  flex-direction: column;
+  height: 80%;
+  box-sizing: border-box;
+  font-size: clamp(0.6rem, 4cqw, 1.5rem);
+}
+
+.label-line {
+  flex: 1;
+  width: 100%;
+  height: 1.5px;
+  border-bottom: 2px solid black;
+  opacity: 0.7;
+}

assets/sass/style.scss

@@ -6,10 +6,12 @@
 @import "partials/terminal";
 @import "partials/now-playing";
 @import "partials/lavalamp";
+@import "partials/floppy";
 
 @import "partials/content-screens";
 
 @import "pages/about";
+@import "pages/audio";
 
 @import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap");
 

content/audio.md

@@ -1,9 +1,8 @@
 ---
 title: Music & Audio
 author: Dan
-type: audio
 date: 2025-12-08T11:46:01+00:00
 comments: false
 ---
 
-This page is coming soon...
+This page is coming soon. 11

layouts/about/single.html

@@ -18,7 +18,7 @@
       </div>
     </div>
 
-    <div class="wide-item">
+    <div class="wide-item manifesto-container">
       <div class="content-screen">
         <div class="screen-display crt">
           > cat manifesto
@@ -48,25 +48,25 @@
             what it could become. There was so much hope.
           </p>
           <p>
-            Unfortunately what it became was an algorithmic slopshop. I fucking
+            Unfortunately what it has become is an algorithmic slopshop. I
-            hate it.
+            fucking hate it.
           </p>
           <p>
             During my formative years I chatted to people from all over the
-            world, I found them through mutual interests, friends of friends,
+            world, I found them through mutual interests, friends of friends of
-            and just spending time exploring. IRC, forums, and MSN messenger
+            friends, and just spending time exploring. IRC, forums, and MSN
-            were our tools; building connections was our mission.
+            messenger were our tools; building connections was our mission.
           </p>
           <p>
             The internet was so inspiring to me I studied it at college and
-            university and it eventually become a prosperous career. I still
+            university and it eventually became a prosperous career. I still
             work with the internet daily.
           </p>
           <p>
-            Unfortunately, socially the internet become a cesspit. Particularly
+            Unfortunately, socially the internet has become a cesspit.
-            in recent years. It's the cyberpunk dystopia of corporations telling
+            Particularly in recent years. It's the cyberpunk dystopia of
-            us what to think, billionaires telling us what to feel, and
+            corporations telling us what to think, billionaires telling us what
-            politicians disregarding everyone.
+            to feel, and politicians disregarding everyone.
           </p>
           <p>
             This website is meant to be a giant fuck you to web 2.0, social
@@ -84,6 +84,11 @@
           <span class="cursor-blink">_</span>
         </div>
       </div>
+      <div class="manifesto-floppy">
+        {{ partial "elements/floppy.html" (dict "title" "They're spying on you"
+        "lines" (slice "" "" "run truth.exe" "" "") "bgColor" "#1a4d8f"
+        "bgColorDark" "#0d2747") }}
+      </div>
     </div>
 
     <div class="content-screen">

layouts/audio/single.html

@@ -0,0 +1,6 @@
+{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
+"main" }}
+<article class="audio-page starfield" id="starfield">
+  <div class="audio-content">123 123</div>
+</article>
+{{ end }}

layouts/partials/elements/floppy.html

@@ -0,0 +1,23 @@
+{{ $title := .title | default "" }} {{ $lines := .lines | default (slice "" ""
+"" "" "") }} {{ $bgColor := .bgColor | default "#1a1a1a" }} {{ $bgColorDark :=
+.bgColorDark | default "#000000" }}
+
+<div
+  class="floppy-disk"
+  style="background: linear-gradient(135deg, {{ $bgColor }} 0%, {{ $bgColorDark }} 100%);"
+>
+  <div class="metal-shutter">
+    <div
+      class="shutter-opening"
+      style="background: linear-gradient(135deg, {{ $bgColor }} 0%, {{ $bgColorDark }} 100%);"
+    ></div>
+  </div>
+  <div class="label">
+    <div class="label-header">{{ $title }}</div>
+    <div class="label-lines">
+      {{ range $lines }}
+      <div class="label-line">{{ . }}</div>
+      {{ end }}
+    </div>
+  </div>
+</div>

layouts/partials/site-scripts.html

@@ -1,18 +1,20 @@
-{{ $script := .Site.Data.webpack_assets.app }}
+<!-- prettier-ignore -->
-{{ with $script.js }}
+{{ $terminalShell := resources.Get "js/terminal.js" }}
-<script src="{{ relURL (printf "%s%s" "dist/" .) }}"></script>
-{{ end }}
-
-{{/* Terminal Scripts Partial */}}
-{{/* This compiles all terminal JS files into a single minified bundle */}}
-{{ $terminal := resources.Get "js/terminal.js" }}
-{{ $lavalamp := resources.Get "js/lavalamp.js" }}
 {{ $init := resources.Get "js/init.js" }}
-{{ $coreCommands := resources.Get "js/commands/core.js" }}
+{{ $commandFiles := resources.Match "js/commands/*.js" }}
-{{ $utilityCommands := resources.Get "js/commands/utility.js" }}
+{{ $subfolderFiles := resources.Match "js/*/*.js" }}
-{{ $navigationCommands := resources.Get "js/commands/navigation.js" }}
+{{ $remaining := resources.Match "js/*.js" }}
-{{ $customCommands := resources.Get "js/commands/custom.js" }}
+{{ $filtered := slice }}
-
+{{ range $remaining }}
-{{ $terminalBundle := slice $terminal $lavalamp $init $coreCommands $utilityCommands $navigationCommands $customCommands | resources.Concat "js/terminal-bundle.js" | resources.Minify | resources.Fingerprint }}
+  {{ $path := .RelPermalink }}
-
+  {{ if and (not (strings.Contains $path "/terminal.js")) (not (strings.Contains $path "/init.js")) }}
-<script src="{{ $terminalBundle.RelPermalink }}" integrity="{{ $terminalBundle.Data.Integrity }}"></script>
+    {{ $filtered = $filtered | append . }}
+  {{ end }}
+{{ end }}
+{{ $allFiles := slice $terminalShell | append $filtered | append $init | append $commandFiles | append $subfolderFiles }}
+{{ $terminalBundle := $allFiles | resources.Concat "js/terminal-bundle.js" | resources.Minify | resources.Fingerprint }}
+<!-- prettier-ignore-end -->
+<script
+  src="{{ $terminalBundle.RelPermalink }}"
+  integrity="{{ $terminalBundle.Data.Integrity }}"
+></script>