Parameterize name component

src/lib/components/name_and_socials/name.component.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let fullName: string = '[Full Name]';
+	export let occupationTitle: string = '[Occupation Title]';
+</script>
+
+<section>
+	<h1>{fullName}</h1>
+	<h2>{occupationTitle}</h2>
+</section>
+
+<style lang="scss">
+	$grid-area: a;
+
+	section {
+		grid-area: $grid-area;
+
+		& > h1,
+		> h2 {
+			margin-block-start: 0.5em;
+			margin-block-end: 0.5em;
+		}
+	}
+</style>

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import type { SkillList, InfoArticleList } from '$lib/types/cv_types';
 
 	import InfoComponent from '$lib/components/cv_info_articles/info.component.svelte';
-	import NameComponent from './name.component.svelte';
+	import NameComponent from '$lib/components/name_and_socials/name.component.svelte';
 	import SkillAreaComponent from '$lib/components/proficiency_trackers/skill_area.component.svelte';
 
 	const skills: SkillList = [];

src/routes/name.component.svelte

@@ -1,12 +0,0 @@
-<div id="nameArea">
-	<h1 id="title">[FirstName LastName]</h1>
-	<h2 id="subTitle">[Does Things]</h2>
-</div>
-
-<style lang="scss">
-	$grid-area: a;
-
-	#nameArea {
-		grid-area: $grid-area;
-	}
-</style>