Add CV

package.json

@@ -32,5 +32,9 @@
 		"typescript": "5.4.5",
 		"vite": "5.2.11",
 		"wrangler": "^3.57.2"
+	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^2.3.0"
 	}
 }

src/fonts.css

@@ -1,6 +1,2 @@
-@font-face {
-	font-family: 'IBM Plex Mono';
-	font-style: normal;
-	font-weight: 400;
-	src: url('/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100..900&display=swap');

src/lib/cn.ts

@@ -0,0 +1,4 @@
+import clsx, { type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...classes: ClassValue[]): string => twMerge(clsx(classes));

src/routes/(app)/+page.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import List from '$lib/components/List.svelte';
+	import ListTitle from '$lib/components/ListTitle.svelte';
+	import ListDescription from '$lib/components/ListDescription.svelte';
+	import ListItem from '$lib/components/ListItem.svelte';
+
+	const yearsOld = (
+		(Date.now() - new Date(2002, 12, 17).getTime()) /
+		(1000 * 60 * 60 * 24 * 365)
+	).toFixed(1);
+</script>
+
+<div class="gradient-1"></div>
+
+<div class="py-12 md:py-24 transition-all">
+	<header class="max-w-xl mx-auto p-8">
+		<h1 class="text-3xl">omfj</h1>
+	</header>
+
+	<main class="max-w-xl mx-auto p-8 mb-10">
+		<div class="space-y-10 z-50">
+			<div>
+				<p>
+					My name is Ole Magnus. I am {yearsOld} year old software developer from Norway. Currently residing
+					in Bergen, and studying Computer Technology at the University of Bergen.
+				</p>
+			</div>
+
+			<div>Current interests include web development, SQLite and Hono.</div>
+
+			<div>
+				<h2 class="font-medium">Want to have a look at my resumè?</h2>
+
+				<p>
+					You can find it <a class="underline hover:text-blue-500 transition-colors" href="/cv/en"
+						>here</a
+					>.
+				</p>
+			</div>
+
+			<div>
+				<ListTitle>Socials</ListTitle>
+				<ListDescription>Ways to get in touch with me.</ListDescription>
+				<List>
+					<ListItem href="https://github.com/omfj">
+						<span>GitHub</span>
+						<span class="text-sm">(@omfj)</span>
+					</ListItem>
+					<ListItem href="https://www.instagram.com/lordolem">
+						<span>Instagram</span>
+						<span class="text-sm">(@lordolem)</span>
+					</ListItem>
+					<ListItem href="https://www.linkedin.com/in/omfj">
+						<span>LinkedIn</span>
+						<span class="text-sm">(in/omfj)</span>
+					</ListItem>
+					<ListItem href="https://www.twitter.com/omfj_">
+						<span>X</span>
+						<span class="text-sm">(@omfj_)</span>
+					</ListItem>
+				</List>
+			</div>
+		</div>
+	</main>
+</div>
+
+<style>
+	.gradient-1 {
+		z-index: -1;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: linear-gradient(140deg, #a2cffe 0%, rgba(255, 255, 255, 0) 35%);
+	}
+</style>

src/routes/+layout.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
 	import '../app.css';
 	import '../fonts.css';
-</script>
 
-<div class="py-12 md:py-24 transition-all">
-	<header class="max-w-xl mx-auto p-5">
-		<h1 class="text-3xl">omfj.no</h1>
-	</header>
+	let { children } = $props();
+</script>
 
-	<main class="max-w-xl mx-auto p-5 mb-10">
-		<slot />
-	</main>
+<div class="flex flex-col min-h-screen">
+	{@render children()}
 </div>