added info content to main page

src/routes/+page.svelte

@@ -1,8 +1,96 @@
 <script lang="ts">
     import Header from "$lib/header.svelte";
+
+    var lastIndex = -1;
+    let meImg: string = "common/me/a.webp";
+
+    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;
+    }
+    let setPicture = function() {
+        var pictures = ["a", "b", "c", "e", "f"];
+        var selectedPicture = pictures[getRandom(pictures.length)];
+        meImg = "common/me/" + selectedPicture + ".webp";
+    };
 </script>
 
 <Header />
 
 <h1><i>Moin!</i> ~ welcome to my website :)</h1>
-<p><a href="/projects/projectn5/devlog">projects</a></p>
+<p><a href="/projects/projectn5/devlog">projects</a></p>
+
+<div class="container">
+    <div class="subcontainer">
+        
+    </div>
+    <div class="subcontainer">
+        <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} onclick={setPicture}>↫ 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>
+
+        <p>Here you can find information on things I like sharing. check out my projects, especially the devlog of the game I'm working on!</p>
+
+        <h3>contact me: how to</h3>
+
+        <p>Feel free to contact me via these means:</p>
+
+        <!-- gamedev webring -->
+        <div class="webring-container">
+            <div class="webring-row">
+                <span>〔</span>
+                <a href="https://www.rainbowcemetery.com/devring">GAMEDEV WEBRING</a>
+                <span>〕</span>
+            </div>
+            <div class="webring-row">
+                <span>〔</span>
+                <a href="https://www.rainbowcemetery.com/devring/prev.php?id=0">↫ PREV</a>
+                <a href="https://www.rainbowcemetery.com/devring/rand.php?id=0">RAND</a>
+                <a href="https://www.rainbowcemetery.com/devring/list.php?id=0">LI<i>S</i>T</a>
+                <a href="https://www.rainbowcemetery.com/devring/next.php?id=0">NEXT ↬</a>
+                <span>〕</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+    .subcontainer {
+        max-width: 50%;
+    }
+    .subcontainer:last-child {
+        margin-left: 16px;
+    }
+    .me-img {
+        width: 32px;
+        display: inline-block;
+    }
+    
+    .webring-container {
+        display: flex;
+        width: fit-content;
+        flex-direction: column;
+        align-items: center;
+        margin: 16px auto;
+    }
+    .webring-row a {
+        margin: 0 4px;
+        text-decoration: none;
+    }
+    .webring-row {
+        font-family: 'Space Mono';
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+    }
+</style>