push 2 prod

package.json

@@ -14,8 +14,8 @@
 		"check": "astro check"
 	},
 	"engines": {
-    "node": "20.x"
-  },
+		"node": "20.x"
+	},
 	"dependencies": {
 		"@alpinejs/intersect": "^3.14.1",
 		"@alpinejs/persist": "^3.14.1",
@@ -25,8 +25,9 @@
 		"@astrojs/rss": "4.0.7",
 		"@astrojs/sitemap": "3.1.6",
 		"@astrojs/tailwind": "5.1.0",
+		"@fontsource-variable/inter": "^5.1.0",
 		"@fontsource/ibm-plex-mono": "^5.0.14",
-		"@fontsource/inter": "^5.0.20",
+		"@fontsource/rubik-mono-one": "^5.1.0",
 		"alpinejs": "^3.14.1",
 		"alpinejs-overlap": "^1.0.5",
 		"astro": "4.14.3",
@@ -70,6 +71,7 @@
 		"prettier-plugin-tailwindcss": "^0.6.6",
 		"reading-time": "^1.5.0",
 		"remark-unwrap-images": "^4.0.0",
+		"tailwind-clip-path": "^1.0.0",
 		"tailwindcss": "^3.4.10",
 		"typescript": "^5.5.4"
 	}

src/alpine.ts

@@ -1,6 +1,6 @@
 import type { Alpine } from 'alpinejs'
 import persist from '@alpinejs/persist'
-import overlap from 'alpinejs-overlap'
+import intersect from '@alpinejs/intersect'
 
 enum MODE {
   SYSTEM = "system",
@@ -18,14 +18,14 @@ interface ThemeStore {
 interface SectionTracker {
   about: number;
   projects: number;
-  experience: number,
+  experiences: number,
   contact: number;
   getTransform: () => string;
 }
 
 export default (Alpine: Alpine) => {
   Alpine.plugin(persist)
-  Alpine.plugin(overlap)
+  Alpine.plugin(intersect)
 
   Alpine.store('theme', {
     mode: Alpine.$persist(MODE.SYSTEM).as("mode") as unknown as MODE,
@@ -58,7 +58,7 @@ export default (Alpine: Alpine) => {
     nahiyankhan: 999,
     nahiyankhanHeight: 0,
     about: 999,
-    experience: 999,
+    experiences: 999,
     projects: 999,
     contact: 999,
 
@@ -67,7 +67,7 @@ export default (Alpine: Alpine) => {
         return `0px`;
       } else if (this.projects < 100) {
         return `28px`;
-      } else if (this.experience < 100) {
+      } else if (this.experiences < 100) {
         return `56px`;
       } else if (this.about < 100) {
         return `84px`;

src/components/Experiences.astro

@@ -2,25 +2,35 @@
 import CashAppLogo from "@/assets/cash_app.svg?raw";
 import ADPLogo from "@/assets/adp.svg?raw";
 import PearsonLogo from "@/assets/pearson.svg?raw";
+import Current from "@/assets/current_chunky.svg?raw";
+import Past from "@/assets/past_chunky.svg?raw";
+import Other from "@/assets/other_chunky.svg?raw";
 ---
 
 <div
-	class="grid grid-cols-[1fr_24fr_1fr] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
+	class="grid grid-cols-[100px_1fr_100px] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
 >
 	<div></div>
 
 	<div
-		class="transition-all"
+		class=""
 		x-data="{ cash: false, adp: false, pearson: false, macalester: false, isHover() { return this.cash || this.adp || this.pearson || this.macalester } }"
 	>
-		<h3 class="mb-12 mt-24 text-3xl font-bold">Current</h3>
+		<!-- <h3 class="mb-12 mt-24 text-3xl font-bold">Current</h3> -->
 
 		<div
-			class="bg-[#00D64F]x flex h-[500px] items-center transition-all"
+			class="mt-24 text-textProminent [&>svg]:h-[60px] [&>svg]:transition-colors [&>svg]:duration-75"
+		>
+			<!-- <Fragment set:html={Current} /> -->
+			<h3 class="mb-12 mt-24 font-mono text-6xl font-bold text-textStandard">#Current</h3>
+		</div>
+
+		<div
+			class="bg-[#00D64F]x mb-12 mt-16 flex items-center"
 			@mouseover="cash = true"
 			@mouseover.away="cash = false"
 		>
-			<!-- <div class="h-56 w-56 transition-all">
+			<!-- <div class="h-56 w-56 ">
 				<Fragment set:html={CashAppLogo} />
 			</div> -->
 
@@ -29,7 +39,7 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 					<Fragment set:html={CashAppLogo} />
 					<div class="ml-4">
 						<p class="header-standard text-2xl leading-9">Engineering Lead, Design Systems</p>
-						<p class="header-standard text-xl">
+						<p class="text-xl font-medium">
 							Cash App <span class="text-textSubtle"> | April 2022 - Current</span>
 						</p>
 					</div>
@@ -47,10 +57,17 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 			</div>
 		</div>
 
-		<h3 class="mb-12 mt-24 text-3xl font-bold">Past</h3>
+		<!-- <h3 class="mb-12 mt-24 text-3xl font-bold">Past</h3> -->
 
 		<div
-			class="bg-[#ed1a2d]x flex h-[500px] items-center !border-t-0 transition-all"
+			class="mt-16 text-textProminent [&>svg]:h-[60px] [&>svg]:transition-colors [&>svg]:duration-75"
+		>
+			<!-- <Fragment set:html={Past} /> -->
+			<h3 class="mb-12 mt-24 font-mono text-6xl font-bold text-textStandard">#Past</h3>
+		</div>
+
+		<div
+			class="bg-[#ed1a2d]x my-20 flex items-center"
 			@mouseover="adp = true"
 			@mouseover.away="adp = false"
 		>
@@ -59,8 +76,8 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 					<Fragment set:html={ADPLogo} />
 					<div class="ml-4">
 						<p class="header-standard text-2xl leading-9">Lead UX Engineer, Design Systems</p>
-						<p class="header-standard text-xl">
-							Cash App <span class="text-textSubtle"> | March 2018 - April 2022</span>
+						<p class="text-xl font-medium">
+							ADP <span class="text-textSubtle"> | March 2018 - April 2022</span>
 						</p>
 					</div>
 				</div>
@@ -76,7 +93,7 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 		</div>
 
 		<div
-			class="bg-[#027fa3]x flex h-[500px] items-center !border-l-0 transition-all"
+			class="bg-[#027fa3]x mb-12 mt-16 flex items-center"
 			@mouseover="pearson = true"
 			@mouseover.away="pearson = false"
 		>
@@ -85,8 +102,8 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 					<Fragment set:html={PearsonLogo} />
 					<div class="ml-4">
 						<p class="header-standard text-2xl leading-9">Product Designer</p>
-						<p class="header-standard text-xl">
-							Cash App <span class="text-textSubtle"> | May 2013 - March 2018</span>
+						<p class="text-xl font-medium">
+							Pearson <span class="text-textSubtle"> | May 2013 - March 2018</span>
 						</p>
 					</div>
 				</div>
@@ -100,19 +117,26 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 			</div>
 		</div>
 
-		<h3 class="mb-12 mt-24 text-3xl font-bold">Other</h3>
+		<!-- <h3 class="mb-12 mt-24 text-3xl font-bold">Other</h3> -->
+
+		<div
+			class="mt-16 text-textProminent [&>svg]:h-[60px] [&>svg]:transition-colors [&>svg]:duration-75"
+		>
+			<!-- <Fragment set:html={Other} /> -->
+			<h3 class="mb-12 mt-24 font-mono text-6xl font-bold text-textStandard">#Other</h3>
+		</div>
 
 		<div
-			class="flex h-[500px] items-center !border-l-0 transition-all"
+			class="my-20 flex items-center"
 			@mouseover="macalester = true"
 			@mouseover.away="macalester = false"
 		>
-			<div class="w-1/2py-8 pr-8">
+			<div class="w-1/2 py-8 pr-8">
 				<div class="flex [&>svg]:w-16">
 					<Fragment set:html={PearsonLogo} />
 					<div class="ml-4">
 						<p class="header-standard text-2xl leading-9">Graphic Designer</p>
-						<p class="header-standard text-xl">
+						<p class="text-xl font-medium">
 							Macalester College
 							<span class="text-textSubtle"> | September 2010 - May 2013</span>
 						</p>

src/components/ExperiencesTest.astro

@@ -5,7 +5,7 @@ import PearsonLogo from "@/assets/pearson.svg?raw";
 ---
 
 <div
-	class="grid grid-cols-[1fr_24fr_1fr] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
+	class="grid grid-cols-[100px_1fr_100px] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
 >
 	<div></div>
 

src/components/Intro.astro

@@ -4,18 +4,19 @@ import NahiyanKhanLogo from "@/assets/nahiyankhan_chunky.svg?raw";
 
 <div
 	x-data
-	class="grid grid-cols-[1fr_24fr_1fr] divide-x border-b border-borderDivider transition-all [&>div]:border-borderDivider"
+	class="grid grid-cols-[100px_1fr_100px] divide-x border-b border-borderDivider transition-all [&>div]:border-borderDivider"
 >
 	<div></div>
 	<div class="flex h-[80vh] flex-col justify-center">
 		<div
-			class="mb-8 w-11/12 text-textProminent"
+			class="mb-8 w-11/12 text-textProminent [&>svg]:transition-colors [&>svg]:duration-75"
 			x-ref={"nahiyankhan"}
 			x-init="$store.state.nahiyankhanHeight = $refs.nahiyankhan.getBoundingClientRect().height"
 			@scroll.window="$store.state.nahiyankhan = $refs.nahiyankhan.getBoundingClientRect().top"
 			x-on:resize.window="$store.state.nahiyankhanHeight = $refs.nahiyankhan.getBoundingClientRect().height"
 		>
-			<Fragment set:html={NahiyanKhanLogo} />
+			<!-- <Fragment set:html={NahiyanKhanLogo} /> -->
+			<h2 class="font-mono text-[9rem] leading-[8rem] tracking-tighter">Nahiyan Khan</h2>
 		</div>
 		<!-- <p class="subtitle-large mb-20 w-6/12 leading-[1.75]">
 			Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary. Existential

src/components/SectionTitle.astro

@@ -4,57 +4,58 @@ import Experience from "@/assets/experience_chunky.svg?raw";
 import Projects from "@/assets/projects_chunky.svg?raw";
 import Contact from "@/assets/contact_chunky.svg?raw";
 
-const { title, subtitle } = Astro.props;
+const { title, subtitle, class: className, ...rest } = Astro.props;
 ---
 
 <div
-	x-data
-	class="grid grid-cols-[1fr_24fr_1fr] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
+	x-data="{ shown: false }"
+	class:list={[
+		"grid grid-cols-[100px_1fr_100px] divide-x border-b border-borderDivider [&>div]:border-borderDivider",
+		className,
+	]}
+	{...rest}
 >
 	<div></div>
 	<div class="flex min-h-[50vh] flex-col justify-center" x-ref={title}>
-
-		{
-			subtitle && (
-			<div class="mt-32"></div>
-		)
-		}
+		{subtitle && <div class="mt-32" />}
 
 		<div
-			class="[&>svg]:h-[120px] text-textProminent"
+			class="inline-flex text-textProminent [&>svg]:h-[120px] [&>svg]:transition-colors [&>svg]:duration-75"
 			@scroll.window=`$store.state.${title} = $refs.${title}.getBoundingClientRect().top;`
+			x-intersect.full="shown = true"
 		>
-			<Fragment
+			<span
+				class="font-mono text-[9rem] tracking-tighter [line-height:initial]"
+				x-show="shown"
+				x-transition:enter="transition ease-out duration-300"
+				x-transition:enter-start="opacity-0"
+				x-transition:enter-end="opacity-100"
+			>
+				/
+			</span>
+			<div class="title-clip text-[9rem]">
+				<!-- clip-path-polygon-[`calc(tan()*100%)`_0,_100%_0,_100%_100%,_0_100%] -->
+				<h2
+					class="font-mono text-[9rem] tracking-tighter text-textProminent [line-height:initial]"
+					x-show="shown"
+					x-transition:enter="transition ease-in-out duration-[300ms]"
+					x-transition:enter-start="translate-x-[-100%]"
+					x-transition-enter-end="translate-x-0"
+				>
+					{title}
+				</h2>
+			</div>
+			<!-- <Fragment
 				set:html={title === "about"
 					? About
 					: title === "experience"
 						? Experience
 						: title === "projects"
 							? Projects
 							: Contact}
-			/>
+			/> -->
 		</div>
-
-		{
-			subtitle && (
-				<div class="w-6/12 mt-8">
-					<p class="subtitle-large mb-8 leading-[1.75]">
-						Am an engineer. Am a designer. Am both? Am neither? Definitions are arbitrary.
-						Existential crisis is real. But 9 to 5, I lead design systems strategy and
-						infrastructure to implement craft at scale.
-					</p>
-
-					<p class="subtitle-large leading-[1.75]">
-						And 5 to 9, I read science fiction, tinker a bunch, and ocasionally rock climb. 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>
-
-				<div class="mb-32"></div>
-			)
-		}
+		<slot />
 	</div>
 	<div></div>
 </div>

src/components/SocialList.astro

@@ -4,7 +4,7 @@ import { socialLinks } from "@/site-config";
 ---
 
 <div
-	class="grid grid-cols-[1fr_24fr_1fr] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
+	class="grid grid-cols-[100px_1fr_100px] divide-x border-b border-borderDivider [&>div]:border-borderDivider"
 >
 	<div></div>