Did a bunch of stuff

src/lib/components/about/about.component.svelte

@@ -0,0 +1,5 @@
+<script context="module" lang="ts">
+	export interface SubComponentArgs {}
+
+	export const globals = {} as const;
+</script>

src/lib/components/about/socials.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Social } from '$lib/types/cv_types';
+
+	export let socials: Social[] = [
+		{ icon: '', url: 'www.google.com', description: 'Test' }
+	];
+</script>
+
+<table>
+	<tbody>
+		{#each socials as social}
+			<tr>
+				<td>{social.icon}</td>
+				<td>
+					<a href="{social.url.toString()}">{social.description}</a>
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style lang="scss">
+	table {
+		grid-area: d;
+	}
+</style>

src/lib/components/base.component.svelte

@@ -0,0 +1,6 @@
+<script context="module" lang="ts">
+	export type Arg = { argKey: string; argValue: any };
+	export let args: Arg[] = [];
+</script>
+
+<style lang="scss"></style>

src/lib/components/cv_info_articles/info.component.ts

@@ -1 +0,0 @@
-export const infoBodyPadding: string = '56px' as const;

src/lib/components/info/info.article.svelte

@@ -1,13 +1,20 @@
+<script context="module" lang="ts">
+	export interface InfoArticle {
+		title: string;
+		bodyText: string;
+	}
+</script>
+
 <script lang="ts">
-	export let title: string;
+	import type { SubComponentArgs } from '$lib/components/info/info.component.svelte';
-	export let bodyText: string;
+	export let args: SubComponentArgs;
 </script>
 
 <article>
 	<h2>
-		<span>{title}</span>
+		<span>{args.title}</span>
 	</h2>
-	<p>{bodyText}</p>
+	<p>{args.bodyText}</p>
 </article>
 
 <style lang="scss">

src/lib/components/info/info.component.svelte

@@ -1,17 +1,35 @@
+<script context="module" lang="ts">
+	export interface SubComponentArgs {
+		title: string;
+		bodyText: string;
+	}
+
+	export const globals = {
+		infoBodyPadding: '56px' as const
+	} as const;
+</script>
+
 <script lang="ts">
-	import InfoArticleComponent from './info.article.component.svelte';
+	import InfoArticleComponent from './info.article.svelte';
-	import { infoBodyPadding } from './info.component';
 
-	import type { InfoArticleList } from '$lib/types/cv_types';
+	const topBorderStyle = (): string => {
+		return subComponents === undefined ? '' : 'no-top';
+	};
 
-	export let infoArticles: InfoArticleList;
+	export let subComponents: SubComponentArgs[];
 
-	let hasTopBorder: string = infoArticles === undefined ? '' : 'no-top';
+	let locals = {
+		hasTopBorder: topBorderStyle()
+	};
 </script>
 
-<div id="infoBody" class="{hasTopBorder}" style="--padding: {infoBodyPadding};">
+<div
-	{#each infoArticles as { title, bodyText }, _}
+	id="infoBody"
-		<InfoArticleComponent title="{title}" bodyText="{bodyText}" />
+	class="{locals.hasTopBorder}"
+	style="--padding: {globals.infoBodyPadding};"
+>
+	{#each subComponents as article}
+		<InfoArticleComponent args="{article}" />
 	{/each}
 </div>
 

src/lib/types/cv_types.ts

@@ -17,6 +17,6 @@ export type InfoArticleList = InfoArticle[];
 
 export type Social = {
 	icon: string;
-	url: URL;
+	url: string;
 	description: string;
 };

src/routes/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { SkillList, InfoArticleList } from '$lib/types/cv_types';
 
-	import InfoComponent from '$lib/components/cv_info_articles/info.component.svelte';
+	import InfoComponent from '$lib/components/info/info.component.svelte';
-	import NameComponent from '$lib/components/name_and_socials/name.component.svelte';
+	import NameComponent from '$lib/components/about/full_name.svelte';
 	import SkillAreaComponent from '$lib/components/proficiency_trackers/skill_area.component.svelte';
+	import SocialsComponent from '$lib/components/about/socials.svelte';
 
 	const skills: SkillList = [];
 	const infoArticles: InfoArticleList = [
@@ -14,7 +15,8 @@
 
 <section id="mainContent">
 	<NameComponent />
-	<InfoComponent infoArticles="{infoArticles}" />
+	<InfoComponent subComponents="{infoArticles}" />
+	<SocialsComponent />
 	<SkillAreaComponent />
 </section>
 
@@ -23,6 +25,7 @@
 		display: grid;
 		grid-template:
 			'a b' 1fr
+			'd b' 1fr
 			'c b' auto / 1fr 3fr;
 	}
 </style>