From aeecf3b87de38d8c8ce5d0676d1d37e0d9921205 Mon Sep 17 00:00:00 2001
From: Joakim Repomaa <joakim.repomaa@mocoapp.com>
Date: Thu, 19 Feb 2026 17:35:54 +0200
Subject: [PATCH] improve layout and accessibility

---
 src/lib/components/Education.svelte   |  2 +-
 src/lib/components/Experience.svelte  |  2 +-
 src/lib/components/Footer.svelte      | 31 +++++++++++++++++++++++++++
 src/lib/components/ProjectCard.svelte |  6 ++++--
 src/lib/components/Projects.svelte    |  2 +-
 src/lib/components/Section.svelte     |  6 ++++--
 src/lib/components/Skills.svelte      |  2 +-
 src/routes/(web)/+page.svelte         | 13 ++---------
 src/routes/+layout.svelte             |  5 +++++
 9 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/components/Footer.svelte
 create mode 100644 src/routes/+layout.svelte

diff --git a/src/lib/components/Education.svelte b/src/lib/components/Education.svelte
index b101be8..05ff861 100644
--- a/src/lib/components/Education.svelte
+++ b/src/lib/components/Education.svelte
@@ -6,7 +6,7 @@
   let { education }: { education: Education[] } = $props();
 </script>
 
-<Section title="education">
+<Section title="Education">
   <div class="space-y-6">
     {#each education as edu}
       <TimelineItem
diff --git a/src/lib/components/Experience.svelte b/src/lib/components/Experience.svelte
index aea441f..865df0e 100644
--- a/src/lib/components/Experience.svelte
+++ b/src/lib/components/Experience.svelte
@@ -6,7 +6,7 @@
   let { experience }: { experience: Experience[] } = $props();
 </script>
 
-<Section title="experience">
+<Section title="Experience">
   <div class="space-y-8">
     {#each experience as job}
       <TimelineItem
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..97a2b9b
--- /dev/null
+++ b/src/lib/components/Footer.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+</script>
+
+<footer class="max-w-5xl mx-auto mt-16 py-8 border-t border-fg/20 text-center text-sm text-muted">
+  <p class="font-mono">
+    Built with
+    <a
+      href="https://svelte.dev"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-accent hover:text-accent transition-colors">SvelteKit</a
+    >
+    +
+    <a
+      href="https://sveltiacms.app/"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-accent hover:text-accent transition-colors">Sveltia CMS</a
+    >
+  </p>
+  <p class="mt-2">
+    <a href="/admin" class="text-accent hover:text-accent/80 transition-colors">edit</a>
+    <span class="mx-2 text-muted" aria-hidden="true">//</span>
+    <a
+      href="https://git.freun.dev/repomaa/cv"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-accent hover:text-accent/80 transition-colors">src</a
+    >
+  </p>
+</footer>
diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte
index 2ea168f..e8262dc 100644
--- a/src/lib/components/ProjectCard.svelte
+++ b/src/lib/components/ProjectCard.svelte
@@ -21,8 +21,10 @@
           {project.name}
         </span>
         <div class="flex items-center gap-3 text-sm text-hot">
-          <span class="flex items-center gap-1" aria-label="{project.stars} stars">
-            <span class="text-xl">★</span>
+          <span
+            class="flex items-center gap-1 before:content-['★'] before:text-xl"
+            aria-label="{project.stars} stars"
+          >
             {project.stars}
           </span>
         </div>
diff --git a/src/lib/components/Projects.svelte b/src/lib/components/Projects.svelte
index e895e3b..4db8b6b 100644
--- a/src/lib/components/Projects.svelte
+++ b/src/lib/components/Projects.svelte
@@ -10,7 +10,7 @@
   }: { ownProjects: Project[]; contributions: Project[]; username: string } = $props();
 </script>
 
-<Section title="projects">
+<Section title="Projects">
   <ProjectList
     title="Original Projects"
     projects={ownProjects}
diff --git a/src/lib/components/Section.svelte b/src/lib/components/Section.svelte
index a00a686..89a1628 100644
--- a/src/lib/components/Section.svelte
+++ b/src/lib/components/Section.svelte
@@ -11,8 +11,10 @@
 </script>
 
 <section class="pb-8 mb-10 border-b border-fg/20 last:border-b-0" aria-labelledby={headingId}>
-  <h2 id={headingId} class="text-3xl font-bold mb-6 pb-2 text-fg">
-    <span class="text-accent">$></span>
+  <h2
+    id={headingId}
+    class="text-3xl lowercase font-bold mb-6 pb-2 text-fg before:content-['$>_'] before:text-accent"
+  >
     {title}
   </h2>
 
diff --git a/src/lib/components/Skills.svelte b/src/lib/components/Skills.svelte
index 67d2383..df1c7d6 100644
--- a/src/lib/components/Skills.svelte
+++ b/src/lib/components/Skills.svelte
@@ -6,7 +6,7 @@
   let { skills }: { skills: Skill[] } = $props();
 </script>
 
-<Section title="skills">
+<Section title="Skills">
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
     {#each skills as skillCategory}
       <div>
diff --git a/src/routes/(web)/+page.svelte b/src/routes/(web)/+page.svelte
index 35c81d9..0fe9250 100644
--- a/src/routes/(web)/+page.svelte
+++ b/src/routes/(web)/+page.svelte
@@ -4,6 +4,7 @@
   import Education from '$lib/components/Education.svelte';
   import Skills from '$lib/components/Skills.svelte';
   import Projects from '$lib/components/Projects.svelte';
+  import Footer from '$lib/components/Footer.svelte';
 
   let { data } = $props();
 </script>
@@ -48,17 +49,7 @@
     </span>
   </a>
 
-  <footer class="max-w-5xl mx-auto mt-16 py-8 border-t border-fg/20 text-center text-sm text-muted">
-    <p class="font-mono">
-      <span class="text-accent">$</span>
-      Built with SvelteKit + Sveltia CMS
-    </p>
-    <p class="mt-2">
-      <a href="/admin" class="text-accent hover:text-accent/80 transition-colors">
-        Edit Content →
-      </a>
-    </p>
-  </footer>
+  <Footer />
 </main>
 
 <style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..4b7cb06
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+  let { children } = $props();
+</script>
+
+{@render children()}