diff --git a/src/routes/cv/[lang]/avatar.png b/src/lib/assets/avatar.png
similarity index 100%
rename from src/routes/cv/[lang]/avatar.png
rename to src/lib/assets/avatar.png
diff --git a/src/lib/components/Gradients.svelte b/src/lib/components/Gradients.svelte
new file mode 100644
index 0000000..3518ab1
--- /dev/null
+++ b/src/lib/components/Gradients.svelte
@@ -0,0 +1,26 @@
+<div class="gradient-1"></div>
+<div class="gradient-2"></div>
+
+<style>
+	.gradient-1 {
+		z-index: -1;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: linear-gradient(160deg, #a2cffe 0%, rgba(255, 255, 255, 0) 25%);
+	}
+
+	.gradient-2 {
+		z-index: -1;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		background: linear-gradient(200deg, #a2cffe 0%, rgba(255, 255, 255, 0) 55%);
+	}
+</style>
diff --git a/src/lib/components/cv/CV.svelte b/src/lib/components/cv/CV.svelte
new file mode 100644
index 0000000..09190cd
--- /dev/null
+++ b/src/lib/components/cv/CV.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { CV } from '$lib/data';
+	import Avatar from '$lib/assets/avatar.png?url';
+	import { Page, PageWrapper, Text, Metadata, Section, Table } from './internals';
+
+	type Props = {
+		cv: CV;
+	};
+
+	let { cv }: Props = $props();
+	let { metadata, education, workExperience, volunteerExperience, skills } = cv;
+</script>
+
+<PageWrapper>
+	<Page class="z-30" id="cv">
+		<div class="flex flex-col md:flex-row gap-10">
+			<div class="block">
+				<img src={Avatar} alt="Ole Magnus" class="h-36 max-w-36 flex rounded-full border shadow" />
+			</div>
+
+			<div>
+				<h1 class="text-3xl font-semibold mb-6">Ole Magnus Fon Johnsen</h1>
+
+				<Metadata.Root>
+					{#each metadata as { label, value, link }}
+						<Metadata.Item>
+							<Metadata.Label>{label}:</Metadata.Label>{' '}
+							{#if link}
+								<Metadata.Link href={link}>{value}</Metadata.Link>
+							{:else}
+								{value}
+							{/if}
+						</Metadata.Item>
+					{/each}
+				</Metadata.Root>
+			</div>
+		</div>
+
+		<Section.Root>
+			<Section.Title>About me</Section.Title>
+
+			<Text>
+				I am an outgoing and curious person who loves to learn. Ever since I was young, I have had a
+				great interest in everything related to computers and technology. When I am not studying, I
+				enjoy playing video games, or tennis with friends if the weather is nice.
+			</Text>
+		</Section.Root>
+
+		<Section.Root>
+			<Section.Title>Education</Section.Title>
+
+			<Table.Root>
+				{#each education as { year, title, institution }}
+					<Table.Item>
+						<Table.Label>{year}</Table.Label>
+						<Table.Content>
+							<Table.Description>
+								{title} at {institution}
+							</Table.Description>
+						</Table.Content>
+					</Table.Item>
+				{/each}
+			</Table.Root>
+		</Section.Root>
+
+		<Section.Root>
+			<Section.Title>Work experience</Section.Title>
+
+			<Table.Root>
+				{#each workExperience as { year, title, company, description }}
+					<Table.Item>
+						<Table.Label>{year}</Table.Label>
+						<Table.Content>
+							<Table.Title>
+								{title} at {company}
+							</Table.Title>
+							<Table.Description>{description}</Table.Description>
+						</Table.Content>
+					</Table.Item>
+				{/each}
+			</Table.Root>
+		</Section.Root>
+
+		<Section.Root>
+			<Section.Title>Volunteer experience</Section.Title>
+
+			<Table.Root>
+				{#each volunteerExperience as { year, title, company, description }}
+					<Table.Item>
+						<Table.Label>{year}</Table.Label>
+						<Table.Content>
+							<Table.Title>
+								{title} at {company}
+							</Table.Title>
+							<Table.Description>{description}</Table.Description>
+						</Table.Content>
+					</Table.Item>
+				{/each}
+			</Table.Root>
+		</Section.Root>
+
+		<Section.Root>
+			<Section.Title>Skills</Section.Title>
+
+			<Table.Root>
+				{#each skills as { title, description }}
+					<Table.Item>
+						<Table.Label>{title}</Table.Label>
+						<Table.Content>
+							<Table.Description>{description}</Table.Description>
+						</Table.Content>
+					</Table.Item>
+				{/each}
+			</Table.Root>
+		</Section.Root>
+
+		<Section.Root>
+			<Section.Title>Other</Section.Title>
+
+			<Text>See some of my other projects on my GitHub, @omfj. (https://www.github.com/omfj)</Text>
+			<Text>
+				I also have some certificates on Codecademy. (https://www.codecademy.com/profiles/omfj)
+			</Text>
+		</Section.Root>
+	</Page>
+</PageWrapper>
+
+<style>
+	@media print {
+		:global(body *) {
+			visibility: hidden;
+		}
+		:global(#cv, #cv *) {
+			visibility: visible;
+		}
+		:global(#cv) {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+		}
+	}
+</style>
diff --git a/src/lib/components/cv/internals/Download.svelte b/src/lib/components/cv/internals/Download.svelte
new file mode 100644
index 0000000..aa744ec
--- /dev/null
+++ b/src/lib/components/cv/internals/Download.svelte
@@ -0,0 +1,5 @@
+<button
+	onclick={() => window.print()}
+	class="text-center bg-white hover:bg-gray-100 z-50 w-fit mx-auto text-gray-700 text-sm h-8 flex items-center justify-center mt-6 hover:text-blue-500 shadow-inner rounded-xl px-4 transition-all"
+	>Download as PDF</button
+>
diff --git a/src/routes/cv/[lang]/_components/Page.svelte b/src/lib/components/cv/internals/Page.svelte
similarity index 76%
rename from src/routes/cv/[lang]/_components/Page.svelte
rename to src/lib/components/cv/internals/Page.svelte
index e42f475..1f19b56 100644
--- a/src/routes/cv/[lang]/_components/Page.svelte
+++ b/src/lib/components/cv/internals/Page.svelte
@@ -10,6 +10,6 @@
 	let { children, class: className, ...props }: Props = $props();
 </script>
 
-<div class={cn('flex flex-col gap-10 max-w-screen-a4 w-full h-a4 font-sans', className)} {...props}>
+<div class={cn('flex flex-col gap-10 max-w-screen-a4 w-full font-sans', className)} {...props}>
 	{@render children()}
 </div>
diff --git a/src/lib/components/cv/internals/PageWrapper.svelte b/src/lib/components/cv/internals/PageWrapper.svelte
new file mode 100644
index 0000000..038a524
--- /dev/null
+++ b/src/lib/components/cv/internals/PageWrapper.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div class={cn('my-10 rounded bg-white shadow mx-auto border p-10 md:p-20', className)} {...props}>
+	{@render children()}
+</div>
diff --git a/src/lib/components/cv/internals/Text.svelte b/src/lib/components/cv/internals/Text.svelte
new file mode 100644
index 0000000..0c05ff7
--- /dev/null
+++ b/src/lib/components/cv/internals/Text.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLParagraphElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<p class={cn('text-xs', className)} {...props}>
+	{@render children()}
+</p>
diff --git a/src/lib/components/cv/internals/index.ts b/src/lib/components/cv/internals/index.ts
new file mode 100644
index 0000000..9aa78c7
--- /dev/null
+++ b/src/lib/components/cv/internals/index.ts
@@ -0,0 +1,8 @@
+export { default as DownloadButton } from './Download.svelte';
+export { default as Page } from './Page.svelte';
+export { default as PageWrapper } from './PageWrapper.svelte';
+export { default as Text } from './Text.svelte';
+
+export * as Metadata from './metadata';
+export * as Section from './section';
+export * as Table from './table';
diff --git a/src/lib/components/cv/internals/metadata/MetadataItem.svelte b/src/lib/components/cv/internals/metadata/MetadataItem.svelte
new file mode 100644
index 0000000..428e249
--- /dev/null
+++ b/src/lib/components/cv/internals/metadata/MetadataItem.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	type Props = HTMLLiAttributes & {
+		children: Snippet;
+	};
+
+	let { children, ...props }: Props = $props();
+</script>
+
+<li {...props}>
+	{@render children()}
+</li>
diff --git a/src/lib/components/cv/internals/metadata/MetadataLabel.svelte b/src/lib/components/cv/internals/metadata/MetadataLabel.svelte
new file mode 100644
index 0000000..6a692b0
--- /dev/null
+++ b/src/lib/components/cv/internals/metadata/MetadataLabel.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLSpanElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<span class={cn('font-semibold', className)} {...props}>{@render children()}</span>
diff --git a/src/lib/components/cv/internals/metadata/MetadataLink.svelte b/src/lib/components/cv/internals/metadata/MetadataLink.svelte
new file mode 100644
index 0000000..b2cf010
--- /dev/null
+++ b/src/lib/components/cv/internals/metadata/MetadataLink.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	type Props = HTMLAnchorAttributes & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<a
+	target="_blank"
+	class={cn('underline hover:text-blue-500 transition-colors', className)}
+	{...props}
+>
+	{@render children()}
+</a>
diff --git a/src/lib/components/cv/internals/metadata/MetadataRoot.svelte b/src/lib/components/cv/internals/metadata/MetadataRoot.svelte
new file mode 100644
index 0000000..18b7cf5
--- /dev/null
+++ b/src/lib/components/cv/internals/metadata/MetadataRoot.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLUListElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<ul class={cn('text-xs flex flex-wrap gap-2', className)} {...props}>
+	{@render children()}
+</ul>
diff --git a/src/lib/components/cv/internals/metadata/index.ts b/src/lib/components/cv/internals/metadata/index.ts
new file mode 100644
index 0000000..c71850d
--- /dev/null
+++ b/src/lib/components/cv/internals/metadata/index.ts
@@ -0,0 +1,4 @@
+export { default as Root } from './MetadataRoot.svelte';
+export { default as Link } from './MetadataLink.svelte';
+export { default as Item } from './MetadataItem.svelte';
+export { default as Label } from './MetadataLabel.svelte';
diff --git a/src/lib/components/cv/internals/section/SectionRoot.svelte b/src/lib/components/cv/internals/section/SectionRoot.svelte
new file mode 100644
index 0000000..e5c6792
--- /dev/null
+++ b/src/lib/components/cv/internals/section/SectionRoot.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		children: Snippet;
+	};
+
+	let { children, ...props }: Props = $props();
+</script>
+
+<div {...props}>
+	{@render children()}
+</div>
diff --git a/src/lib/components/cv/internals/section/SectionTitle.svelte b/src/lib/components/cv/internals/section/SectionTitle.svelte
new file mode 100644
index 0000000..fb62f14
--- /dev/null
+++ b/src/lib/components/cv/internals/section/SectionTitle.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLHeadingElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<h2 class={cn('text-lg font-semibold mb-2', className)} {...props}>
+	{@render children()}
+</h2>
diff --git a/src/lib/components/cv/internals/section/index.ts b/src/lib/components/cv/internals/section/index.ts
new file mode 100644
index 0000000..70c7d5d
--- /dev/null
+++ b/src/lib/components/cv/internals/section/index.ts
@@ -0,0 +1,2 @@
+export { default as Root } from './SectionRoot.svelte';
+export { default as Title } from './SectionTitle.svelte';
diff --git a/src/lib/components/cv/internals/table/TableContent.svelte b/src/lib/components/cv/internals/table/TableContent.svelte
new file mode 100644
index 0000000..6757e65
--- /dev/null
+++ b/src/lib/components/cv/internals/table/TableContent.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col gap-1', className)} {...props}>
+	{@render children()}
+</div>
diff --git a/src/lib/components/cv/internals/table/TableDescription.svelte b/src/lib/components/cv/internals/table/TableDescription.svelte
new file mode 100644
index 0000000..107ce05
--- /dev/null
+++ b/src/lib/components/cv/internals/table/TableDescription.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLParagraphElement> & {
+		children: Snippet;
+	};
+
+	let { children, ...props }: Props = $props();
+</script>
+
+<p {...props}>
+	{@render children()}
+</p>
diff --git a/src/lib/components/cv/internals/table/TableItem.svelte b/src/lib/components/cv/internals/table/TableItem.svelte
new file mode 100644
index 0000000..f4808e3
--- /dev/null
+++ b/src/lib/components/cv/internals/table/TableItem.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	type Props = HTMLLiAttributes & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<li class={cn('flex flex-col gap-1 md:flex-row md:gap-4', className)} {...props}>
+	{@render children()}
+</li>
diff --git a/src/lib/components/cv/internals/table/TableLabel.svelte b/src/lib/components/cv/internals/table/TableLabel.svelte
new file mode 100644
index 0000000..b69f4cb
--- /dev/null
+++ b/src/lib/components/cv/internals/table/TableLabel.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLParagraphElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<p class={cn('max-w-[150px] w-full font-semibold', className)} {...props}>
+	{@render children()}
+</p>
diff --git a/src/lib/components/cv/internals/table/TableRoot.svelte b/src/lib/components/cv/internals/table/TableRoot.svelte
new file mode 100644
index 0000000..1be5aa3
--- /dev/null
+++ b/src/lib/components/cv/internals/table/TableRoot.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLUListElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<ul class={cn('flex flex-col gap-4 text-xs', className)} {...props}>
+	{@render children()}
+</ul>
diff --git a/src/lib/components/cv/internals/table/TableTitle.svelte b/src/lib/components/cv/internals/table/TableTitle.svelte
new file mode 100644
index 0000000..0a258dd
--- /dev/null
+++ b/src/lib/components/cv/internals/table/TableTitle.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn } from '$lib/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLHeadingElement> & {
+		children: Snippet;
+	};
+
+	let { children, class: className, ...props }: Props = $props();
+</script>
+
+<h4 class={cn('font-semibold', className)} {...props}>
+	{@render children()}
+</h4>
diff --git a/src/lib/components/cv/internals/table/index.ts b/src/lib/components/cv/internals/table/index.ts
new file mode 100644
index 0000000..32801a1
--- /dev/null
+++ b/src/lib/components/cv/internals/table/index.ts
@@ -0,0 +1,6 @@
+export { default as Root } from './TableRoot.svelte';
+export { default as Description } from './TableDescription.svelte';
+export { default as Label } from './TableLabel.svelte';
+export { default as Title } from './TableTitle.svelte';
+export { default as Item } from './TableItem.svelte';
+export { default as Content } from './TableContent.svelte';
diff --git a/src/lib/components/List.svelte b/src/lib/components/list/List.svelte
similarity index 100%
rename from src/lib/components/List.svelte
rename to src/lib/components/list/List.svelte
diff --git a/src/lib/components/ListDescription.svelte b/src/lib/components/list/ListDescription.svelte
similarity index 100%
rename from src/lib/components/ListDescription.svelte
rename to src/lib/components/list/ListDescription.svelte
diff --git a/src/lib/components/ListItem.svelte b/src/lib/components/list/ListItem.svelte
similarity index 100%
rename from src/lib/components/ListItem.svelte
rename to src/lib/components/list/ListItem.svelte
diff --git a/src/lib/components/ListTitle.svelte b/src/lib/components/list/ListTitle.svelte
similarity index 100%
rename from src/lib/components/ListTitle.svelte
rename to src/lib/components/list/ListTitle.svelte
diff --git a/src/lib/components/list/index.ts b/src/lib/components/list/index.ts
new file mode 100644
index 0000000..dc26cfa
--- /dev/null
+++ b/src/lib/components/list/index.ts
@@ -0,0 +1,4 @@
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
+export { default as ListDescription } from './ListDescription.svelte';
+export { default as ListTitle } from './ListTitle.svelte';
diff --git a/src/lib/data.ts b/src/lib/data.ts
new file mode 100644
index 0000000..1dc5678
--- /dev/null
+++ b/src/lib/data.ts
@@ -0,0 +1,100 @@
+export type CV = typeof cvEn;
+
+export const cvEn = {
+	metadata: [
+		{
+			label: 'Address',
+			value: 'Blusuvollsbakken 6A, 7052 Trondheim'
+		},
+		{
+			label: 'Mobile',
+			value: '+47 479 04 470'
+		},
+		{
+			label: 'E-mail',
+			value: 'me@omfj.no'
+		},
+		{
+			label: 'Date of birth',
+			value: '17th December 2002'
+		},
+		{
+			label: 'Nationality',
+			value: 'Norwegian'
+		},
+		{
+			label: 'Languages',
+			value: 'Norwegian, English'
+		},
+		{
+			label: 'Website',
+			value: 'https://omfj.no',
+			link: 'https://omfj.no'
+		},
+		{
+			label: 'GitHub',
+			value: 'https://github.com/omfj',
+			link: 'https://github.com/omfj'
+		},
+		{
+			label: 'LinkedIn',
+			value: 'https://www.linkedin.com/in/omfj',
+			link: 'https://www.linkedin.com/in/omfj'
+		}
+	],
+	education: [
+		{
+			year: '08.2021 - 06.2024',
+			title: 'Bachelor in Computer Technology',
+			institution: 'University of Bergen'
+		},
+		{
+			year: '2018 - 2021',
+			title: 'Upper Secondary School',
+			institution: 'Trondheim Cathedral School'
+		}
+	],
+	skills: [
+		{
+			title: 'Programming languages',
+			description: 'Java, Kotlin, TypeScript, JavaScript, Python, SQL'
+		},
+		{
+			title: 'Frameworks',
+			description: 'React, Next.js, Quarkus, Ktor, Hono'
+		},
+		{
+			title: 'Tools',
+			description: 'Git, Docker'
+		},
+		{
+			title: 'Other',
+			description: 'TailwindCSS, Cloudflare, Vercel, GitHub Actions'
+		}
+	],
+
+	workExperience: [
+		{
+			year: '09.2023 - Present',
+			title: 'Software Developer',
+			company: 'Sportradar AS',
+			description: 'Worked part-time with the same project from my summer internship'
+		},
+		{
+			year: '06.2023 - 08.2023',
+			title: 'Engineering Intern',
+			company: 'Sportradar AS',
+			description:
+				'Worked as a full-stack developer for Sportradar. I was involved in developing an internal tool using Quarkus and Kotlin for the backend, as well as React and TypeScript for the frontend.'
+		}
+	],
+	volunteerExperience: [
+		{
+			year: '09.2021 - Present',
+			title: 'Board member',
+			company: 'echo Webkom',
+			description:
+				"I have been involved in managing echo's web solutions. Through my role, I have held positions as a board member, deputy chairman, and now I am the chief technology officer. I also spearheaded the development of the new website. Here, we have used many modern technologies such as TailwindCSS, Next.js, Vercel, Kotlin, Ktor to name a few."
+		}
+	]
+};
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 417786c..20b8e02 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,8 +1,5 @@
 <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';
+	import { List, ListDescription, ListItem, ListTitle } from '$lib/components/list';
 
 	const yearsOld = (
 		(Date.now() - new Date(2002, 12, 17).getTime()) /
diff --git a/src/routes/cv/[lang]/+page.svelte b/src/routes/cv/[lang]/+page.svelte
index ff39b8e..b99d3e7 100644
--- a/src/routes/cv/[lang]/+page.svelte
+++ b/src/routes/cv/[lang]/+page.svelte
@@ -1,271 +1,10 @@
 <script lang="ts">
-	import Avatar from './avatar.png?url';
-	import Page from './_components/Page.svelte';
-
-	const metadata = [
-		{
-			label: 'Address',
-			value: 'Blusuvollsbakken 6A, 7052 Trondheim'
-		},
-		{
-			label: 'Mobile',
-			value: '+47 479 04 470'
-		},
-		{
-			label: 'E-mail',
-			value: 'me@omfj.no'
-		},
-		{
-			label: 'Date of birth',
-			value: '17th December 2002'
-		},
-		{
-			label: 'Nationality',
-			value: 'Norwegian'
-		},
-		{
-			label: 'Languages',
-			value: 'Norwegian, English'
-		},
-		{
-			label: 'Website',
-			value: 'https://omfj.no',
-			link: 'https://omfj.no'
-		},
-		{
-			label: 'GitHub',
-			value: 'https://github.com/omfj',
-			link: 'https://github.com/omfj'
-		},
-		{
-			label: 'LinkedIn',
-			value: 'https://www.linkedin.com/in/omfj',
-			link: 'https://www.linkedin.com/in/omfj'
-		}
-	];
-
-	const education = [
-		{
-			year: '08.2021 - 06.2024',
-			title: 'Bachelor in Computer Technology',
-			institution: 'University of Bergen'
-		},
-		{
-			year: '2018 - 2021',
-			title: 'Upper Secondary School',
-			institution: 'Trondheim Cathedral School'
-		}
-	];
-
-	const skills = [
-		{
-			title: 'Programming languages',
-			description: 'Java, Kotlin, TypeScript, JavaScript, Python, SQL'
-		},
-		{
-			title: 'Frameworks',
-			description: 'React, Next.js, Quarkus, Ktor, Hono'
-		},
-		{
-			title: 'Tools',
-			description: 'Git, Docker'
-		},
-		{
-			title: 'Other',
-			description: 'TailwindCSS, Cloudflare, Vercel, GitHub Actions'
-		}
-	];
-
-	const workExperience = [
-		{
-			year: '09.2023 - Present',
-			title: 'Software Developer',
-			company: 'Sportradar AS',
-			description: 'Worked part-time with the same project from my summer internship'
-		},
-		{
-			year: '06.2023 - 08.2023',
-			title: 'Engineering Intern',
-			company: 'Sportradar AS',
-			description:
-				'Worked as a full-stack developer for Sportradar. I was involved in developing an internal tool using Quarkus and Kotlin for the backend, as well as React and TypeScript for the frontend.'
-		}
-	];
-
-	const volunteerExperience = [
-		{
-			year: '09.2021 - Present',
-			title: 'Board member',
-			company: 'echo Webkom',
-			description:
-				"I have been involved in managing echo's web solutions. Through my role, I have held positions as a board member, deputy chairman, and now I am the chief technology officer. I also spearheaded the development of the new website. Here, we have used many modern technologies such as TailwindCSS, Next.js, Vercel, Kotlin, Ktor to name a few."
-		}
-	];
+	import CV from '$lib/components/cv/CV.svelte';
+	import Download from '$lib/components/cv/internals/Download.svelte';
+	import Gradients from '$lib/components/Gradients.svelte';
+	import { cvEn } from '$lib/data';
 </script>
 
-<!-- Gradient indigto to white -->
-<div class="gradient-1"></div>
-<div class="gradient-2"></div>
-
-<button
-	onclick={() => window.print()}
-	class="text-center bg-white hover:bg-gray-100 z-50 w-fit mx-auto text-gray-700 text-sm h-8 flex items-center justify-center mt-6 hover:text-blue-500 shadow-inner rounded-xl px-4 transition-all"
-	>Download as PDF</button
->
-
-<div class="my-10 rounded bg-white shadow mx-auto border p-20">
-	<Page class="z-30" id="cv">
-		<div class="flex gap-10">
-			<div class="block">
-				<img src={Avatar} alt="Ole Magnus" class="h-36 max-w-36 flex rounded-full border shadow" />
-			</div>
-
-			<div>
-				<h1 class="text-3xl font-semibold mb-6">Ole Magnus Fon Johnsen</h1>
-				<ul class="text-xs flex flex-wrap gap-2">
-					{#each metadata as { label, value, link }}
-						<li>
-							<p>
-								<span class="font-semibold">{label}:</span>{' '}
-								{#if link}
-									<a
-										href={link}
-										target="_blank"
-										class="underline hover:text-blue-500 transition-colors"
-										rel="noopener">{value}</a
-									>
-								{:else}
-									{value}
-								{/if}
-							</p>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		</div>
-
-		<div>
-			<h2 class="text-lg font-medium mb-2">About me</h2>
-
-			<p class="text-xs">
-				I am an outgoing and curious person who loves to learn. Ever since I was young, I have had a
-				great interest in everything related to computers and technology. When I am not studying, I
-				enjoy playing video games, or tennis with friends if the weather is nice.
-			</p>
-		</div>
-
-		<div>
-			<h2 class="text-lg font-medium mb-2">Education</h2>
-
-			<ul class="flex flex-col gap-4 text-xs">
-				{#each education as { year, title, institution }}
-					<li class="flex gap-4">
-						<p class="max-w-[150px] w-full">{year}</p>
-						<p>
-							{title} at {institution}
-						</p>
-					</li>
-				{/each}
-			</ul>
-		</div>
-
-		<div>
-			<h2 class="text-lg font-medium mb-2">Work experience</h2>
-
-			<ul class="flex flex-col gap-4 text-xs">
-				{#each workExperience as { year, title, company, description }}
-					<li class="flex gap-4">
-						<p class="max-w-[150px] w-full">{year}</p>
-						<div class="flex flex-col gap-1">
-							<p class="font-semibold">
-								{title} at {company}
-							</p>
-							<p>{description}</p>
-						</div>
-					</li>
-				{/each}
-			</ul>
-		</div>
-
-		<div>
-			<h2 class="text-lg font-medium mb-2">Volunteer experience</h2>
-
-			<ul class="flex flex-col gap-4 text-xs">
-				{#each volunteerExperience as { year, title, company, description }}
-					<li class="flex gap-4">
-						<p class="max-w-[150px] w-full">{year}</p>
-						<div class="flex flex-col gap-1">
-							<p class="font-semibold">
-								{title} at {company}
-							</p>
-							<p>{description}</p>
-						</div>
-					</li>
-				{/each}
-			</ul>
-		</div>
-
-		<div>
-			<h2 class="text-lg font-medium mb-2">Skills</h2>
-
-			<ul class="flex flex-col gap-1 text-xs">
-				{#each skills as { title, description }}
-					<li class="flex gap-4">
-						<p class="font-semibold max-w-[150px] w-full">{title}</p>
-						<p>{description}</p>
-					</li>
-				{/each}
-			</ul>
-		</div>
-
-		<div>
-			<h2 class="text-lg font-medium mb-2">Other</h2>
-
-			<p class="text-xs">
-				See some of my other projects on my GitHub, @omfj. (https://www.github.com/omfj)
-			</p>
-			<p class="text-xs">
-				I also have some certificates on Codecademy. (https://www.codecademy.com/profiles/omfj)
-			</p>
-		</div>
-	</Page>
-</div>
-
-<style>
-	.gradient-1 {
-		z-index: -1;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background: linear-gradient(160deg, #a2cffe 0%, rgba(255, 255, 255, 0) 25%);
-	}
-
-	.gradient-2 {
-		z-index: -1;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		background: linear-gradient(200deg, #a2cffe 0%, rgba(255, 255, 255, 0) 55%);
-	}
-
-	@media print {
-		:global(body *) {
-			visibility: hidden;
-		}
-		:global(#cv, #cv *) {
-			visibility: visible;
-		}
-		:global(#cv) {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-		}
-	}
-</style>
+<Gradients />
+<Download />
+<CV cv={cvEn} />