chore(ui): modularize the website

src/lib/About.svelte

@@ -1,5 +1,10 @@
+<script lang="ts">
+  import { site } from "./site.config";
+  const mailto = `mailto:${site.contactEmail}`;
+</script>
+
 <section>
-  <div style="margin: 0.5rem 0;">Owner: Arlind Sulejmani</div>
-  <div style="margin: 0.5rem 0;">Contact: <a href="mailto:arlind@sulej.ch">arlind@sulej.ch</a></div>
+  <div style="margin: 0.5rem 0;">Owner: {site.ownerName}</div>
+  <div style="margin: 0.5rem 0;">Contact: <a href={mailto}>{site.contactEmail}</a></div>
 </section>
 

src/lib/Footer.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
   import type { VersionInfo } from "./version";
+  import { site, currentYear } from "./site.config";
   export let versionInfo: VersionInfo;
 </script>
 
 <footer>
   <div style="display: inline-flex; align-items: baseline; gap: 1rem; margin: 1rem 0 0;">
-    <small>© 2025 sulej.ch</small>
+    <small>© {currentYear} {site.domain}</small>
     <small>
-      <a class="version-link" href="https://github.com/Arlind-dev/sulej.ch">
-        {versionInfo.version} <span class="commit">({versionInfo.commit})</span>
-      </a>
+      {#if site.githubRepo}
+        <a class="version-link" href={site.githubRepo}>
+          {versionInfo.version} <span class="commit">({versionInfo.commit})</span>
+        </a>
+      {:else}
+        <span class="version-link" aria-label="App version">
+          {versionInfo.version} <span class="commit">({versionInfo.commit})</span>
+        </span>
+      {/if}
     </small>
   </div>
 </footer>

src/lib/Header.svelte

@@ -1,3 +1,9 @@
+<script lang="ts">
+  import { site } from "./site.config";
+  const title = `About ${site.siteTitle}`;
+  // Keep markup minimal and data-driven via config
+</script>
+
 <header>
-  <h1 style="margin: 0.5rem 0 1rem;">About sulej.ch</h1>
+  <h1 style="margin: 0.5rem 0 1rem;">{title}</h1>
 </header>

src/lib/site.config.ts

@@ -0,0 +1,17 @@
+export type SiteConfig = {
+  ownerName: string;
+  contactEmail: string;
+  domain: string; // e.g. "sulej.ch"
+  siteTitle: string; // e.g. "sulej.ch"
+  githubRepo?: string; // optional repo URL
+};
+
+export const site: SiteConfig = {
+  ownerName: "Arlind Sulejmani",
+  contactEmail: "arlind@sulej.ch",
+  domain: "sulej.ch",
+  siteTitle: "sulej.ch",
+  githubRepo: "https://github.com/Arlind-dev/sulej.ch"
+};
+
+export const currentYear = new Date().getFullYear();

src/routes/+layout.svelte

@@ -1,11 +1,15 @@
-<script>
+<script lang="ts">
   import '../app.css';
+  import { site } from '../lib/site.config';
+  const title = site.siteTitle;
+  const description = `${site.siteTitle} — ${site.domain}`;
 </script>
 
 <svelte:head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>sulej.ch</title>
+  <title>{title}</title>
+  <meta name="description" content={description} />
 </svelte:head>
 
 <div style="min-height: 100vh; padding-top: clamp(1rem, 8vh, 6rem); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: clamp(1rem, 1.5vw, 1.5rem); padding-left: clamp(0.5rem, 2vw, 1.5rem); padding-right: clamp(0.5rem, 2vw, 1.5rem); padding-bottom: clamp(0.5rem, 2vw, 1.5rem); font-size: clamp(1rem, 1rem + 1vw, 1.5rem);">