More work on now page

assets/images/books/designing-data.svg

@@ -1,6 +0,0 @@
-<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg">
-  <rect width="150" height="250" fill="#2f4f4f"/>
-  <text x="75" y="125" font-family="Arial, sans-serif" font-size="14" fill="white" text-anchor="middle" writing-mode="tb" transform="rotate(180 75 125)">
-    Designing Data-Intensive Apps
-  </text>
-</svg>

assets/images/books/phoenix-project.svg

@@ -1,6 +0,0 @@
-<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg">
-  <rect width="150" height="250" fill="#1a472a"/>
-  <text x="75" y="125" font-family="Arial, sans-serif" font-size="16" fill="white" text-anchor="middle" writing-mode="tb" transform="rotate(180 75 125)">
-    The Phoenix Project
-  </text>
-</svg>

assets/images/books/rust-book.svg

@@ -1,6 +0,0 @@
-<svg width="150" height="250" xmlns="http://www.w3.org/2000/svg">
-  <rect width="150" height="250" fill="#8b4513"/>
-  <text x="75" y="125" font-family="Arial, sans-serif" font-size="16" fill="white" text-anchor="middle" writing-mode="tb" transform="rotate(180 75 125)">
-    The Rust Programming Language
-  </text>
-</svg>

assets/images/dvds/akira.svg

@@ -1,12 +0,0 @@
-<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="akira-grad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#8b0000;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#2d0000;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="120" height="180" fill="url(#akira-grad)"/>
-  <text x="60" y="100" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#fff" text-anchor="middle">
-    AKIRA
-  </text>
-</svg>

assets/images/dvds/blade-runner.svg

@@ -1,15 +0,0 @@
-<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="br-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#0f0f1e;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="120" height="180" fill="url(#br-grad)"/>
-  <text x="60" y="90" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#00ff9f" text-anchor="middle">
-    BLADE
-  </text>
-  <text x="60" y="110" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#00ff9f" text-anchor="middle">
-    RUNNER
-  </text>
-</svg>

assets/images/dvds/ghost-in-shell.svg

@@ -1,15 +0,0 @@
-<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="gits-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#4a148c;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#1a0a3c;stop-opacity:1" />
-    </linearGradient>
-  </defs>
-  <rect width="120" height="180" fill="url(#gits-grad)"/>
-  <text x="60" y="80" font-family="Arial, sans-serif" font-size="14" fill="#00ffff" text-anchor="middle">
-    GHOST IN
-  </text>
-  <text x="60" y="100" font-family="Arial, sans-serif" font-size="14" fill="#00ffff" text-anchor="middle">
-    THE SHELL
-  </text>
-</svg>

assets/images/dvds/matrix.svg

@@ -1,9 +0,0 @@
-<svg width="120" height="180" xmlns="http://www.w3.org/2000/svg">
-  <rect width="120" height="180" fill="#000"/>
-  <text x="60" y="90" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#0f0" text-anchor="middle">
-    THE
-  </text>
-  <text x="60" y="110" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#0f0" text-anchor="middle">
-    MATRIX
-  </text>
-</svg>

assets/sass/pages/now.scss

@@ -226,6 +226,10 @@ $dark-bg-3: #0a0a0a;
 }
 
 .storage-drive-led {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  transform: translateY(-2px);
   width: 4px;
   height: 4px;
 }
@@ -414,7 +418,6 @@ $dark-bg-3: #0a0a0a;
 .patch-front {
   display: flex;
   align-items: center;
-  padding: 0 10px;
   height: 100%;
   gap: 10px;
 }
@@ -1057,7 +1060,6 @@ $dark-bg-3: #0a0a0a;
   font-size: 28px;
   font-weight: bold;
   color: $dark-bg-1;
-  margin-bottom: 15px;
   padding-bottom: 8px;
   position: relative;
   display: inline-block;
@@ -1319,6 +1321,112 @@ $dark-bg-3: #0a0a0a;
   background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
 }
 
+// Whiteboard Media Items (Books, DVDs)
+.wb-media {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 40px;
+  justify-content: center;
+}
+
+.wb-media-item {
+  position: relative;
+  width: 120px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+
+  // Random rotation for each item
+  &:nth-child(1) {
+    transform: rotate(-2deg);
+  }
+
+  &:nth-child(2) {
+    transform: rotate(3deg);
+  }
+
+  &:nth-child(3) {
+    transform: rotate(-1deg);
+  }
+
+  &:nth-child(4) {
+    transform: rotate(2deg);
+  }
+
+  &:nth-child(5) {
+    transform: rotate(-3deg);
+  }
+
+  &:nth-child(6) {
+    transform: rotate(1deg);
+  }
+
+  &:hover {
+    transform: rotate(0deg) scale(1.2);
+    z-index: 10;
+
+    .wb-media-cover {
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    }
+  }
+}
+
+.wb-media-pin {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: radial-gradient(circle, #888 0%, #444 60%);
+  border-radius: 50%;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.4),
+    inset 0 1px 2px rgba(255, 255, 255, 0.3);
+  z-index: 2;
+
+  // Pin needle
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 2px;
+    background: #222;
+    border-radius: 50%;
+  }
+}
+
+.wb-media-cover {
+  width: 100%;
+  max-width: 120px;
+  height: auto;
+  max-height: 180px;
+  display: block;
+  object-fit: cover;
+  border-radius: 3px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  transition: box-shadow 0.2s ease;
+}
+
+.wb-media-label {
+  position: absolute;
+  bottom: -5px;
+  right: -5px;
+  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+  color: #333;
+  font-family: "Courier New", monospace;
+  font-size: 10px;
+  font-weight: bold;
+  padding: 2px 6px;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  z-index: 3;
+  letter-spacing: 0.5px;
+}
+
 // Bookshelf
 .bookshelf {
   width: 400px;

assets/sass/style.scss

@@ -691,6 +691,19 @@ body {
     top: auto;
     left: auto;
   }
+
+  /* Monitor stand */
+  > .monitor-stand {
+    position: absolute;
+    background: none;
+    box-shadow: none;
+    bottom: -80px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 80px;
+    z-index: -1;
+  }
 }
 
 /* CRT Monitor bezel */
@@ -762,17 +775,6 @@ body {
   }
 }
 
-/* Monitor stand */
-.monitor-stand {
-  position: absolute;
-  bottom: -80px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 120px;
-  height: 80px;
-  z-index: -1;
-}
-
 /* Stand neck */
 .stand-neck {
   width: 40px;

content/now/currently.md

@@ -3,13 +3,13 @@ title: Currently
 width: 500px
 height: 550px
 sticky_notes:
-  - text: "Remember to update blog!"
-    color: "yellow"
-  - text: "New feature idea: dark mode toggle"
+  - text: "Scroll right for more..."
     color: "pink"
+  - text: "This is a mix of a 'now' and a 'uses' page"
+    color: "yellow"
 ---
 
 **Tinkering with:**
 
 - ritual.sh - This website! I've been exploring the indieweb movement and working on this site to carve out my own little digital garden to tend. I'm having a lot of fun making art using pure CSS.
-- After years of using Linux exclusively for servers, Microsoft's relentless [enshittification](https://en.wikipedia.org/wiki/Enshittification) of Windows finally pushed me to migrate my actual workstations. Now running Linux on most machines (currently experimenting with Bazzite) and MacOS on the rest. Desktop customisation is as enjoyable as it was back in the day - maybe more so.
+- After years of using Linux exclusively for servers, Microsoft's relentless [enshittification](https://en.wikipedia.org/wiki/Enshittification) of Windows finally pushed me to migrate my actual workstations. Now running Linux on most machines (currently experimenting with Bazzite) and MacOS on the rest. Customising my desktop has been pretty fun.

content/now/media.md

@@ -0,0 +1,30 @@
+---
+title: Media
+width: 550px
+height: 650px
+sticky_notes:
+  - text: "Check my [audio page](/audio) for what I am listening to!"
+    color: "yellow"
+media_items:
+  - image: "images/books/alchemised.png"
+    title: "Alchemised"
+    current: true
+  - image: "images/dvds/dandadan.png"
+    title: "DAN DA DAN"
+    current: true
+  - image: "images/dvds/assassination_classroom.jpg"
+    title: "Assassination Classroom"
+---
+
+**Reading:**
+
+- Alchemised - SenLinYu
+
+**Watching:**
+
+- DanDaDan - Season 1
+- Assassination Classroom - Season 1
+
+**Playing:**
+
+- Minecraft (Meatballcraft modpack) with friends

layouts/now/single.html

@@ -29,7 +29,8 @@
     ) ) }}
 
     <!-- Whiteboard: Currently -->
-    {{ partial "elements/whiteboard.html" (dict "file" "currently.md" "context" .) }}
+    {{ partial "elements/whiteboard.html" (dict "file" "currently.md" "context"
+    .) }}
 
     <!-- Server Rack 2: Storage & Backup -->
     <!-- prettier-ignore -->
@@ -38,9 +39,9 @@
     "units" (slice 
       (dict "type" "server" "label" "NAS-01" "led1" "green" "led2" "green" "drives" 1 "size" 1) 
       (dict "type" "spacer") 
-      (dict "type" "storage" "label" "SAN-Primary" "drives" 12 "size" 3)
+      (dict "type" "storage" "label" "SAN-Primary" "drives" 20 "size" 3)
       (dict "type" "spacer")
-      (dict "type" "server" "label" "Backup-01" "led1" "blue" "led2" "amber" "drives" 2)
+      (dict "type" "server" "label" "BACKUP-01" "led1" "blue" "led2" "amber" "drives" 1)
       (dict "type" "blank")
     ) ) }}
 
@@ -49,22 +50,16 @@
       <div class="terminal-monitor">
         <div class="terminal-screen">
           <div style="color: #0f0; text-shadow: 0 0 5px #0f0">
-            <p>$ whoami</p>
-            <p>dan@ritual.sh</p>
+            <p>$ neofetch</p>
+            <p><strong>NERV</strong></p>
+            <p>---</p>
+            <p><strong>CPU</strong>: AMD Ryzen 7 9800X3D @ 5.46 Ghz</p>
+            <p><strong>GPU</strong>: AMD Radeon RX 7900 XTX</p>
+            <p><strong>RAM</strong>: 64 GiB @ 6000 MT/S</p>
             <br />
-            <p>$ cat current_stack.txt</p>
-            <p>Languages: JavaScript, TypeScript, Python, Rust (learning)</p>
-            <p>Frontend: React, Vue, Hugo</p>
-            <p>Backend: Node.js, FastAPI</p>
-            <p>DevOps: Docker, Linux, Git</p>
-            <p>Interests: Homelab, Self-hosting, Open Source</p>
-            <br />
-            <p>$ uptime</p>
-            <p>
-              {{ now.Format "15:04:05" }} up 42 days, load average: 0.15, 0.23,
-              0.18
-            </p>
+            <p><strong>OS</strong>: Bazzite</p>
             <br />
+            <p><strong>Usage</strong>: Main gaming and development machine</p>
             <p><span class="cursor-blink">_</span></p>
           </div>
         </div>
@@ -72,25 +67,12 @@
       <div class="desk-surface"></div>
       <div
         class="ambient-light green"
-        style="bottom: 200px; left: 50%; width: 200px; height: 200px"
+        style="bottom: 100px; left: 0; width: 400px; height: 320px; z-index: -1"
       ></div>
     </div>
 
-    <!-- Bookshelf: Currently Reading -->
     <!-- prettier-ignore -->
-    {{ partial "elements/bookshelf.html" (dict
-      "width" "350px"
-      "height" "600px"
-      "title" "Currently Reading"
-      "type" "books"
-      "shelves" 1
-      "items" (slice
-        (dict "image" "images/books/alchemised.png" "title" "Alchemised" "current" true)
-      )
-    ) }}
-
-    <!-- Whiteboard: Daily Drivers -->
-    {{ partial "elements/whiteboard.html" (dict "file" "daily-drivers.md" "context" .) }}
+    {{ partial "elements/whiteboard.html" (dict "file" "media.md" "context" .) }}
 
     <!-- Server Rack 3: Dev & Testing -->
     <!-- prettier-ignore -->
@@ -110,28 +92,25 @@
     )) }}
 
     <!-- Whiteboard: Learning Queue -->
-    {{ partial "elements/whiteboard.html" (dict "file" "learning-queue.md" "context" .) }}
+    {{ partial "elements/whiteboard.html" (dict "file" "learning-queue.md"
+    "context" .) }}
 
     <!-- Server Rack 4: Power & Network -->
     <!-- prettier-ignore -->
-    {{ partial "elements/server-rack.html" (dict "height" "550px" "title"
-    "INFRA-01" "units" (slice (dict "type" "ups" "label" "UPS-Primary"
-    "capacity" "98" "size" 2) (dict "type" "spacer") (dict "type" "switch"
-    "label" "Edge-SW-01" "ports" 24) (dict "type" "server" "label" "Firewall"
-    "led1" "green" "led2" "green" "drives" 1) (dict "type" "server" "label"
-    "DNS/DHCP" "led1" "green" "led2" "blue" "drives" 1) (dict "type" "blank")
-    (dict "type" "blank") ) ) }}
-
-    <!-- DVD Collection -->
-    <!-- prettier-ignore -->
-    {{ partial "elements/bookshelf.html" (dict "width" "400px" "height" "550px"
-    "title" "DVD Collection" "type" "dvds" "shelves" 2 "items" (slice (dict
-    "image" "images/dvds/dandadan.png" "title" "DAN DA DAN" "current" true)
-    (dict "image" "images/dvds/assassination_classroom.jpg" "title"
-    "Assassination Classroom") ) ) }}
+    {{ partial "elements/server-rack.html" 
+      (dict "height" "550px" "title" "INFRA-01" "units" (slice 
+        (dict "type" "ups" "label" "UPS-Primary" "capacity" "98" "size" 2) 
+        (dict "type" "spacer") 
+        (dict "type" "switch" "label" "Edge-SW-01" "ports" 24) 
+        (dict "type" "server" "label" "Firewall" "led1" "green" "led2" "green" "drives" 1) 
+        (dict "type" "server" "label" "DHCP" "led1" "green" "led2" "blue" "drives" 1) 
+        (dict "type" "blank")
+        (dict "type" "blank") 
+      ) ) }}
 
     <!-- Whiteboard: Homelab Architecture -->
-    {{ partial "elements/whiteboard.html" (dict "file" "homelab.md" "context" .) }}
+    {{ partial "elements/whiteboard.html" (dict "file" "homelab.md" "context" .)
+    }}
 
     <!-- Monitor: System Metrics -->
     {{ partial "elements/monitor-screen.html" (dict "width" "400px" "height"

layouts/partials/elements/whiteboard.html

@@ -18,6 +18,25 @@
       {{ end }}
     </div>
     {{ end }}
+    {{ if .Params.media_items }}
+    <div class="wb-media">
+      {{ range $index, $item := .Params.media_items }}
+        {{ if lt $index 6 }}
+          {{ $image := resources.Get $item.image }}
+          {{ if $image }}
+            {{ $resized := $image.Fit "240x360" }}
+            <div class="wb-media-item">
+              <div class="wb-media-pin"></div>
+              <img src="{{ $resized.RelPermalink }}" alt="{{ $item.title }}" class="wb-media-cover" width="{{ $resized.Width }}" height="{{ $resized.Height }}" />
+              {{ if $item.current }}
+                <div class="wb-media-label">NOW</div>
+              {{ end }}
+            </div>
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </div>
+    {{ end }}
   </div>
 </div>
 {{ end }}