Adding about page

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("--start-y", "0px");
-    blob.style.setProperty("--mid1-x", `${Math.random() * 15 - 15}px`);
+
-    blob.style.setProperty("--mid1-y", `${Math.random() * -40 - 40}px`);
+    // Movement waypoints (moving upward - negative Y values)
-    blob.style.setProperty("--mid2-x", `${Math.random() * 20 - 20}px`);
+    blob.style.setProperty(
-    blob.style.setProperty("--mid2-y", `${Math.random() * -80 - 40}px`);
+      "--mid1-x",
-    blob.style.setProperty("--mid3-x", `${Math.random() * 15 - 15}px`);
+      `${(Math.random() * 0.3 - 0.15) * containerWidth}px`,
-    blob.style.setProperty("--mid3-y", `${Math.random() * -60 - 10}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);
+      blobsContainer.appendChild(blob); // Changed
-      updateBlobColors();
     }
   }
 

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(
-      "<span class='info'>Latest Post: </span>" +
+      "<span class='info'>Latest Update: </span>" +
         latestPostTitle.innerText +
         " (" +
         latestPostDate.innerText +

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%;
+  }
+}

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);
+}

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
+  background: #000;
-  color: #0f0; // match your terminal green theme
+  color: #0f0;
   padding: 5px;
   text-align: center;
   font-family: monospace;

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;
+  }
 }

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;
+  }
+}

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;
-  }
-}

config.yml

@@ -14,6 +14,13 @@ minify:
   disableXML: true
   minifyOutput: true
 
+frontmatter:
+  lastmod:
+    - lastmod
+    - :git
+    - date
+    - publishDate
+
 params:
   env: production
 

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.

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
 ---

layouts/about/single.html

@@ -1,6 +1,104 @@
-{{ define "main" }} 1234
+{{ define "header" }}{{ partial "page-header.html" . }}{{ end }} {{ define
+"main" }}
 <article class="about-page">
-  <h1>{{ .Title }}</h1>
+  <div class="about-content">
-  <div class="about-content">{{ .Content }}</div>
+    <div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
+
+    <div class="content-screen">
+      <div class="screen-display crt no-scroll">
+        > about -v <br />
+        <span>Name</span> / <span class="info">Dan (He/Him)</span><br />
+        <span>Age</span> / <span class="info">40-something</span><br />
+        <span>Location</span> / <span class="info">UK 🇬🇧</span><br /><br />
+        <span>Interests</span> /
+        <span class="info">
+          Programming. Music. Movies. Tech. Photography. </span
+        ><br />
+        <span class="cursor-blink">_</span>
+      </div>
+    </div>
+
+    <div class="wide-item">
+      <div class="content-screen">
+        <div class="screen-display crt">
+          > cat manifesto
+          <div style="display: flex; justify-content: center">
+            <pre>
+                                         
+                          ▄▄                    
+                         ██             █▄      
+ ▄              ▄     ▀▀▄██▄           ▄██▄     
+ ███▄███▄ ▄▀▀█▄ ████▄ ██ ██ ▄█▀█▄ ▄██▀█ ██ ▄███▄
+ ██ ██ ██ ▄█▀██ ██ ██ ██ ██ ██▄█▀ ▀███▄ ██ ██ ██
+▄██ ██ ▀█▄▀█▄██▄██ ▀█▄██▄██▄▀█▄▄▄█▄▄██▀▄██▄▀███▀
+                         ██                     
+                        ▀▀                      
+        </pre
+            >
+          </div>
+
+          <p>I hate being told what to do.</p>
+          <p>
+            That's about the long and the short of it. But if you want to know
+            more...
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            Unfortunately what it became was an algorithmic slopshop. I 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,
+            and just spending time exploring. IRC, forums, and MSN 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
+            work with the internet daily.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            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.
+          </p>
+          <p>
+            I want to invoke the feeling of the early internet, with some amount
+            of modernity thrown in.
+          </p>
+          <p>
+            This is my space. Anyone is welcome to hang out if you bring good
+            vibes.
+          </p>
+          <span class="cursor-blink">_</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-screen">
+      <div class="screen-display crt no-scroll">
+        > ./hardware -main <br />
+        PC /
+        <span class="info">Ryzen 7 9800X3D, Radeon RX 7900 XTX, 64gb RAM</span>
+        / <span class="warning">Bazzite &bull; kitty &bull; KDE Plasma</span
+        ><br />
+        Camera / <span class="info">Fuji X-T5</span><br />
+        Audio / <span class="info">Hiby R4 EVA, Fiio FT-1</span> <br /><br />
+        More info coming soon...
+        <br /><span class="cursor-blink">_</span>
+      </div>
+    </div>
+  </div>
 </article>
 {{ end }}

layouts/index.html

@@ -1,10 +1,10 @@
-{{ define "main" }}
+{{ define "header" }}
+<!-- Sir, this is a homepage -->
+{{ end }}{{ define "main" }}
 <div class="wall"></div>
 
 <!-- Neon sign above monitor -->
-<div class="neon-sign">
+{{ partial "elements/neon-sign.html" . }}
-  <div class="neon-text">ritual.sh</div>
-</div>
 
 <!-- Sticky notes -->
 <div class="sticky-note note1">fix bugs</div>
@@ -35,7 +35,7 @@
   </div>
 </div>
 
-<!-- Poster on wall -->
+<!-- Now playing poster on wall -->
 <div class="poster">
   <div class="poster-image" id="posterImage">
     <script src="/js/nowplaying.js"></script>
@@ -66,77 +66,6 @@
 <!-- Desk -->
 <div class="desk"></div>
 
-<!-- Curved cables on desk using SVG -->
-<svg
-  class="cable-svg"
-  style="position: absolute; bottom: 8%; left: 15%; width: 200px; height: 150px"
->
-  <path
-    d="M 20 10 Q 40 60, 80 120"
-    stroke="#222"
-    stroke-width="3"
-    fill="none"
-  />
-</svg>
-<svg
-  class="cable-svg"
-  style="
-    position: absolute;
-    bottom: 8%;
-    right: 20%;
-    width: 180px;
-    height: 140px;
-  "
->
-  <path
-    d="M 150 20 Q 100 70, 40 130"
-    stroke="#1a1a1a"
-    stroke-width="3"
-    fill="none"
-  />
-</svg>
-<svg
-  class="cable-svg"
-  style="position: absolute; bottom: 8%; left: 28%; width: 220px; height: 160px"
->
-  <path
-    d="M 10 30 Q 80 40, 160 140"
-    stroke="#252525"
-    stroke-width="2.5"
-    fill="none"
-  />
-</svg>
-<svg
-  class="cable-svg"
-  style="
-    position: absolute;
-    bottom: 8%;
-    right: 35%;
-    width: 150px;
-    height: 120px;
-  "
->
-  <path
-    d="M 130 15 Q 70 50, 20 110"
-    stroke="#2a2a2a"
-    stroke-width="2.5"
-    fill="none"
-  />
-</svg>
-<svg
-  class="cable-svg"
-  style="position: absolute; bottom: 8%; left: 42%; width: 160px; height: 130px"
->
-  <path
-    d="M 30 20 Q 60 80, 120 125"
-    stroke="#1f1f1f"
-    stroke-width="2"
-    fill="none"
-  />
-</svg>
-
-<div class="monitor-stand-small"></div>
-
 <!-- Desk monitor -->
 <div class="secondary-screen desk-monitor">
   <div class="screen-display large crt">
@@ -253,7 +182,7 @@
 <div class="widget router"></div>
 <div class="widget hard-drive"></div>
 
-{{ partial "lavalamp.html" . }}
+{{ partial "elements/lavalamp.html" . }}
 
 <!-- CRT Monitor -->
 <div class="crt-container">
@@ -413,6 +342,6 @@ $pages "Lastmod" "desc") }}
 <div id="latest-post">
   <div id="latest-post-link">{{ .Permalink }}</div>
   <div id="latest-post-title">{{ .Title }}</div>
-  <div id="latest-post-date">{{ .Date.Format "Jan 2, 2006" }}</div>
+  <div id="latest-post-date">{{ .Lastmod.Format "Jan 2, 2006" }}</div>
 </div>
 {{ end }} {{ end }}

layouts/partials/elements/lavalamp.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div>
   <svg style="position: absolute; width: 0; height: 0">
     <defs>
       <filter id="goo">
@@ -6,7 +6,11 @@
         <feColorMatrix
           in="blur"
           mode="matrix"
-          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
+          values="
+            1 0 0 0 0  
+            0 1 0 0 0  
+            0 0 1 0 0  
+            0 0 0 18 -7"
           result="goo"
         />
         <feComposite in="SourceGraphic" in2="goo" operator="atop" />
@@ -17,6 +21,8 @@
     <div class="lava-lamp-container">
       <div class="lamp-cap"></div>
       <div class="lava-lamp" id="lavaLamp">
+        <div class="blobs-container"></div>
+        <!-- NEW: wrapper for blobs -->
         <div class="lamp-text">ABOUT</div>
       </div>
       <div class="lamp-base"></div>

layouts/partials/elements/neon-sign.html

@@ -0,0 +1,3 @@
+<div class="neon-sign">
+  <div class="neon-text">ritual.sh</div>
+</div>

layouts/partials/site-navigation.html

@@ -1,22 +1,9 @@
-<nav role="navigation" style="display:none;">
+<nav role="navigation">
-	<div>
+  <div>
-		<a href="{{ .Site.BaseURL }}">
+    <a href="/">
-			{{ .Site.Title }}
+      <div class="neon-sign">
-		</a>
+        <div class="neon-text">ritual.sh</div>
-		<div>
+      </div>
-			{{ partial "i18nlist.html" . }}
+    </a>
-			{{ if .Site.Menus.main }}
+  </div>
-			<ul>
+</nav>
-				{{ range .Site.Menus.main }}
-				<li>
-					<a href="{{ .URL }}" title="{{ .Name }} page">
-						{{ .Name }}
-					</a>
-				</li>
-				{{ end }}
-			</ul>
-			{{ end }}
-			{{ partial "social-follow.html" . }}
-		</div>
-	</div>
-</nav>