cleanup

src/routes/(content)/(web)/+layout.svelte

@@ -0,0 +1,10 @@
+<script>
+  let { children } = $props();
+</script>
+
+<div class="font-mono bg-background text-foreground">
+  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute">
+    Skip to main content
+  </a>
+  {@render children()}
+</div>

src/routes/(content)/(web)/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Header from '$lib/components/Header.svelte';
+  import Experience from '$lib/components/Experience.svelte';
+  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>
+
+<svelte:head>
+  <title>{data.profile.name} — {data.profile.title}</title>
+  <meta name="description" content={data.profile.summary.substring(0, 160)} />
+</svelte:head>
+
+<main id="main-content" class="min-h-screen bg-bg">
+  <div class="max-w-5xl mx-auto px-6 py-12">
+    <Header profile={data.profile} />
+
+    <Experience experience={data.experience} />
+
+    <Education education={data.education} />
+
+    <Skills skills={data.skills} />
+
+    <Projects
+      ownProjects={data.ownProjects}
+      contributions={data.contributions}
+      username={data.profile.github}
+    />
+  </div>
+
+  <a
+    href="/joakim-repomaa-cv.pdf"
+    download
+    class="fixed top-0 right-0 w-24 h-24 z-50 group"
+    style="clip-path: polygon(0 0, 100% 0, 100% 100%);"
+    data-sveltekit-preload-data="off"
+    aria-label="Download PDF"
+  >
+    <div
+      class="absolute top-0 right-0 w-0 h-0 border-t-80 border-t-accent border-l-80 border-l-transparent group-hover:opacity-80 transition-opacity"
+    ></div>
+    <span
+      class="absolute inset-0 flex items-start justify-end p-4 text-bg font-mono text-sm font-bold"
+    >
+      <span class="inline-block rotate-45 origin-center group-focus:ring ring-fg">PDF</span>
+    </span>
+  </a>
+
+  <Footer />
+</main>

src/routes/(content)/+layout.server.ts

@@ -0,0 +1,21 @@
+import { loadAllContent } from '$lib/content/loader';
+import { fetchContributedRepos, fetchGitHubProjects } from '$lib/github';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async () => {
+  const content = await loadAllContent();
+
+  const [ownProjects, contributions] = await Promise.all([
+    fetchGitHubProjects(content.profile.github),
+    fetchContributedRepos(content.profile.github),
+  ]);
+
+  return {
+    profile: content.profile,
+    experience: content.experience,
+    education: content.education,
+    skills: content.skills,
+    ownProjects,
+    contributions,
+  };
+};

src/routes/(content)/+layout.svelte

@@ -0,0 +1,6 @@
+<script>
+  let { children } = $props();
+  import '../../app.css';
+</script>
+
+{@render children()}

src/routes/(content)/print/+layout.svelte

@@ -0,0 +1,14 @@
+<script>
+  let { children } = $props();
+</script>
+
+<main class="min-h-screen bg-pdf-bg text-pdf-fg">
+  {@render children()}
+</main>
+
+<style>
+  @page {
+    size: A4;
+    margin: 15mm;
+  }
+</style>

src/routes/(content)/print/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import PDFContent from '$lib/components/PDFContent.svelte';
+
+  let { data } = $props();
+</script>
+
+<svelte:head>
+  <title>{data.profile.name} — CV</title>
+</svelte:head>
+
+<PDFContent
+  profile={data.profile}
+  experience={data.experience}
+  education={data.education}
+  skills={data.skills}
+  ownProjects={data.ownProjects}
+  contributions={data.contributions}
+/>