refactor: change popovers in social to be semantically correct

src/lib/components/Socials.svelte

@@ -56,8 +56,13 @@
 		<LinkedinLogo />
 	</Button>
 	<Popover.Root>
-		<Popover.Trigger>
+		<Popover.Trigger asChild let:builder>
-			<Button class="hover:scale-110 transition-transform" variant="ghost" size="icon">
+			<Button
+				class="hover:scale-110 transition-transform"
+				variant="ghost"
+				size="icon"
+				builders={[builder]}
+			>
 				<DiscordLogo />
 			</Button>
 		</Popover.Trigger>
@@ -70,8 +75,13 @@
 		</Popover.Content>
 	</Popover.Root>
 	<Popover.Root>
-		<Popover.Trigger>
+		<Popover.Trigger asChild let:builder>
-			<Button class="hover:scale-110 transition-transform" variant="ghost" size="icon">
+			<Button
+				class="hover:scale-110 transition-transform"
+				variant="ghost"
+				size="icon"
+				builders={[builder]}
+			>
 				<EnvelopeClosed />
 			</Button>
 		</Popover.Trigger>

src/routes/+page.svelte

@@ -22,11 +22,11 @@
 		</Typewriter>
 		<div class="text-2xl md:text-3xl font-medium mt-10 text-center">
 			<Typewriter cursor mode="loop">
-				<p>a student.</p>
+				<h2>a student.</h2>
-				<p>a programmer.</p>
+				<h2>a programmer.</h2>
-				<p>a math enthusiast.</p>
+				<h2>a math enthusiast.</h2>
-				<p>a musician.</p>
+				<h2>a musician.</h2>
-				<p>a hacker.</p>
+				<h2>a hacker.</h2>
 			</Typewriter>
 			<br />
 			<Typewriter mode="scramble" scrambleDuration={1000}>