From 54068f8cdbd9f2fc4784394fea00cf084f0d5e8e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 10 Jun 2025 01:52:34 -0700
Subject: [PATCH] Add link and tilt to bio on homepage

---
 src/lib/components/ProjectList.svelte | 34 +++++++++++++++++++--------
 src/lib/components/TiltCard.svelte    | 11 ++-------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/ProjectList.svelte b/src/lib/components/ProjectList.svelte
index 41ba627..162d550 100644
--- a/src/lib/components/ProjectList.svelte
+++ b/src/lib/components/ProjectList.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ProjectItem from '$components/ProjectItem.svelte'
+	import TiltCard from '$components/TiltCard.svelte'
 	import type { Project } from '$lib/types/project'
 
 	interface Props {
@@ -12,16 +13,20 @@
 <section class="projects">
 	<ul>
 		<li>
-			<div class="intro-card">
-				<p class="intro-text">
-					<span class="highlighted">@jedmund</span> is a software designer and strategist based out of
-					San Francisco.
-				</p>
-				<p class="intro-text">
-					In his 15 year career, he's focused his design practice on building tools that help people
-					connect with technology—and their own creativity.
-				</p>
-			</div>
+			<a href="/about" class="intro-link">
+				<TiltCard>
+					<div class="intro-card">
+						<p class="intro-text">
+							<span class="highlighted">@jedmund</span> is a software designer and strategist based out of
+							San Francisco.
+						</p>
+						<p class="intro-text">
+							In his 15 year career, he's focused his design practice on building tools that help people
+							connect with technology—and their own creativity.
+						</p>
+					</div>
+				</TiltCard>
+			</a>
 		</li>
 		{#if projects.length === 0}
 			<li>
@@ -67,6 +72,15 @@
 		}
 	}
 
+	.intro-link {
+		text-decoration: none;
+		display: block;
+		
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
 	.intro-card {
 		padding: $unit-3x;
 		background: $grey-100;
diff --git a/src/lib/components/TiltCard.svelte b/src/lib/components/TiltCard.svelte
index 09d0ed2..ceea541 100644
--- a/src/lib/components/TiltCard.svelte
+++ b/src/lib/components/TiltCard.svelte
@@ -48,17 +48,10 @@
 		transform-style: preserve-3d;
 		will-change: transform;
 		cursor: pointer;
-		border-radius: $image-corner-radius;
-		overflow: hidden;
-
-		// Use mask as a fallback for better clipping
-		-webkit-mask-image: -webkit-radial-gradient(white, black);
-		mask-image: radial-gradient(white, black);
+		border-radius: $card-corner-radius;
 
 		&:hover {
-			box-shadow:
-				0 6px 20px rgba(0, 0, 0, 0.1),
-				0 1px 8px rgba(0, 0, 0, 0.06);
+			box-shadow: $card-shadow-hover;
 		}
 	}
 </style>