iteration

src/components/BoxLines.astro

@@ -1,6 +1,7 @@
 ---
 const random = Math.floor(Math.random() * 10000);
 const boxLineRef = `boxLines${random}`;
+const { small, ...rest } = Astro.props;
 ---
 
 <div
@@ -9,20 +10,39 @@ const boxLineRef = `boxLines${random}`;
 	@scroll.window=`inview = $refs.${boxLineRef}.getBoundingClientRect().top <= (window.innerHeight * 3/4)`
 	x-init=`inview = $refs.${boxLineRef}.getBoundingClientRect().top <= (window.innerHeight * 3/4)`
 	class="absolute h-full w-full"
+	{...rest}
 >
-	<div
-		class="absolute right-0 top-0 h-full w-[1px] bg-divider transition-all duration-1000"
-		:style="inview && { height: `calc(100% + 64px)`, transform: `translateY(-32px)` }"
-	>
-	</div>
-	<div
-		class="absolute left-0 top-0 h-[1px] w-full bg-divider transition-all duration-1000"
-		:style="inview && { width: `calc(100% + 32px)` }"
-	>
-	</div>
-	<div
-		class="absolute bottom-0 left-0 h-[1px] w-full bg-divider transition-all duration-1000"
-		:style="inview && { width: `calc(100% + 32px)` }"
-	>
-	</div>
+  {small ? (
+    <div
+      class="absolute right-0 top-0 h-0 w-[1px] bg-divider transition-all duration-1000"
+      :style="inview && { height: `calc(100% + 16px)`, transform: `translateY(0px)` }"
+    >
+    </div>
+    <div
+      class="absolute left-0 top-0 h-[1px] w-0 bg-divider transition-all duration-1000"
+      :style="inview && { width: `calc(100% + 16px)` }"
+    >
+    </div>
+    <div
+      class="absolute bottom-0 left-0 h-[1px] w-0 bg-divider transition-all duration-1000"
+      :style="inview && { width: `calc(100% + 16px)` }"
+    >
+    </div>
+  ) : (
+    <div
+      class="absolute right-0 top-0 h-0 w-[1px] bg-divider transition-all duration-1000"
+      :style="inview && { height: `calc(100% + 64px)`, transform: `translateY(-32px)` }"
+    >
+    </div>
+    <div
+      class="absolute left-0 top-0 h-[1px] w-0 bg-divider transition-all duration-1000"
+      :style="inview && { width: `calc(100% + 32px)` }"
+    >
+    </div>
+    <div
+      class="absolute bottom-0 left-0 h-[1px] w-0 bg-divider transition-all duration-1000"
+      :style="inview && { width: `calc(100% + 32px)` }"
+    >
+    </div>
+  )}
 </div>

src/components/Intro.astro

@@ -5,15 +5,16 @@ import AboutSneak from "@/assets/about.gif";
 import BoxLines from "./BoxLines.astro";
 ---
 
-<div x-data class="border-x border-divider [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]">
+<div x-data class="border-x [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]">
 	<div class="flex min-h-[50vh] flex-col">
 		<div class="w-full">
 			<div
-				class="mb-2 w-[fit-content] text-textProminent sm:mb-4 [&>svg]:h-7 sm:[&>svg]:h-24"
+				class="relative -mt-[1px] mb-2 w-[fit-content] text-textProminent sm:mb-4 [&>svg]:h-7 sm:[&>svg]:h-24"
 				x-ref="introNK"
 				x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
 				x-resize="$store.header.introNKHeight = $height"
 			>
+				<BoxLines />
 				<Fragment set:html={NahiyanKhan} />
 			</div>
 		</div>

src/components/Section.astro

@@ -4,16 +4,16 @@ import About from "@/assets/about.svg?raw";
 import Experience from "@/assets/experience.svg?raw";
 import Projects from "@/assets/projects.svg?raw";
 import Contact from "@/assets/contact.svg?raw";
+import BoxLines from "./BoxLines.astro";
 ---
 
-<div
-	x-data
-	class="border-x border-transparent [transition:border-color_.3s_.7s]"
-	:style="{ borderColor: `hsl(var(--border-divider))` }"
-	{...rest}
->
-	<div class="flex min-h-[50vh] flex-col border-t" x-ref={title}>
-		<div class="w-[fit-content] text-textProminent [&>svg]:h-8 sm:[&>svg]:h-24">
+<div x-data class="border-x [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]" {...rest}>
+	<div
+		class="flex min-h-[50vh] flex-col border-t [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]"
+		x-ref={title}
+	>
+		<div class="relative -mt-[1px] w-[fit-content] text-textProminent [&>svg]:h-8 sm:[&>svg]:h-24">
+			<BoxLines />
 			<Fragment
 				set:html={title === "about"
 					? About

src/components/Subtitle.astro

@@ -5,12 +5,14 @@ import Mantras from "@/assets/mantras.svg?raw";
 import Current from "@/assets/current.svg?raw";
 import Past from "@/assets/past.svg?raw";
 import Community from "@/assets/community.svg?raw";
+import BoxLines from "./BoxLines.astro";
 ---
 
-<div class="border-t" {...rest}>
+<div class="border-t [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]" {...rest}>
 	<div
-		class="mb-12 inline-flex w-[fit-content] text-textProminent sm:mb-24 [&>svg]:h-5 sm:[&>svg]:h-12"
+		class="relative -mt-[1px] mb-12 inline-flex w-[fit-content] text-textProminent sm:mb-24 [&>svg]:h-5 sm:[&>svg]:h-12"
 	>
+		<BoxLines />
 		<Fragment
 			set:html={title === "education"
 				? Education

src/components/layout/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
 import NahiyanKhan from "@/assets/nahiyankhan.svg?raw";
+import BoxLines from "../BoxLines.astro";
 ---
 
 <header
@@ -23,10 +24,11 @@ import NahiyanKhan from "@/assets/nahiyankhan.svg?raw";
 			x-cloak
 		>
 			<div
-				class="text-textProminent [&>svg]:h-5 sm:[&>svg]:h-6"
+				class="relative text-textProminent [&>svg]:h-5 sm:[&>svg]:h-6"
 				x-ref="headerNK"
 				x-resize="headerNKHeight = $height"
 			>
+				<BoxLines small />
 				<Fragment set:html={NahiyanKhan} />
 			</div>
 		</div>

src/styles/global.css

@@ -5,7 +5,7 @@
 @layer base {
 	:root {
 		--slate-0: 0deg 0% 100%;
-		--slate-10: 233deg 32% 80%;
+		--slate-10: 233deg 100% 96%;
 		--slate-20: 231deg 19% 66%;
 		--slate-30: 233deg 22% 41%;
 		--slate-40: 231deg 26% 28%;
@@ -27,7 +27,7 @@
 		--text-standard: var(--slate-50);
 		--text-subtle: var(--slate-30);
 
-		--border-divider: var(--slate-10);
+		--border-divider: var(--slate-20);
 
 		--redact-bg: 0deg 0% 98%;
 	}