added new devlog and changed DevlogPost so that pages and previews are grouped by year

src/lib/devlog-posts.ts

@@ -1,103 +1,103 @@
 export interface DevlogPost {
     title: string;
     subtitle: string;
-    date: number;
-    banner?: string;
+    date: string;
 };
 
 export const posts: DevlogPost[] = [
+    {
+        title: "Remeshing and Recolouring",
+        subtitle: "2025-07-13",
+        date: "2025/0713",
+    },
     {
         title: "Reboot",
         subtitle: "2025-05-23",
-        date: 20250523,
+        date: "2025/0523",
     },
     {
         title: "The Making of a Protagonist, Part IV",
         subtitle: "2025-04-27",
-        date: 20250427,
+        date: "2025/0427",
     },
     {
         title: "Refactoring",
         subtitle: "2025-03-16",
-        date: 20250316,
-        banner: "fishmonger.webp",
+        date: "2025/0316",
     },
     {
         title: "The Making of a Protagonist, Part III",
         subtitle: "2025-02-03",
-        date: 20250203,
-        banner: "lauras-imposing.webp",
+        date: "2025/0203",
     },
     {
         title: "The Making of a Protagonist, Part II",
         subtitle: "2024-12-22",
-        date: 20241222,
-        banner: "laura-header.webp",
+        date: "2024/1222",
     },
     {
         title: "The Making of a Protagonist, Part I",
         subtitle: "2024-11-27",
-        date: 20241127,
-        banner: "hands.webp",
+        date: "2024/1127",
     },
     {
         title: "Visual Update",
         subtitle: "2024-11-03",
-        date: 20241103,
+        date: "2024/1103",
     },
     {
         title: "Returnal Update",
         subtitle: "2024-10-12",
-        date: 20241012,
+        date: "2024/1012",
     },
     {
         title: "WHERE HAVE I BEEN?? Update",
         subtitle: "2024-07-13",
-        date: 20240713,
+        date: "2024/0713",
     },
     {
         title: "Behind-The-Scenes Update",
         subtitle: "2024-04-01",
-        date: 20240401,
+        date: "2024/0401",
     },
     {
         title: "Arena Update",
         subtitle: "2024-03-24",
-        date: 20240324,
+        date: "2024/0324",
     },
     {
         title: "2024-03-23",
         subtitle: "",
-        date: 20240323,
+        date: "2024/0323",
     },
     {
         title: "2024-03-12",
         subtitle: "",
-        date: 20240312,
+        date: "2024/0312",
     },
     {
         title: "2024-02-10",
         subtitle: "",
-        date: 20240210,
+        date: "2024/0210",
     },
     {
         title: "December 2023",
         subtitle: "",
-        date: 202312,
+        date: "2023/12",
     },
     {
         title: "November 2023",
         subtitle: "",
-        date: 202311,
+        date: "2023/11",
     },
     {
         title: "October 2023",
         subtitle: "",
-        date: 202310,
+        date: "2023/10",
     },
     {
         title: "September 2023",
         subtitle: "",
-        date: 202309,
+        date: "2023/09",
     },
 ];

src/lib/video.svelte

@@ -6,7 +6,9 @@
     } = $props();
 </script>
 
-<video controls class="video-block">
+<!-- Muted video element -->
+
+<video controls class="video-block" muted>
     <source src={src} type="video/mp4">
     Video is broken, sorry!
 </video>

src/routes/projects/projectn5/devlog/+page.svelte

@@ -25,11 +25,7 @@
 
 {#snippet devlogPost({post}: {post: DevlogPost})}
 <a href="/projects/projectn5/devlog/{post.date}/" class="post">
-    {#if post.banner}
-    <img class="post-img notched" src="/projects/projectn5/devlog/{post.date}/{post.banner}">
-    {:else}
     <img class="post-img notched" src="/projects/projectn5/devlog/previews/{post.date}.webp">
-    {/if}
     <div class="post-text-container">
         <p class="post-date">{post.subtitle}</p>
         <p class="post-title">{post.title}</p>

src/routes/projects/projectn5/devlog/2025/0713/+page.svelte

@@ -0,0 +1,127 @@
+<script>
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import TableOfContents from "$lib/table-of-contents.svelte";
+    import Video from "$lib/video.svelte";
+</script>
+
+<svelte:head>
+    <title>Remeshing and Recolouring | denizk0461</title> 
+</svelte:head>
+
+<BannerTitleAlt title="Remeshing and Recolouring" subtitle="Project N5 Devlog" date="2025-07-13" banner="../../previews/2025/0713.webp" />
+
+<ContentSidebar>
+
+    <TableOfContents slot="side-left" />
+
+    <div slot="main">
+
+        <p><i>Why are we still here? Just to suffer?</i></p>
+
+        <p>Note: the screenshots here are covering almost 3 months of work, and they're not in chronological order either. Some details from older versions that are intended to be kept will be missing in newer versions.</p>
+
+        <h2 id="mesh">Mesh Improvements</h2>
+        <h3 id="head">Skull Remeshing</h3>
+
+        <p>When I was at uni recently, I decided to recreate Laura's head from scratch. The intention was to clean up the messy topology and just make it look a bit better. This time around, I didn't use a sphere as the base, but rather started from a single vertex and extruded out vertices manually to tailor it exactly to what I wanted. Here's the result, which I'm actually quite proud of:</p>
+
+        <Video src="headmesh.mp4" />
+
+        <p>Compare this to the old head mesh:</p>
+
+        <img src="head_old.webp" alt="A screenshot of a bust in Blender, displayed in edit mode. The topology is messy because the vertices are not evenly distributed.">
+
+        <p>The old head was quite messy in topology; it's an artifact from Laura v1. There, I initially designed the head to not have any kind of face, but later I added eyes, a nose, refined the eye shape, and most recently, I added some shape around the eyes (the eyes are inset a bit and the eyebrows are comparatively further forward to follow the shape of an actual skull). All these edits required more edge loops and vertices than I had originally planned, which is the root cause for this mess of vertices.</p>
+
+        <p>The new head was designed from the ground up for exactly what I need. The entire head is made of easily-editable edge loops based on quads, except for one further cut along the nose to give it a bit more shape. I deemed this addition acceptable and even preferrable over slicing an entire new edge loop into the head.</p>
+
+        <p>With the head remeshing came more changes: I edited the shape of Laura's head. I made it rounder for one, but I also edited her jawline and made the head shorter in general.</p>
+
+        <p>I found I struggled with hairstyles because her forehead was quite massive compared to the rest of her head. It didn't lend itself to the style I wanted to achieve. Thus, I edited the dimensions, and now it looks a lot better, I find.</p>
+
+        <h3 id="hair-shading">Sharper (get it?) Hair Shading</h3>
+
+        <p> I figured out yesterday how to improve the shading of Laura's hair significantly!</p>
+
+        <p>Here's something that bothered me: her hair consisted of essentially rectangular tubes (in Blender: a path with a circle consisting of 4 vertices wrapped around it, vertices set to 'vector' to turn them into corners). Because it was smoothly-shaded, any shader would try to wrap around the light as if the strands were circular/tubular. This meant that the sides were far darker than I would have liked.</p>
+
+        <p>I managed to 'fix' this (depending on your perspective on the issue) by marking the sides of all strands as sharp edges. This now means that the strands are shaded separately at the front and the back, respective, with a sharp edge where they previously transitioned smoothly.</p>
+
+        <img src="hair_shading.webp" alt="An in-engine comparison of the shading between the old hair with smooth edges (left) and the new hair with sharp edges (right).">
+
+        <p>The left hair is the old style, the right is the new one. Notice how the strands are much more distinct on the left because of their darker outlines (shadows).</p>
+
+        <p>The idea came to me while I was experimenting with new hair styles and enabled flat shading on the strands to see their flow better.</p>
+        
+        <h2 id="makeover">Continuing the Makeover</h2>
+        <h3 id="hair-style">Hairdressing</h3>
+
+        <p>I played around with Laura's hair a little bit recently.</p>
+
+        <p>More importantly, I figured out her ponytail! Previously, I created a sort of 'banana' and extruded individual strands from it to create a more hair-like appearance.</p>
+
+        <img src="ponytail_old.webp" alt="The old ponytail style.">
+
+        <p>However, I didn't like this very much, because it... well, I just think it looked bad. What I did instead is something that was actually inspired by a girl's hairstyle I saw on a bus:</p>
+
+        <img src="ponytail_new.webp" alt="The new ponytail style. Left view is unshaded, right view displays a cel shader.">
+
+        <p>The shadow effects are – once again – created by sharp edges! It actually works very similarly to the tied-up hair on the back of her head.</p>
+
+        <img src="hair_back.webp" alt="An unshaded view of the back of Laura's head, with her tied-up hair at the centre.">
+
+        <p>This effect I made by creating a sphere, selecting every second edge loop, scaling it down to create a spiky effect (that is mitigated by smooth shading) and then marking the scaled-down edges as sharp.</p>
+
+        <h3 id="eyes">Those Damn Eyes</h3>
+
+        <p>I decided to recolour Laura's right eye. Previously, it was a shade of red to match the rest of her outfit. Instead, though, I decided to go the complete opposite: it now looks borderline out of place against her colour palette, and for good reason.</p>
+
+        <img src="eyes.webp" alt="A comparison of Laura's eyes. Left is the old style with a red eye, right is the new style with a blue eye.">
+
+        <p>It's blue and cold grey to display a discrepancy in her new body parts. That colour scheme will be used for her right arm, too, as well as some robots and environmental pieces. It shows how, even though Laura will find herself in her home world, the world around her has changed beyong recognition. This change, this unfamiliarity reflects back on her.</p>
+
+        <p>I'll also texture them once I finish modelling to make them look more interesting.</p>
+
+        <p>Due to a non-applied mirror modifier, Laura's eyes look identical (which is to say, the right eye is organic) on some pictures here. This will change, though.</p>
+
+        <h3 id="shoes">Shoe Shopping</h3>
+
+        <p>Laura finally has (almost) permanent shoes!!</p>
+
+        <img src="shoes_0.webp" alt="A comparison of Laura's old, temporary boots (left) and her new sneakers (right).">
+
+        <p>In v1, I intended to give Laura boots. However, I wasn't happy with how they looked. Furthermore, boots just didn't quite fit the style I wanted to go for. So instead, I modelled some sneakers, of course gathering reference from a shopping website.</p>
+
+        <img src="shoes_1.webp" alt="A close-up of Laura's new sneakers, with orange colour added to the bottoms.">
+
+        <h3 id="misc-style">Minor Adjustments</h3>
+
+        <p>Further things I changed:</p>
+        <ul class="styled-list">
+            <li>Laura's hoodie has a more vibrant red colour now.</li>
+            <li>Her trousers are wider now. She has a much more unique silhouette now than she did in v1!</li>
+            <li>The trousers also have cargo pockets now.</li>
+            <li>The shape of her eyelashes has been refined.</li>
+        </ul>
+
+        <p>Her right (mechanical) arm is still not in place, however. I've been struggling with ideas for it.</p>
+
+        <p>Actually, I've not thought about it enough recently. I should change that.</p>
+
+        <h2 id="zipline">Sway to and fro like little insects!</h2>
+
+        <p>Gameplay-wise, I also made some progress: there's now ziplining in the game! The idea is that Laura will be able to use her right arm (which doesn't feel rope burn like her organic left arm would) to hook onto ropes and zip across (intended) parts of the levels.</p>
+
+        <Video src="ziplining.mp4" />
+
+        <p>In the video, Laura ziplines <i>up</i> and even does a flip, which won't be in the game. It's intended to go downhill only instead, to travel between two platforms in a non-reversible way. This loop was just a test.</p>
+
+        <h2 id="laura">Laura as of Today</h2>
+
+        <p>and to end this devlog, here's how Laura currently looks in her entirety:</p>
+
+        <img src="laura.webp" alt="A full-body screenshot of Laura.">
+
+    </div>
+</ContentSidebar>