updates from main

src/components/Section.astro

@@ -19,7 +19,9 @@ import Contact from "@/assets/contact.svg?raw";
 		<div class="relative w-max">
 			<BoxLines />
 			<div
-				class="relative w-[fit-content] animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] text-textProminent opacity-0 [&>svg]:h-8 sm:[&>svg]:h-14 md:[&>svg]:h-16 lg:[&>svg]:h-20 xl:[&>svg]:h-28 2xl:[&>svg]:h-32"
+				class="nk-transition relative w-[fit-content] text-textProminent opacity-0 [&>svg]:h-8 sm:[&>svg]:h-14 md:[&>svg]:h-16 lg:[&>svg]:h-20 xl:[&>svg]:h-28 2xl:[&>svg]:h-32 [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[1px] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
+				:class="inview && '[&_svg_path]:animate-[dashForward_1s_cubic-bezier(0.55,0,1,0.45)_forwards]'"
+				:style="inview && { opacity: 1 }"
 			>
 				<Fragment
 					set:html={title === "about"

src/components/Subtitle.astro

@@ -19,24 +19,24 @@ import Community from "@/assets/community.svg?raw";
 >
 	<div class="relative mb-12 inline-flex w-[fit-content] sm:mb-20 [&>svg]:h-5 sm:[&>svg]:h-12">
 		<BoxLines />
-		<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] opacity-0">
-			<div
-				class="relative w-[fit-content] animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] text-textProminent opacity-0 [&>svg]:h-6 sm:[&>svg]:h-8 md:[&>svg]:h-10 lg:[&>svg]:h-12 xl:[&>svg]:h-16 2xl:[&>svg]:h-20"
-			>
-				<Fragment
-					set:html={title === "education"
-						? Education
-						: title === "specialty"
-							? Specialty
-							: title === "mantra"
-								? Mantra
-								: title === "current"
-									? Current
-									: title === "past"
-										? Past
-										: Community}
-				/>
-			</div>
+		<div
+			class="nk-transition relative w-[fit-content] text-textProminent opacity-0 [&>svg]:h-6 sm:[&>svg]:h-8 md:[&>svg]:h-10 lg:[&>svg]:h-12 xl:[&>svg]:h-16 2xl:[&>svg]:h-20 [&_svg]:stroke-[hsl(var(--border-divider))] [&_svg]:stroke-[1px] [&_svg_path]:[stroke-dasharray:1000] [&_svg_path]:[stroke-dashoffset:1000]"
+			:class="inview && '[&_svg_path]:animate-[dashForward_1s_cubic-bezier(0.55,0,1,0.45)_forwards]'"
+			:style="inview && { opacity: 1 }"
+		>
+			<Fragment
+				set:html={title === "education"
+					? Education
+					: title === "specialty"
+						? Specialty
+						: title === "mantra"
+							? Mantra
+							: title === "current"
+								? Current
+								: title === "past"
+									? Past
+									: Community}
+			/>
 		</div>
 	</div>
 </div>