improve layout and accessibility

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

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

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>

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
-            <span class="text-xl">★</span>
+            class="flex items-center gap-1 before:content-['★'] before:text-xl"
+            aria-label="{project.stars} stars"
+          >
             {project.stars}
           </span>
         </div>

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}

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">
+  <h2
-    <span class="text-accent">$></span>
+    id={headingId}
+    class="text-3xl lowercase font-bold mb-6 pb-2 text-fg before:content-['$>_'] before:text-accent"
+  >
     {title}
   </h2>
 

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>

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">
+  <Footer />
-    <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>
 </main>
 
 <style>

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  let { children } = $props();
+</script>
+
+{@render children()}