wip (#35)

src/components/About.astro

@@ -21,13 +21,6 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
 				craft at scale.
 			</p>
 
-			<p class="mb-4 leading-[1.6] sm:mb-6 sm: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: Let's say I won't be
-				winning any medals. But you know how Jake in Adventure Time says it, sucking at something is
-				the first step to being sorta good at something.
-			</p>
-
 			<a
 				class="link relative flex w-fit items-center text-textProminent underline"
 				href="/nahiyankhan_resume.pdf"
@@ -55,7 +48,7 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
 			<Fragment set:html={JHULogo} />
 			<div class="mt-3 sm:ml-4 sm:mt-0">
 				<p class="header-standard">Masters in Computer Science</p>
-				<p class="font-medium sm:text-xl">
+				<p class="text-sm font-normal leading-[1.6] sm:text-base">
 					Johns Hopkins University <span class="text-textSubtle"> | 2019 - 2022</span>
 				</p>
 			</div>
@@ -69,7 +62,7 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
 			<Fragment set:html={MacalesterLogo} />
 			<div class="mt-3 sm:ml-4 sm:mt-0">
 				<p class="header-standard">Bachelor of Arts</p>
-				<p class="text-sm font-medium leading-[1.6] sm:text-xl">
+				<p class="text-sm font-normal leading-[1.6] sm:text-base">
 					Macalester College <span class="text-textSubtle"> | 2009 - 2013</span>
 				</p>
 			</div>
@@ -78,18 +71,20 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
 		<p class="">Math Major, Computer Science and Art Minors</p>
 	</div>
 
-	<div class="mb-12 inline-flex border-t text-textProminent sm:mb-24 [&>svg]:h-5 sm:[&>svg]:h-12">
+	<div class="mb-8 inline-flex border-t text-textProminent sm:mb-16 [&>svg]:h-5 sm:[&>svg]:h-12">
 		<Fragment set:html={Mantras} />
 	</div>
 
-	<ul class="mb-16 sm:mb-24">
+	<div class="mb-2 text-xl font-medium sm:mb-4">Work</div>
+
+	<ul class="mb-4 sm:mb-8 sm:w-1/2">
 		<li class="mb-1 flex items-center sm:mb-2">
 			<div class="full justify-left flex items-center">
 				<Icon
 					aria-hidden="true"
 					class="h-4 w-4 sm:h-8 sm:w-8"
 					focusable="false"
-					name="mdi:blinds-open"
+					name="mdi:circle-small"
 				/>
 			</div>
 			<p class="pl-4">Work in the open</p>
@@ -101,7 +96,7 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
 					aria-hidden="true"
 					class="h-4 w-4 sm:h-8 sm:w-8"
 					focusable="false"
-					name="mdi:file-document-edit-outline"
+					name="mdi:circle-small"
 				/>
 			</div>
 			<p class="pl-4">Document it all</p>
@@ -113,10 +108,52 @@ import MacalesterLogo from "@/assets/macalester.svg?raw";
 					aria-hidden="true"
 					class="h-4 w-4 sm:h-8 sm:w-8"
 					focusable="false"
-					name="mdi:handshake-outline"
+					name="mdi:circle-small"
 				/>
 			</div>
 			<p class="pl-4">Trust by default</p>
 		</li>
 	</ul>
+
+	<div class="mb-2 text-xl font-medium sm:mb-4">Personal</div>
+
+	<ul class="mb-8 sm:mb-16 sm:w-1/2">
+		<li class="mb-1 flex items-center sm:mb-2">
+			<div class="full justify-left flex items-center">
+				<Icon
+					aria-hidden="true"
+					class="h-4 w-4 sm:h-8 sm:w-8"
+					focusable="false"
+					name="mdi:circle-small"
+				/>
+			</div>
+			<p class="pl-4">
+				Sucking at something is the first step to being sorta good at something - Jake the Dog
+			</p>
+		</li>
+
+		<li class="mb-1 flex items-center sm:mb-2">
+			<div class="full justify-left flex items-center">
+				<Icon
+					aria-hidden="true"
+					class="h-4 w-4 sm:h-8 sm:w-8"
+					focusable="false"
+					name="mdi:circle-small"
+				/>
+			</div>
+			<p class="pl-4">Don’t let your dreams be dreams (to justify my 3am purchases)</p>
+		</li>
+
+		<li class="mb-1 flex items-center sm:mb-2">
+			<div class="full justify-left flex items-center">
+				<Icon
+					aria-hidden="true"
+					class="h-4 w-4 sm:h-8 sm:w-8"
+					focusable="false"
+					name="mdi:circle-small"
+				/>
+			</div>
+			<p class="pl-4">Today I am a [insert fad here] kinda guy</p>
+		</li>
+	</ul>
 </Section>

src/components/layout/Footer.astro

@@ -1,16 +1,32 @@
 ---
 import { siteConfig } from "@/site-config";
+import Icon from "node_modules/astro-icon/components/Icon.astro";
 
 const year = new Date().getFullYear();
 ---
 
-<footer class="border-b">
+<footer class="h-12 border-b sm:h-24">
 	<div
-		class="container mx-auto border-x border-l border-r px-0 py-8 text-sm font-normal sm:flex-row sm:justify-between sm:text-xs"
+		class="container mx-auto flex h-full items-end justify-between border-x border-l border-r text-sm font-normal"
 	>
 		<div class="me-0 sm:me-4">
 			&copy; {siteConfig.author}
 			{year}
 		</div>
+		<div class="flex w-7 justify-center">
+			<button
+				class="relative h-7 w-7 text-textProminent"
+				type="button"
+				x-data
+				@click.window="window.scrollTo({top: 0, behavior: 'smooth'})"
+			>
+				<Icon
+					aria-hidden="true"
+					class="h-4 w-4 sm:h-7 sm:w-7"
+					focusable="false"
+					name="mdi:arrow-up-thin-circle-outline"
+				/>
+			</button>
+		</div>
 	</div>
 </footer>

src/layouts/Base.astro

@@ -25,7 +25,9 @@ const {
 		<BaseHead articleDate={articleDate} description={description} ogImage={ogImage} title={title} />
 		<ViewTransitions />
 	</head>
-	<body class="bg-bgColor text-sm transition-colors duration-300 sm:text-base sm:leading-[1.75]">
+	<body
+		class="bg-bgColor text-sm font-light transition-colors duration-300 sm:text-base sm:leading-[1.75]"
+	>
 		<ThemeProvider />
 		<SkipLink />
 		<Header />

tailwind.config.ts

@@ -27,7 +27,7 @@ export default {
 		plugin(({ addComponents }) => {
 			addComponents({
 				".header-standard": {
-					"@apply text-xl sm:text-2xl leading-6 sm:leading-9 font-semibold text-textProminent tracking-tight": {},
+					"@apply text-lg sm:text-xl leading-6 sm:leading-9 font-semibold text-textProminent tracking-tight": {},
 				},
 				".subtitle-large": {
 					"@apply text-base sm:text-xl leading-8 sm:leading-10 font-normal text-textStandard tracking-wider": {},
@@ -57,7 +57,7 @@ export default {
 						"@apply scale-x-100": {},
 					},
 				},
-				"theme-toggle button": {
+				"theme-toggle button, footer button": {
 					"@apply redact": {},
 					"&::after": {
 						"@apply translate-x-[100%] w-full h-full top-0 duration-300": {},