Merge pull request #20 from abdonmorales/dev (Christmas 2025)

Fixing UI bugs and rolling out the rest of the UI refresh. (Christmas 2025)

Author: abdonmorales

package.json

@@ -23,7 +23,7 @@
     "@astrojs/react": "^4.4.2",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "astro": "^5.16.4",
+    "astro": "^5.16.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },

src/components/CallToAction.astro

@@ -21,9 +21,16 @@ const { href } = Astro.props;
 		line-height: 1.1;
 		border-radius: 999rem;
 		overflow: hidden;
-		background: var(--gradient-accent-orange);
-		box-shadow: var(--shadow-md);
+		background:
+			linear-gradient(145deg, color-mix(in srgb, #fff 12%, transparent), transparent 50%),
+			var(--gradient-accent-orange);
+		border: 1px solid color-mix(in srgb, var(--accent-regular) 55%, transparent);
+		box-shadow: 0 16px 36px color-mix(in srgb, var(--accent-regular) 28%, transparent);
+		-webkit-backdrop-filter: blur(12px) saturate(1.25);
+		backdrop-filter: blur(12px) saturate(1.25);
+		transition: transform var(--theme-transition), box-shadow var(--theme-transition);
 		white-space: nowrap;
+		will-change: transform, box-shadow;
 	}
 
 	@media (min-width: 20em) {
@@ -47,6 +54,11 @@ const { href } = Astro.props;
 		background-color: hsla(var(--gray-999-basis), 0.3);
 	}
 
+	a:hover {
+		transform: translateY(-1px);
+		box-shadow: 0 20px 42px color-mix(in srgb, var(--accent-regular) 32%, transparent);
+	}
+
 	@media (min-width: 50em) {
 		a {
 			padding: 1.125rem 2.5rem;

src/components/ContactCTA.astro

@@ -3,7 +3,7 @@ import CallToAction from './CallToAction.astro';
 import Icon from './Icon.astro';
 ---
 
-<aside>
+<aside class="contact-cta glass-panel flush">
 	<h2>Interested in working together?</h2>
 	<CallToAction href="mailto:abdonmorales@utexas.edu">
 		Send Me a Message
@@ -12,16 +12,16 @@ import Icon from './Icon.astro';
 </aside>
 
 <style>
-	aside {
+	.contact-cta {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 3rem;
-		border-top: 1px solid var(--gray-800);
-		border-bottom: 1px solid var(--gray-800);
-		padding: 5rem 1.5rem;
-		background-color: var(--gray-999_40);
-		box-shadow: var(--shadow-sm);
+		gap: 2.5rem;
+		padding: clamp(3rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2.75rem);
+		border-radius: 1.75rem;
+		box-shadow: var(--glass-shadow-medium);
+		backdrop-filter: var(--glass-blur-medium);
+		-webkit-backdrop-filter: var(--glass-blur-medium);
 	}
 
 	h2 {
@@ -31,8 +31,8 @@ import Icon from './Icon.astro';
 	}
 
 	@media (min-width: 50em) {
-		aside {
-			padding: 7.5rem;
+		.contact-cta {
+			padding: clamp(3.5rem, 5vw, 5.5rem);
 			flex-direction: row;
 			flex-wrap: wrap;
 			justify-content: space-between;

src/components/Footer.astro

@@ -1,13 +1,15 @@
 ---
 import Icon from './Icon.astro';
+import { version as astroVersion } from 'astro/package.json';
+
 const currentYear = new Date().getFullYear();
 const endCopyYear = new Date().getFullYear() + 2;
 ---
 
-<footer>
+<footer class="footer-shell glass-panel flush">
 	<div class="group">
 		<p>
-			Designed & Developed in Austin, Texas with <a href="https://astro.build/">Astro 5.14.1</a>
+			Designed & Developed in Austin, Texas with <a href="https://astro.build/">Astro {astroVersion}</a>
 			<Icon icon="rocket-launch" size="1.2em" />
 		</p>
 		<p>&copy; {currentYear} - {endCopyYear} Abdon Morales.</p>
@@ -19,26 +21,29 @@ const endCopyYear = new Date().getFullYear() + 2;
 	</p>
 </footer>
 <style>
-	footer {
+	.footer-shell {
 		display: flex;
 		flex-direction: column;
-		gap: 3rem;
+		gap: 2rem;
 		margin-top: auto;
-		padding: 3rem 2rem 3rem;
+		padding: 2.5rem clamp(1.5rem, 3vw, 3rem);
 		text-align: center;
 		color: var(--gray-400);
 		font-size: var(--text-sm);
+		border-radius: 1.5rem;
+		backdrop-filter: var(--glass-blur-light);
+		-webkit-backdrop-filter: var(--glass-blur-light);
 	}
 
-	footer a {
+	.footer-shell a {
 		color: var(--gray-400);
 		text-decoration: 1px solid underline transparent;
 		text-underline-offset: 0.25em;
 		transition: text-decoration-color var(--theme-transition);
 	}
 
-	footer a:hover,
-	footer a:focus {
+	.footer-shell a:hover,
+	.footer-shell a:focus {
 		text-decoration-color: currentColor;
 	}
 
@@ -56,10 +61,10 @@ const endCopyYear = new Date().getFullYear() + 2;
 	}
 
 	@media (min-width: 50em) {
-		footer {
+		.footer-shell {
 			flex-direction: row;
 			justify-content: space-between;
-			padding: 2.5rem 5rem;
+			padding: 2.5rem clamp(2rem, 4vw, 4rem);
 		}
 
 		.group {

src/components/MainHead.astro

@@ -66,22 +66,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site ?? 'https://abdonmor
 	/>
 </noscript>
 <script is:inline>
-	// This code is inlined in the head to make dark mode instant & blocking.
-	const getThemePreference = () => {
-		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-			return localStorage.getItem('theme');
-		}
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-	};
-	const isDark = getThemePreference() === 'dark';
-	document.documentElement.classList[isDark ? 'add' : 'remove']('theme-dark');
-
-	if (typeof localStorage !== 'undefined') {
-		// Watch the document element and persist user preference when it changes.
-		const observer = new MutationObserver(() => {
-			const isDark = document.documentElement.classList.contains('theme-dark');
-			localStorage.setItem('theme', isDark ? 'dark' : 'light');
-		});
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-	}
+	// Force dark mode for now; toggle intentionally disabled.
+	document.documentElement.classList.add('theme-dark');
+	try {
+		localStorage.setItem('theme', 'dark');
+	} catch (_) {}
 </script>