iteration (#53)

* added manifest pngs

* wip

public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-	"name": "Astro Theme Cactus Demo",
-	"short_name": "Astro_Cactus",
+	"name": "Nahiyan Khan - Personal Portfolio",
+	"short_name": "Nahiyan_Khan",
 	"description": "Starter blog site for Astro",
 	"icons": [
 		{

src/components/About.astro

@@ -95,7 +95,7 @@ import EasterEgg from "./EasterEgg.astro";
 
 		<div class="mb-2 text-base font-medium sm:text-xl">Personal</div>
 
-		<ul class="mb-8 sm:mb-16">
+		<ul class="mb-8 sm:mb-40">
 			<li class="flex items-center">
 				<div class="full justify-left flex items-center">
 					<Icon

src/components/Experiences.astro

@@ -17,10 +17,14 @@ import BoxLines from "./BoxLines.astro";
 		<p class="leading-[1.6] sm:leading-[1.75]">A.K.A The things I am more than sorta good at.</p>
 	</div>
 
-	<div class="mb-14 w-11/12 sm:mb-24 lg:w-3/5 xl:w-1/2">
+	<div class="mb-14 w-11/12 sm:mb-24 lg:w-3/5 xl:w-1/2" x-data="{ inview: false }">
 		<div class="relative mb-8 mt-10 sm:mb-16">
 			<BoxLines />
-			<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">
+			<div
+				class="opacity-0"
+				:class="{ 'animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards]': inview }"
+				x-intersect.full="inview = true"
+			>
 				<img src={ExperienceSneak.src} class="" height={ExperienceSneak.height} alt="" />
 			</div>
 		</div>
@@ -29,7 +33,7 @@ import BoxLines from "./BoxLines.astro";
 	<Subtitle title="current" />
 
 	<div class="w-11/12 md:w-3/5 lg:w-1/2">
-		<div class="mb-12 sm:mb-20">
+		<div class="mb-12 sm:mb-40">
 			<div class="mb-4 flex flex-col sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
 				<Fragment set:html={CashAppLogo} />
 				<div class="mt-3 sm:ml-4 sm:mt-0">
@@ -87,7 +91,7 @@ import BoxLines from "./BoxLines.astro";
 			</p>
 		</div>
 
-		<div class="mb-12 sm:mb-20">
+		<div class="mb-12 sm:mb-40">
 			<div class="mb-4 flex flex-col sm:flex-row [&>svg]:w-12 sm:[&>svg]:w-16">
 				<Fragment set:html={MacalesterLogo} />
 				<div class="mt-3 sm:ml-4 sm:mt-0">
@@ -109,7 +113,7 @@ import BoxLines from "./BoxLines.astro";
 	<Subtitle title="community" />
 
 	<div class="w-11/12 md:w-3/5 lg:w-1/2">
-		<div class="mb-12 sm:mb-20">
+		<div class="mb-12 sm:mb-40">
 			<div class="mb-4 flex flex-col sm:flex-row">
 				<div class="block dark:hidden [&>svg]:w-12 sm:[&>svg]:w-16">
 					<Fragment set:html={DesignXLogoWhite} />
@@ -127,13 +131,16 @@ import BoxLines from "./BoxLines.astro";
 			</div>
 
 			<div class="mt-8">
-				<iframe
-					class="mb-4 w-full [aspect-ratio:16/9]"
-					src="https://www.youtube.com/embed/wLSKcR7uAGE"
-					title="Nahiyan Khan (Lead UX Engineer of Design Systems, Lifion by ADP)- Visualizing Design Tokens at Scale"
-					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-					referrerpolicy="strict-origin-when-cross-origin"
-					allowfullscreen></iframe>
+				<div class="relative">
+					<BoxLines />
+					<iframe
+						class="mb-4 w-full [aspect-ratio:16/9]"
+						src="https://www.youtube.com/embed/wLSKcR7uAGE"
+						title="Nahiyan Khan (Lead UX Engineer of Design Systems, Lifion by ADP)- Visualizing Design Tokens at Scale"
+						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+						referrerpolicy="strict-origin-when-cross-origin"
+						allowfullscreen></iframe>
+				</div>
 
 				<p class="mb-4 leading-[1.6] sm:leading-[1.75]">
 					Topic: “Visualizing Design Tokens at Scale”

src/components/Intro.astro

@@ -8,11 +8,11 @@ import BoxLines from "./BoxLines.astro";
 import EasterEgg from "./EasterEgg.astro";
 ---
 
-<div x-data class="border-x [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]">
+<div x-data class="nk-transition border-x">
 	<div class="flex min-h-[50vh] flex-col">
 		<div class="w-full">
 			<div
-				class="relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-4 [&_svg]:h-14 [&_svg]:[transition:all_.3s_cubic-bezier(0.55,0,1,0.45)] sm:[&_svg]:h-[5.5rem] md:[&_svg]:h-[6.5rem] lg:[&_svg]:h-36 xl:[&_svg]:h-[11.5rem] 2xl:[&_svg]:h-56"
+				class="[&_svg]:nk-transition relative -mt-[1px] mb-2 flex w-[fit-content] flex-wrap text-textProminent sm:mb-4 [&_svg]:h-14 sm:[&_svg]:h-[5.5rem] md:[&_svg]:h-[6.5rem] lg:[&_svg]:h-36 xl:[&_svg]:h-[11.5rem] 2xl:[&_svg]:h-56"
 				x-ref="introNK"
 				x-init="$store.header.introNKHeight = $refs.introNK.getBoundingClientRect().height"
 				x-resize="$store.header.introNKHeight = $height"
@@ -34,7 +34,7 @@ import EasterEgg from "./EasterEgg.astro";
 		</div>
 		<p class="subtitle-large">(na-he-yahn) or khan 🖖🏽</p>
 
-		<div class="mb-14 w-11/12 sm:mb-24 lg:w-3/5 xl:w-1/2">
+		<div class="mb-14 w-11/12 sm:mb-40 lg:w-3/5 xl:w-1/2">
 			<div class="relative mb-8 mt-10 sm:mb-16">
 				<BoxLines />
 				<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_1s_forwards] opacity-0">

src/components/Section.astro

@@ -3,11 +3,8 @@ const { title, ...rest } = Astro.props;
 import BoxLines from "./BoxLines.astro";
 ---
 
-<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 x-data class="nk-transition border-x" {...rest}>
+	<div class="nk-transition flex min-h-[50vh] flex-col border-t" x-ref={title}>
 		<div class="relative w-max">
 			<BoxLines />
 			<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] opacity-0">

src/components/Subtitle.astro

@@ -3,9 +3,9 @@ const { title, ...rest } = Astro.props;
 import BoxLines from "./BoxLines.astro";
 ---
 
-<div class="border-t [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]" {...rest}>
+<div class="nk-transition border-t" {...rest}>
 	<div
-		class="relative mb-12 inline-flex w-[fit-content] text-textProminent sm:mb-24 [&>svg]:h-5 sm:[&>svg]:h-12"
+		class="relative mb-12 inline-flex w-[fit-content] text-textProminent 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">

src/components/layout/Header.astro

@@ -7,7 +7,7 @@ import BoxLines from "../BoxLines.astro";
 ---
 
 <header
-	class="fixed z-10 h-12 w-full border-y bg-bgColor [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)] sm:h-24 [&::after]:absolute [&::after]:bottom-[-1px] [&::after]:left-[100%] [&::after]:h-[1px] [&::after]:w-full [&::after]:bg-divider [&::after]:content-['']"
+	class="nk-transition fixed z-10 h-12 w-full border-y bg-bgColor sm:h-24 [&::after]:absolute [&::after]:bottom-[-1px] [&::after]:left-[100%] [&::after]:h-[1px] [&::after]:w-full [&::after]:bg-divider [&::after]:content-['']"
 	x-ref="header"
 	x-data="{ endScroll: false, headerHeight: $refs.header.getBoundingClientRect().height, headerNKHeight: $refs.headerNK.getBoundingClientRect().height, scroll: this.headerHeight }"
 	x-init="$store.header.headerHeight = $refs.header.getBoundingClientRect().height"
@@ -17,7 +17,7 @@ import BoxLines from "../BoxLines.astro";
 >
 	<!-- $store.settings.open ? { transform: `translateX(-320px)` } : { transform: `translateX(0px)` } -->
 	<div
-		class="container mx-auto flex h-full flex-row justify-between overflow-hidden border-x [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]"
+		class="nk-transition container mx-auto flex h-full flex-row justify-between overflow-hidden border-x"
 	>
 		<div
 			class="flex h-full"

src/layouts/404.astro

@@ -21,16 +21,10 @@ const {
 		<BaseHead articleDate={articleDate} description={description} ogImage={ogImage} title={title} />
 		<ViewTransitions />
 	</head>
-	<body
-		class="bg-bgColor text-sm font-light [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)] sm:text-base sm:leading-[1.75]"
-	>
+	<body class="nk-transition bg-bgColor text-sm font-light sm:text-base sm:leading-[1.75]">
 		<ThemeProvider />
-		<main
-			x-data
-			id="main"
-			class="min-h-screen w-full pt-12 tracking-wider [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)] sm:pt-24"
-		>
-			<div class="container mx-auto flex flex-col [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]">
+		<main x-data id="main" class="nk-transition min-h-screen w-full pt-12 tracking-wider sm:pt-24">
+			<div class="nk-transition container mx-auto flex flex-col">
 				<slot />
 			</div>
 		</main>

src/layouts/Base.astro

@@ -27,20 +27,18 @@ const {
 		<BaseHead articleDate={articleDate} description={description} ogImage={ogImage} title={title} />
 		<ViewTransitions />
 	</head>
-	<body
-		class="bg-bgColor text-sm font-light [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)] sm:text-base sm:leading-[1.75]"
-	>
+	<body class="nk-transition bg-bgColor text-sm font-light sm:text-base sm:leading-[1.75]">
 		<ThemeProvider />
 		<SkipLink />
 		<Header />
 		<main
 			x-data
 			id="main"
-			class="min-h-screen w-full pt-12 tracking-wider [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)] sm:pt-24"
+			class="nk-transition min-h-screen w-full pt-12 tracking-wider sm:pt-24"
 			:style="$store.settings.open && { transform: `translateX(-320px)` }"
 		>
 			<div
-				class="container mx-auto flex flex-col [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]"
+				class="nk-transition container mx-auto flex flex-col"
 				x-ref="container"
 				x-init="$store.container.width = $refs.container.getBoundingClientRect().width"
 				x-resize="$store.container.width = $width"

src/pages/404.astro

@@ -9,10 +9,8 @@ const meta = {
 ---
 
 <PageLayout meta={meta}>
-	<div x-data class="border-x [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]">
-		<div
-			class="flex h-full min-h-[50vh] flex-col border-y [transition:all_.3s_cubic-bezier(0.55,0,1,0.45)]"
-		>
+	<div x-data class="nk-transition border-x">
+		<div class="nk-transition flex h-full min-h-[50vh] flex-col border-y">
 			<div class="relative mb-12 w-max">
 				<BoxLines />
 				<div class="animate-[fadein_.5s_cubic-bezier(0.55,0,1,0.45)_.7s_forwards] opacity-0">

src/styles/global.css

@@ -22,7 +22,8 @@
 		--theme-accent: 351deg 66% 48%;
 		--theme-accent-2: 0deg 0% 7%;
 		--theme-quote: 351deg 66% 48%;
-
+
+		--text-inverse: black;
 		--text-prominent: var(--slate-60);
 		--text-standard: var(--slate-50);
 		--text-subtle: var(--slate-30);
@@ -41,6 +42,7 @@
 		--theme-accent-2: 0deg 0% 93%;
 		--theme-quote: 102deg 100% 86%;
 
+		--text-inverse: white;
 		--text-prominent: var(--slate-20);
 		--text-standard: var(--slate-10);
 		--text-subtle: var(--slate-10);

tailwind.config.ts

@@ -27,7 +27,7 @@ export default {
 		plugin(({ addComponents }) => {
 			addComponents({
 				".header-standard": {
-					"@apply text-lg sm:text-xl leading-6 sm:leading-9 font-semibold tracking-tight": {},
+					"@apply text-lg sm:text-xl leading-6 sm:leading-9 font-semibold tracking-tight text-textInverse": {},
 				},
 				".subtitle-large": {
 					"@apply leading-[1.6] sm:leading-[1.75] text-textStandard tracking-wider": {},
@@ -61,6 +61,9 @@ export default {
 						"@apply md:scale-x-100 md:translate-x-0": {},
 					},
 				},
+				".nk-transition": {
+					"@apply [transition:all_.3s_cubic-bezier(0.55,0,1,0.45),color_0s_ease-in]": {},
+				},
 			});
 		}),
 	],
@@ -74,6 +77,7 @@ export default {
 				quote: "hsl(var(--theme-quote) / <alpha-value>)",
 				textColor: "hsl(var(--theme-text) / <alpha-value>)",
 
+				textInverse: "hsl(var(--text-inverse) / <alpha-value>)",
 				textProminent: "hsl(var(--text-prominent) / <alpha-value>)",
 				textStandard: "hsl(var(--text-standard) / <alpha-value>)",
 				textSubtle: "hsl(var(--text-subtle) / <alpha-value>)",