From 83d4ec4a06ae94fd527bffc066ed8a9212f16328 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 25 Aug 2025 11:35:00 +0200
Subject: [PATCH] added quote to main page

---
 src/routes/+page.svelte | 69 +++++++++++++++++++++++++++++++++++------
 src/routes/quotes.ts    | 18 ++++++-----
 2 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c741316..9098ebe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,31 +1,40 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import Content from "$lib/content.svelte";
     import GamedevWebring from "$lib/webrings/gamedev.svelte";
     import Gallery from "$lib/lists/gallery-entry.svelte";
     import LinkList from "$lib/link-list.svelte";
+    import { quotes, type Quote } from "./quotes";
 
     import { posts } from "$lib/devlog-posts";
 
     var lastIndex = -1;
-    let meImg: string = "common/me/a.webp";
+    let meImg: string = $state("common/me/a.webp");
+    let marqueeQuote: Quote = $state({
+        author: "",
+        content: "",
+        source: "",
+    });
 
-    $: setPicture();
+    onMount(() => {
+        setPicture();
+        setMarqueeText();
+    });
 
-    function getRandom(to: number): number {
-        var buf = new Uint8Array(1);
-        crypto.getRandomValues(buf);
-        if (buf[0] % to == lastIndex) {
-            return getRandom(to);
-        }
-        lastIndex = buf[0] % to;
-        return buf[0] % to;
+    function getRandom(max: number): number {
+        return Math.floor(Math.random() * max);
     }
+
     let setPicture = function() {
         var pictures = ["a", "b", "c", "e"];
         var selectedPicture = pictures[getRandom(pictures.length)];
         meImg = "common/me/" + selectedPicture + ".webp";
     };
 
+    let setMarqueeText = function() {
+        marqueeQuote = quotes[getRandom(quotes.length)];
+    };
+
     let latestDevlogDate = posts[0].date.substring(0, 7).replace("/", "-") + "-" + posts[0].date.substring(7);
 </script>
 
@@ -66,6 +75,11 @@
             ]}/>
         </div>
         <div class="subcontainer">
+            <div class="quote-marquee-container">
+                {@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
+                {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
+            </div>
+
             <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
 
             <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and rarely a hard-working student in Northern Germany. Welcome to my webpage!</p>
@@ -97,6 +111,10 @@
     </div>
 </Content>
 
+{#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
+    <span class="quote-marquee" aria-hidden="{ignoreA11y}"><i>{quote.content}</i> – {quote.author} [{quote.source}] ***</span>
+{/snippet}
+
 <style>
     .container {
         display: flex;
@@ -121,4 +139,35 @@
         -webkit-text-fill-color: transparent;
         padding-bottom: 12px;
     }
+
+    .quote-marquee-container {
+        width: 100%;
+        background-color: var(--color-background-highlight);
+        display: flex;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .quote-marquee {
+        animation: marquee-content 10s linear infinite;
+        font-family: 'Space Mono';
+        font-size: 1rem;
+        font-weight: 600;
+        padding: 6px 6px;
+    }
+
+    .quote-marquee-container:hover .quote-marquee {
+        animation-play-state: paused;
+    }
+
+    @keyframes marquee-content {
+        /* Element one fully ON screen at left-edge of container. */
+        from {
+            transform: translateX( 0% );
+        }
+        /* Element one fully OFF screen (just beyond left-ledge of container). */
+        to {
+            transform: translateX( -100% );
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/routes/quotes.ts b/src/routes/quotes.ts
index 6c2e881..0626dff 100644
--- a/src/routes/quotes.ts
+++ b/src/routes/quotes.ts
@@ -2,7 +2,6 @@ export interface Quote {
     content: string;
     author: string;
     source: string;
-    link: string;
 }
 
 export let quotes: Quote[] = [
@@ -10,12 +9,15 @@ export let quotes: Quote[] = [
         content: "If you live a life in letters you might never really feel alive",
         author: "Pierce Fulton",
         source: "Life in Letters",
-        link: "https://youtu.be/qIXK5hc7DNQ",
     },
-    // {
-    //     content: "",
-    //     author: "",
-    //     source: "",
-    //     link: "",
-    // },
+    {
+        content: "Life's a game made for everyone, and love is the prize",
+        author: "Avicii & Aloe Blacc",
+        source: "Wake Me Up",
+    },
+    {
+        content: "We've come a long way since that day, and we will never look back at the faded silhouette",
+        author: "Avicii & Salem Al Fakir",
+        source: "Silhouettes",
+    },
 ];
\ No newline at end of file