part of skeleton

src/About.svelte

@@ -0,0 +1 @@
+uwu

src/App.svelte

@@ -0,0 +1,40 @@
+<script>
+	import Router from 'svelte-spa-router';
+	import routes from './routes';
+    import Title from './components/Title.svelte';
+    import Navbar from './components/Navbar.svelte';
+	import { onMount } from 'svelte';
+
+	let showTitle = true;
+
+	function handleScroll() {
+        if (window.scrollY > 50) {
+            showTitle = false;
+        } else {
+            showTitle = true;
+        }
+    }
+
+	onMount(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    });
+</script>
+
+<Title visible={showTitle} />
+<Navbar />
+
+<main>
+	<div class="content">
+		<Router {routes} />
+	</div>
+</main>
+
+<style>
+
+	@media (min-width: 640px) {
+		main {
+			max-width: none;
+		}
+	}
+</style>

src/components/Navbar.svelte

@@ -0,0 +1,55 @@
+<nav class="navbar">
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#contact">Contact</a></li>
+        <a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
+    </ul>
+</nav>
+
+<style>
+    .navbar {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        background-color: black;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        gap: 20px;
+        justify-content: center;
+        align-items: center;
+        width: 100%; /* Ensures ul takes full width */
+    }
+
+    li {
+        display: inline;
+    }
+
+    a {
+        text-decoration: none;
+        color: #e2b714;
+        padding: 10px 20px;
+        display: block;
+    }
+
+    a:hover {
+        color: #d1d0c5;
+    }
+
+    .sticky-link {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 10px 20px;
+        text-decoration: none;
+    }
+</style>

src/components/Title.svelte

@@ -0,0 +1,40 @@
+<script>
+    export let visible = true;
+</script>
+
+<style>
+    .title-parent {
+        background-color: black;
+        padding: 25px 0;
+    }
+    .title {
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+        transform: translateY(0);
+        opacity: 1;
+        font-family: 'Tiny5';
+        color: #e2b714;
+    }
+
+    #titleh1 {
+        text-align: center;
+        font-family: 'Pixelify Sans';
+        color: #e2b714;
+        margin: 0;
+        width: 90%;
+        margin: 0 auto;
+        font-size: 5vw
+    }
+
+    .hidden {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+</style>
+<main>
+    <div class="title-parent">
+        <div class:title={!visible ? 'hidden' : ''}>
+            <h1 id="titleh1">blog.jonasjones.dev</h1>
+        </div>
+    </div>
+</main>
+

src/global.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Libre Barcode 128';
+  src: url('/fonts/LibreBarcode128Text-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Pixelify Sans';
+  src: url('/fonts/PixelifySans-VariableFont_wght.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background-color: #303030;
+  color: #e2b714;
+}
+
+.content {
+  width: 75%;
+  margin: 0 auto;
+}
+
+a, p {
+  font-family: 'JetBrains Mono';
+}

src/main.ts

@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;

src/routes.ts

@@ -0,0 +1,10 @@
+import Home from './routes/Home.svelte';
+import Lorem from './routes/Lorem.svelte';
+import NotFound from './routes/NotFound.svelte';
+
+export default {
+    '/': Home,
+    '/lorem/:repeat': Lorem,
+    // The catch-all route must always be last
+    '*': NotFound
+};

src/routes/Home.svelte

@@ -0,0 +1,18 @@
+<h1>Hello world!</h1>
+<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+<p>
+    This template is pre-configured with svlete-spa-router for routing.<br/>
+    Visit the <a href="https://github.com/ItalyPaleAle/svelte-spa-router">documentation for the router</a> to learn more.
+</p>
+<p>
+    Check a route: <a href="#/lorem/2">Lorem ipsum</a>
+</p>
+
+<style>
+	h1 {
+		color: #ff3e00;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
+	}
+</style>

src/routes/Lorem.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    export let params: {repeat?: string} = {};
+
+    let repeat = 1;
+    $: {
+        repeat = 1
+        if (params?.repeat) {
+            repeat = parseInt(params.repeat, 10)
+            if (repeat < 1) {
+                repeat = 1
+            }
+        }
+    }
+</script>
+
+<h1>Lorem ipsum</h1>
+<p>Tip: try changing the number in the URL's fragment, e.g. <code>#/lorem/4</code></p>
+{#each Array(repeat) as _}
+    <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed consequatur dicta, explicabo delectus, cupiditate, rem illo repellat aperiam saepe id minus ipsa. Illum libero consectetur fuga neque officia, adipisci commodi.Porro eius harum sed architecto maxime, molestiae cum ad dignissimos eum, nihil eligendi? Non quo, modi officia doloribus distinctio pariatur sed? Veniam facere beatae ipsam reprehenderit suscipit! Sequi, distinctio debitis.
+    </p>
+{/each}
+
+<style>
+	h1 {
+		color: #008cff;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
+	}
+</style>
+

src/routes/NotFound.svelte

@@ -0,0 +1,11 @@
+<h1>Not Found</h1>
+<p>This route doesn't exist.</p>
+
+<style>
+	h1 {
+		color: #ff0040;
+		text-transform: uppercase;
+		font-size: 4em;
+		font-weight: 100;
+	}
+</style>

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />