bro i REALLY gotta learn how to do micro commits

12 files changed, 109 insertions, 67 deletions

diff --git a/_includes/base.njk b/_includes/base.njk
index 6362473..0af1675 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -37,8 +37,7 @@
 	<footer>
 		<div class="social">
 			{%- for s in site.footerLinks -%}
-			<a no-transition href="{{ s.href }}" class="tooltip" target="_blank">{{ s.name }}<span class="tooltiptext">{{
-					s.tooltip }}</span></a>
+			<a no-transition href="{{ s.href }}" target="_blank" class="morph" data-alt="{{ s.tooltip }}">{{ s.name }}</a>
 			{%- endfor -%}
 		</div>
 	</footer>
@@ -72,6 +71,7 @@
 		</defs>
 	</svg>
 	<script src="{{ " /assets/js/transitions.js" | url}}"></script>
+	<script src="{{ " /assets/js/morph.js" | url}}"></script>
 </body>
 
 </html>
diff --git a/_includes/blog-list.njk b/_includes/blog-list.njk
new file mode 100644
index 0000000..8c1a6ed
--- /dev/null
+++ b/_includes/blog-list.njk
@@ -0,0 +1,6 @@
+<div> {% for post in collections.blog | reverse %}
+    <a href="{{ post.url }}" class="blogpost">
+        <h3>{{ post.data.title }}</h3>
+        <small>{{ post.date | date }}<span style="float:right;">{{ post.data.keywords }} | {{ post.url }}</span></small>
+    </a><br> {% endfor %}
+</div>
diff --git a/_layouts/post.njk b/_layouts/post.njk
index 335a6c3..2f5e393 100644
--- a/_layouts/post.njk
+++ b/_layouts/post.njk
@@ -11,6 +11,6 @@
   </div>
 	<hr>
 	<div class="post-info">
-		<small>{{ page.date | date }}</small>
+		<small>{{ page.date | date }} | {{ keywords }}</small>
 	</div>
 {% endblock %}
diff --git a/assets/css/main.css b/assets/css/main.css
index cb03aaf..4b99331 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -61,27 +61,6 @@ a[target="_blank"]::after {
     content: "}";
 }
 
-.tooltip {
-	position:relative;
-	display:inline-block;
-}
-
-.tooltiptext {
-	visibility: hidden;
-	color: var(--base);
-	background: var(--text);
-	text-align: center;
-	position: absolute;
-	z-index: 1;
-	top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-	min-width: 100%;
-}
-.tooltip:hover .tooltiptext {
-	visibility: visible;
-}
-
 a.active,
 a:focus,
 a:hover {
@@ -94,7 +73,7 @@ header {
     background: repeating-linear-gradient(45deg,var(--base) 0rem,var(--base) 1rem,var(--base-2) 1rem,var(--base-2) 2rem);
     border: var(--base-2) 1px solid;
     padding-inline: 0.4rem;
-    max-width: 110ch;
+    max-width: 90ch;
     height: 4rem;
     margin-inline: auto;
     display: flex;
@@ -141,7 +120,7 @@ header li:first-child a::after {display: none;}
 */
 
 main {
-    max-width: 100ch;
+    max-width: 80ch;
     margin-inline: auto;
 }
 
@@ -270,3 +249,8 @@ blockquote {
 	padding-left: 10px;
 	color: var(--code-text);
 }
+
+.morph {
+	min-width: 12ch;
+	text-align: center;
+}
diff --git a/assets/js/morph.js b/assets/js/morph.js
new file mode 100644
index 0000000..728ff1f
--- /dev/null
+++ b/assets/js/morph.js
@@ -0,0 +1,43 @@
+const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@._-";
+
+function morph(element, target) {
+    clearInterval(element._timer);
+
+    const start = element.textContent;
+    const length = Math.max(start.length, target.length);
+
+    let progress = 0;
+
+    element._timer = setInterval(() => {
+        progress += 0.05;
+
+        const currentLength = Math.round(
+            start.length + (target.length - start.length) * progress
+        );
+
+        let output = "";
+
+        for (let i = 0; i < currentLength; i++) {
+            if (progress > i / currentLength + 0.2 && target[i]) {
+                output += target[i];
+            } else {
+                output += CHARS[Math.floor(Math.random() * CHARS.length)];
+            }
+        }
+
+        element.textContent = output;
+
+        if (progress >= 1) {
+            clearInterval(element._timer);
+            element.textContent = target;
+        }
+    }, 15);
+}
+
+for (const link of document.querySelectorAll(".morph")) {
+    const original = link.textContent;
+    const alternate = link.dataset.alt;
+
+    link.addEventListener("mouseenter", () => morph(link, alternate));
+    link.addEventListener("mouseleave", () => morph(link, original));
+}
diff --git a/assets/js/transitions.js b/assets/js/transitions.js
index e6d7c85..3955a67 100644
--- a/assets/js/transitions.js
+++ b/assets/js/transitions.js
@@ -7,14 +7,14 @@ function transitionOut(callback) {
     document.body.style.filter = "url(#transition)"
     const src = new Number(displacement.getAttribute("scale"));
     noise.setAttribute("seed",Math.random() * 1000)
-    if (src < 1000) {
-        displacement.setAttribute("scale", src + 10 + src);
+    if (src < 100) {
+        displacement.setAttribute("scale", src + 20 + src);
         nextFunc = () => transitionOut(callback)
         requestAnimationFrame(nextFunc)
     } else {
         setTimeout(() =>{
             document.body.style.filter = ""
-        },10000);
+        },1000);
         callback()
     }
 }
@@ -52,3 +52,11 @@ if (noise && displacement) {
 } else {
     console.log("Can't do transitions!!")
 }
+
+// for when going forwards or back
+window.addEventListener("pageshow", (e) => {
+    if (e.persisted) {
+        displacement.setAttribute("scale", 200);
+        transitionIn();
+    }
+});
diff --git a/content/blog.md b/content/blog.md
index 016afa9..cf039a5 100644
--- a/content/blog.md
+++ b/content/blog.md
@@ -2,9 +2,4 @@
 title: Blog
 layout: page
 ---
-<div> {% for post in collections.blog | reverse %}
-    <a href="{{ post.url }}" class="blogpost">
-        <h3>{{ post.data.title }}</h3>
-        <small>{{ post.date | date }}<span style="float:right;">{{ post.url }}</span></small>
-    </a><br> {% endfor %}
-</div>
+{% include "blog-list.njk" %}
diff --git a/content/blog/11ty.md b/content/blog/11ty.md
index 5e837a7..a063639 100644
--- a/content/blog/11ty.md
+++ b/content/blog/11ty.md
@@ -1,6 +1,6 @@
 ---
 title: This website now uses 11ty!
-keywords: new 11ty
+keywords: 11ty web js html
 date: 2026-03-14
 ---
 
diff --git a/content/blog/cbin.md b/content/blog/cbin.md
index e31767d..815454e 100644
--- a/content/blog/cbin.md
+++ b/content/blog/cbin.md
@@ -1,6 +1,6 @@
 ---
 title: Made a Pastebin site :P
-keywords: pastebin bin paste cbin
+keywords: pastebin c
 date: 2026-05-07
 ---
 
diff --git a/content/blog/pipedals.md b/content/blog/pipedals.md
index ab07957..abd6704 100644
--- a/content/blog/pipedals.md
+++ b/content/blog/pipedals.md
@@ -1,6 +1,6 @@
 ---
 title: Dead simple digital guitar pedals in C
-keywords: guitar pedal c simple
+keywords: guitar c dsp audio
 date: 2026-05-25
 ---
 
diff --git a/content/index.md b/content/index.md
index 0ddb9da..cf268c3 100644
--- a/content/index.md
+++ b/content/index.md
@@ -7,20 +7,13 @@ title: "Hey, I'm Spelis!"
 
 Hey! I am a student from Sweden, I like to write software and play bass guitar.
 
-I like to build things simple, fast and easy to understand. I spend a lot of time playing with low-level programming, Linux, and whatever catches my eye that week. I write most of my projects in C. When I'm not coding I spend most of my time practicing bass and learning songs I like.
+I like to build things that are simple, fast and easy to understand. I spend a lot of time playing with low-level programming, Linux, and whatever catches my eye that week. I write most of my projects in C. When I'm not coding I spend most of my time practicing bass and learning songs I like.
 
-Studying Computer Science and IT at NTI in Luleå, Sweden.
+## Things I like building
 
-## Technologies
-
-While I'm always learning new things (and there's more I already know), these are the technologies I'm most comfortable with:
-
-* C
-    * Raylib
-    * POSIX/Linux development
-* Java
-    * FabricMC mod development
-    * PaperMC plugin development
+* Low-level software in C
+* Minecraft mods and plugins
+* Whatever I can come up with 
 
 ---
 
@@ -39,15 +32,10 @@ This site is rated <a href="https://www.mabsland.com/Adoption.html" target="_bla
 
 ---
 # Blog
-<div> {% for post in collections.blog | reverse %}
-    <a href="{{ post.url }}" class="blogpost">
-        <h3>{{ post.data.title }}</h3>
-        <small>{{ post.date | date }}<span style="float:right;">{{ post.url }}</span></small>
-    </a><br> {% endfor %}
-</div>
+{% include "blog-list.njk" %}
 
 ---
 
 <span>Location: <code>Northern Sweden</code></span>
 
-<span>Age: <code class="my-age"></code> years old.</span>
+<span>Age: <code class="my-age">{{ age }}</code> years old.</span>
diff --git a/eleventy.config.mjs b/eleventy.config.mjs
index 58fad4e..0ed461a 100644
--- a/eleventy.config.mjs
+++ b/eleventy.config.mjs
@@ -77,16 +77,34 @@ export default function(eleventyConfig) {
 		},
 	});
 
-  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
-    widths: [200, "auto"],
-    htmlOptions: {
-			imgAttributes: {
-				loading: "lazy",
-				decoding: "async",
-			},
-			pictureAttributes: {}
-		},
-  });
+	eleventyConfig.addGlobalData("age", () => {
+    const birthday = new Date("2010-05-11");
+
+    const today = new Date();
+
+    let age = today.getFullYear() - birthday.getFullYear();
+
+    if (
+        today.getMonth() < birthday.getMonth() ||
+        (today.getMonth() === birthday.getMonth() &&
+         today.getDate() < birthday.getDate())
+    ) {
+        age--;
+    }
+
+    return age;
+	});
+
+  // eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+  //   widths: [200, "auto"],
+  //   htmlOptions: {
+  // 	imgAttributes: {
+  // 		loading: "lazy",
+  // 		decoding: "async",
+  // 	},
+  // 	pictureAttributes: {}
+  // },
+  // });
 
   eleventyConfig.addBundle("css", {
     toFileDirectory: "assets/css/bundles/",