computer format

src/src/content/username/username.md

@@ -1,7 +1,7 @@
 ---
 title: The tale of trueberryless 
-description: From code to creativity — discover the story behind the username and more.
-img: username.jpg
+description: From code to creativity — discover the story behind the username.
+img: username.webp
 img_alt: Dark image with text trueberryless.
 tags:
   - Story time
@@ -19,7 +19,7 @@ That’s when **The Big Change** began.
 
 Day 1: I sat down, full of ambition, and started brainstorming. My criteria were clear: lowercase, short, simple, and absolutely untaken. How hard could it be, right? Turns out, harder than it sounds. Every decent idea was already taken. I Googled and cross-checked usernames until my brain felt like mush.
 
-Day 2: My coworkers started noticing something was up. “You’ve been staring at your screen for a while,” one of them said. Little did they know, I wasn’t working on tasks—I was deep in the username trenches. I tried everything: “berrythis,” “lessberry,” “truefruit,” “falsenut.” Nothing felt right. Nothing was me.
+Day 2: My coworkers started noticing something was up. “You’ve been staring at your screen for a while,” one of them said. Little did they know, I wasn’t working on tasks—I was deep in the username trenches. I tried everything: “berrythis,” “lessberry,” “truefruit,” “falsenut.” Nothing felt right. Nothing was _me_.
 
 Day 3: By this point, I was questioning everything. Why was this so hard? Why did I care so much? And then, out of nowhere, it hit me: **trueberryless**.
 

src/src/pages/about.astro

@@ -62,6 +62,13 @@ import holiday from '../assets/about/about-1.jpg';
           </p>
 				</div>
 			</section>
+			<section>
+				<h2 class="section-title">Origin of trueberryless</h2>
+				<div class="content">
+					<p>
+            Ever wondered how I came up with my unique username? It’s a story of boredom, ambition, and three long days of brainstorming during my 2022 internship. Curious about the journey? <a href="/username/">Read the full tale here.</a>
+          </p>
+			</section>
 		</main>
 
 		<ContactCTA />

src/src/pages/username.astro

@@ -3,20 +3,20 @@ import { getEntry } from 'astro:content';
 import type { ImageMetadata } from 'astro';
 import { Image } from 'astro:assets';
 
-import BaseLayout from '../../layouts/BaseLayout.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
 
-import ContactCTA from '../../components/ContactCTA.astro';
-import Hero from '../../components/Hero.astro';
-import Icon from '../../components/Icon.astro';
-import Pill from '../../components/Pill.astro';
+import ContactCTA from '../components/ContactCTA.astro';
+import Hero from '../components/Hero.astro';
+import Icon from '../components/Icon.astro';
+import Pill from '../components/Pill.astro';
 import { render } from 'astro:content';
 
 const entry = await getEntry('username', 'username');
 const { Content } = await render(entry);
 
 const imagePath = "/src/assets/username/" + entry.data.img;
 
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/username/*.{jpeg,jpg,png,gif}');
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/username/*.{jpeg,jpg,png,gif,webp}');
 if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist in glob: "src/assets/username/*.{jpeg,jpg,png,gif}"`);
 ---