iteration

src/components/About.astro

@@ -7,14 +7,14 @@ import Subtitle from "./Subtitle.astro";
 ---
 
 <Section title="about">
-	<div class="mb-12 mt-2 sm:mb-24 sm:mt-4 sm:w-3/5">
-		<p class="subtitle-large mb-6 sm:mb-12">A.K.A 5 to 9? And the mantras that drive all 24.</p>
+	<div class="mb-12 mt-2 sm:mb-24 sm:mt-12 sm:w-3/5">
+		<p class="subtitle-large mb-6 sm:mb-12">A.K.A The 5 to 9.</p>
 
 		<p class="subtitle-large mb-2 sm:mb-4">
-			5 to 9, I sleep, eat, rock climb, and read science fiction (Do you have a recommendation?). I
-			am also going down an espresso rabbit hole and am attempting latte art. Result: Sucking at it
-			so far. But you know how Jake from Adventure Time says it, sucking at something is the first
-			step to being sorta good at something.
+			I rock climb, tinker, and read science fiction (Do you have a recommendation?). I am also
+			going down an espresso rabbit hole and am attempting latte art. Result: Sucking at it so far.
+			But you know how Jake from Adventure Time says it, sucking at something is the first step to
+			being sorta good at something.
 		</p>
 	</div>
 

src/components/BoxLines.astro

@@ -15,7 +15,7 @@ const { small, ...rest } = Astro.props;
   {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)` }"
+      :style="inview && { height: `calc(100% + 16px)`, transform: `translateY(-8px)` }"
     >
     </div>
     <div

src/components/Intro.astro

@@ -1,5 +1,7 @@
 ---
-import NahiyanKhan from "@/assets/nahiyankhan.svg?raw";
+import NahiyanKhan from "@/assets/nahiyankhan_chonk.svg?raw";
+import Nahiyan from "@/assets/nahiyan.svg?raw";
+import Khan from "@/assets/khan.svg?raw";
 import { Icon } from "astro-icon/components";
 import AboutSneak from "@/assets/about.gif";
 import BoxLines from "./BoxLines.astro";
@@ -9,21 +11,34 @@ import BoxLines from "./BoxLines.astro";
 	<div class="flex min-h-[50vh] flex-col">
 		<div class="w-full">
 			<div
-				class="relative -mt-[1px] mb-2 w-[fit-content] text-textProminent sm:mb-4 [&>svg]:h-7 sm:[&>svg]:h-24"
+				class="relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-4 [&_svg]:h-7 sm:[&_svg]:h-56"
 				x-ref="introNK"
 				x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
 				x-resize="$store.header.introNKHeight = $height"
 			>
-				<BoxLines />
-				<Fragment set:html={NahiyanKhan} />
+				<!-- <Fragment set:html={NahiyanKhan} /> -->
+				<div class="relative sm:mb-4 sm:mr-4">
+					<BoxLines />
+					<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
+						<Fragment set:html={Nahiyan} />
+					</div>
+				</div>
+				<div class="relative">
+					<BoxLines />
+					<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
+						<Fragment set:html={Khan} />
+					</div>
+				</div>
 			</div>
 		</div>
 		<p class="subtitle-large">(na-he-yahn). Or Khan. 🖖🏽</p>
 
 		<div class="mb-16 sm:mb-24 sm:w-3/5">
 			<div class="relative mb-8 mt-10 w-max sm:mb-16">
 				<BoxLines />
-				<img src={AboutSneak.src} class="" height={AboutSneak.height} alt="" />
+				<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
+					<img src={AboutSneak.src} class="" height={AboutSneak.height} alt="" />
+				</div>
 			</div>
 
 			<p class="subtitle-large mb-4 sm:mb-6">

src/components/Section.astro

@@ -12,7 +12,15 @@ import BoxLines from "./BoxLines.astro";
 		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">
+		<div class="relative -mt-[1px] w-max">
+			<BoxLines />
+			<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] opacity-0">
+				<p class="font-extrabold uppercase text-textProminent sm:text-[12rem] sm:leading-[12rem]">
+					/{title}
+				</p>
+			</div>
+		</div>
+		<!-- <div class="relative -mt-[1px] w-[fit-content] text-textProminent [&>svg]:h-8 sm:[&>svg]:h-24">
 			<BoxLines />
 			<Fragment
 				set:html={title === "about"
@@ -23,7 +31,7 @@ import BoxLines from "./BoxLines.astro";
 							? Projects
 							: Contact}
 			/>
-		</div>
+		</div> -->
 
 		<slot />
 	</div>

src/components/Subtitle.astro

@@ -13,7 +13,12 @@ import BoxLines from "./BoxLines.astro";
 		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
+		<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] opacity-0">
+			<p class="font-extrabold uppercase text-textProminent sm:text-8xl sm:leading-[8rem]">
+				/{title}
+			</p>
+		</div>
+		<!-- <Fragment
 			set:html={title === "education"
 				? Education
 				: title === "mantras"
@@ -25,6 +30,6 @@ import BoxLines from "./BoxLines.astro";
 							: Community}
 			<
 			div
-		/>
+		/> -->
 	</div>
 </div>

src/components/layout/Footer.astro

@@ -6,13 +6,13 @@ const year = new Date().getFullYear();
 ---
 
 <footer
-	class="h-12 w-full border-b duration-700 ease-[cubic-bezier(0.95,0.05,0.795,0.035)] sm:h-24"
+	class="h-12 w-full border-b border-t duration-700 ease-[cubic-bezier(0.95,0.05,0.795,0.035)] sm:h-24"
 	x-data
 	x-cloak
 	:style="$store.settings.open ? { marginLeft: `-320px` } : { marginLeft: `0px` }"
 >
 	<div
-		class="container mx-auto flex h-full items-end justify-between border-x border-l border-r text-sm font-normal"
+		class="container mx-auto flex h-full items-end justify-between overflow-hidden border-x border-l border-r text-sm font-normal"
 	>
 		<div class="me-0 sm:me-4">
 			&copy; {siteConfig.author}

src/components/layout/Header.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import NahiyanKhan from "@/assets/nahiyankhan.svg?raw";
+import NahiyanKhan from "@/assets/nahiyankhan_chonk.svg?raw";
 import BoxLines from "../BoxLines.astro";
 ---
 

src/styles/global.css

@@ -6,11 +6,11 @@
 	:root {
 		--slate-0: 0deg 0% 100%;
 		--slate-10: 233deg 100% 96%;
-		--slate-20: 231deg 19% 66%;
+		--slate-20: 233deg 28% 81%;
 		--slate-30: 233deg 22% 41%;
 		--slate-40: 231deg 26% 28%;
 		--slate-50: 233deg 29% 14%;
-		--slate-60: 233deg 15% 6%;
+		--slate-60: 233deg 14% 11%;
 	}
 
 	:root[data-theme="light"] {
@@ -41,9 +41,9 @@
 		--theme-accent-2: 0deg 0% 93%;
 		--theme-quote: 102deg 100% 86%;
 
-		--text-prominent: var(--slate-10);
+		--text-prominent: var(--slate-20);
 		--text-standard: var(--slate-10);
-		--text-subtle: var(--slate-20);
+		--text-subtle: var(--slate-10);
 
 		--border-divider: var(--slate-40);
 

tailwind.config.ts

@@ -80,6 +80,16 @@ export default {
 
 				divider: "hsl(var(--border-divider) / <alpha-value>)",
 			},
+			keyframes: {
+				fadein: {
+					"0%": {
+						opacity: "0",
+					},
+					"100%": {
+						opacity: "1",
+					},
+				},
+			},
 			fontFamily: {
 				// Add any custom fonts here
 				sans: ['JetBrains Mono Variable',...fontFamily.sans],